git使用 | A-Zero

# git使用

# 三个分区

工作区、暂存区、仓库区，其中暂存区、仓库区在.git隐藏文件夹中
红色文件：指工作区的文件需要提交
绿色文件：指暂存区的文件需要提交

# 忽略文件

.gitignore是一个固定的文件，只要写在这个文件中的内容，将来都会被git忽略

index.txt  # 单个文件
bin/       # 忽略当前路径下的bin文件夹，该文件夹下的所有内容都会被忽略，不忽略 bin 文件
/bin       # 忽略根目录下的bin文件
*.log      # 某类文件
css/*.js   # 文件夹下的某类文件
**/foo     # 忽略/foo, a/foo, a/b/foo等
a/**/b     # 忽略a/b, a/x/b, a/x/y/b等

# 基本命令

# git初始化一个仓库
git init

# 添加 Gitee 仓库的 URL 作为远程仓库
git remote add origin https://gitee.com/您的用户名/您的仓库名.git

# 添加到暂存区
git add index.html # 单个文件
git add css # 单个文件夹
git add *.js # 某一类型的文件

git add .  # 所有文件
git add -A  # 所有文件
git add --all  # 所有文件

# 添加到仓库区
git commit -m '提交的说明信息'
git commit # 需要使用vi输入内容 退出vi使用:q!
git commit -a -m '提交的说明信息'  # 针对已经提交过的文件，再次修改的时候可以直接提交
git commit --amend -m '提交的说明信息' # 修改最近的一次提交说明

# 查看文件状态
git status
git status -s # 简化日志输出

# 查看提交日期
git log
git log --oneline # 简化的日志信息
git reflog # 更详细的日志信息

# 版本回退，可以将代码回退到某个版本
git reset --hard 版本号 # 版本号只要有前几位即可
git reset --hard~1  # 回退到上一次提交
git reset --hard~2  # 回退到上上次提交

# 查看配置信息
git config --list

# 去掉配置信息
git config --unset --global user.email
git config --unset --global user.name

# 添加配置信息
git config --global user.email '303258100@qq.com'
git config --global user.name 'sylone'

# 添加本项目的配置信息
git config --global user.email '303258100@qq.com'
git config --global user.name 'sylone'

# 分支操作

# 查看所有分支
git branch

# 创建分支
git branch 分支名

# 切换分支
git checkout 分支名
# 切换并创建分支
git checkout -b 分支名

# 将其他分支合并到当前分支
git merge 分支名  

# 删除分支
git branch -d 分支名

# 分支冲突

对于同一个文件，如果有多个分支需要合并时，容易出现冲突
只能手动处理，再次提交，一般的做法，保留双方的更改，把自己的代码放到冲突代码的后面即可

branch 'master' does not exist

# 先执行
git pull origin master --allow-unrelated-histories

# 再调用
git branch --set-upstream-to=origin/master master

Please commit your changes or stash them before you merge

# 方法一：放弃本地修改，此方法本地修改的代码会被丢弃，不可找回
git reset --hard
git pull

# 方法二：使用git stash
git stash       # 保存当前工作进度，能够将所有未提交的修改（工作区和暂存区）保存至堆栈中
git pull        # 把服务器仓库的更新拉到本地仓库中
git stash pop   # 可以把你刚才stash到本地栈中的代码pop到本地

git stash apply # 使用apply，stash列表中的信息会继续保留，使用pop，会将列表中的信息删除
git stash list  # 存储到本地栈顶以后，你可以使用git stash list 查看你本地存储的stash日志
git stash clear # 清空Git栈，原来stash的节点都会被清除

# 开发一个新功能具体流程

创建分支 git branch login
切换到login分支 git checkout login
开发完成功能后提交到login分支，合并到master分支
切换到master，git checkout master
合并 git merge login
删除login分支 git branch -d login

# 远程仓库

# 克隆远程仓库的代码到本地仓库
git clone 远程仓库地址

# 将本地仓库中的代码提交到远程仓库
git push 远程仓库地址 分支名

# 将远程仓库的代码下载到本地仓库
git pull <远程仓库地址>

# 每次push操作都要带上远程仓库地址，非常麻烦，我们可以给仓库地址设置一个别名
git remote add 仓库别名  远程仓库地址
git push 仓库别名 master  # 使用的时候
git remote remove 仓库别名   # 删除别名
git remote  # 查看别名

# git clone的项目默认有一个origin的别名
git push origin master

拉取时 git pull There is no tracking information for the current branch

git remote add origin git地址 # 是指本地仓库和远程仓库建立连接
git pull origin master --allow-unrelated-histories
git branch --set-upstream-to=origin/master master
git pull

# SSH免密码登录

创建SSH Key：ssh-keygen -t rsa
找到文件夹 C:\用户\当前用户名.ssh
文件夹中有两个文件：id_rsa(私钥)、id_rsa.pub(公钥)
粘贴公钥id_rsa.pub内容到SSH配置的文本框中

# node配置

# 安装node.js

node.js下载地址 (opens new window)
安装node.js>= 8.6后，会自动安装好node以及包管理工具npm，我们后续的安装将依赖npm工具
分别输入node -v 和 npm -v 分别查看node和npm的版本号，建议不要安装在系统盘

安装nodejs

# 设置global和cache路径

设置路径能够把通过npm安装的模块集中在一起，便于管理

在nodejs的安装目录下，新建node_global和node_cache两个文件夹
设置global和cache（安装目录为D:\Program Files\nodejs\）

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

# 设置环境变量

设置环境变量可以使得在任意目录下都可以使用npm、vue等命令，而不需要输入全路径

'环境变量' -> '系统变量'

NODE_PATH:D:\Program Files\nodejs\node_global\node_modules

'环境变量' -> '用户变量'，修改npm的路径

Path:C:\Program Files\nodejs\node_global

# 安装cnpm

//安装淘宝源 
npm install -g cnpm --registry=https://registry.npm.taobao.org

//将 npm 源切换为淘宝源
npm config set registry https://registry.npm.taobao.org

# Node和node-sass的匹配关系

匹配关系 (opens new window)

# nvm的使用

nvm全称Node Version Manager，即Node版本管理器，官网地址 (opens new window)

# 查看已安装nodejs版本
nvm list
nvm ls

# 安装node
nvm install 12.10.0

# 切换node版本
nvm use 8.12.0

# npm和yarn

都是 JavaScript 世界的包管理工具，npm是 Node.js 平台的默认包管理工具
通过 npm和yarn 可以安装、共享、分发代码，管理项目依赖关系官网 (opens new window)

# yarn安装
npm i yarn -g

# 初始化项目 通过交互式会话引导你创建一个package.json文件
yarn init 与 npm init 一样通过交互式会话创建一个 package.json

yarn init  # yarn
npm init  # npm

# 跳过会话，直接通过默认值生成 package.json
yarn init --yes # yarn简写 -y  
npm init -y   # npm

# 安装一个模块到生产环境，模块会记录在 package.json 的 dependencies 下 
#  --save 记录在 package.json 中，可以不用加，默认的
yarn add webpack@2.3.3 --save  # yarn
npm install webpack@2.3.3 --save  # npm install 可简写为 i

# 安装一个模块到开发环境，模块会记录在 package.json 的 devDependencies 下 
yarn add webpack --dev # yarn 简写 -D
npm install webpack --save-dev # npm install 可简写为 i

# 全局安装
yarn global add webpack # yarn
npm install --global webpack  # npm --global 可简写为 -g

# 更新一个模块
yarn upgrade # 升级所有依赖项，不记录在 package.json 中
npm update # npm 可以通过 ‘--save|--save-dev’ 指定升级哪类依赖

yarn upgrade webpack # 升级指定包
npm update webpack --save-dev # npm

yarn upgrade --latest # 忽略版本规则，升级到最新版本，并且更新 package.json

# 移除模块
yarn remove webpack  # yarn
npm uninstall webpack --save  # npm 可以指定 --save 、 --save-dev，uninstall 可简写 un

# 安装 package.json 中的所有模块
yarn install # 或者 yarn 在 node_modules 目录安装 package.json 中列出的所有依赖
npm install # npm

npm uninstall *  # 删除全部依赖包
npm cache clean --force # 清缓存

# 安装时，如果 node_modules 中有相应的包则不会重新下载 --force 可以强制重新下载安装
yarn install --force # yarn 强制下载安装
npm install --force # npm

# 运行脚本 package.json
{
  "scripts": {
    "dev": "node app.js", # node app.js 可以启动项目
	"test":"npm i jquery"
    "start": "node app.js"
  }
}
yarn run dev # yarn 执行 dev 对应的脚本 node app.js
npm run test # npm 执行 dev 对应的脚本 npm i jquery
# 比较特殊的命令start、stop运行的时候可以省略run
yarn start # yarn
npm start # npm

# 显示某个包信息
yarn info webpack # yarn
npm info webpack # npm

yarn info webpack --json # 输出 json 格式
npm info webpack --json # npm

yarn info webpack readme # 输出 README 部分
npm info webpack readme

# 列出项目的所有依赖
yarn list # yarn
npm list # npm

# 清除缓存
npm cache clear --force

# 管理配置文件
yarn config set key value # 设置
npm config set key value

yarn config get key # 读取值
npm config get key

yarn config delete key # 删除
npm config delete key

yarn config list # 显示当前配置
npm config list

yarn config set registry https://registry.npmmirror.com # 设置淘宝镜像
npm config set registry https://registry.npmmirror.com # npm

npm view less-loader versions # 查看less-loader的所有版本

# webpack

webpack是一个现代应用程序的静态模块打包器，官网 (opens new window)，中文官网 (opens new window)

转换：可以实现语法的转换例如：less/sass/stylus->css，ES6->ES5，typescript->javascript
压缩：html、js、css文件的压缩合并（打包）
服务：给开发提供一个服务器的环境
打包：开发完成的项目需要经过webpack打包后上线

# webpack的模块

在webpack中，一切的静态资源都称之为模块
webpack兼容所有模块化的语法，可以使用以下任意一种规范

模块化的规范：

nodejs中使用的是commonjs规范（require、exports、module.exports）
例：const $=require('jquery');
浏览器端的模块化规范：AMD规范（require.js）、CMD规范（sea.js）
例：AMD规范< script src='jquery.js' >< /script >
ES6提供了最新的模块化规范（export、import，nodejs和浏览端都还不支持）

# 打包步骤

初始化一个项目 yarn init -y 或者 npm init -y
安装依赖包：npm install webpack webpack-cli --save-dev
在package.json文件中配置一条scripts:{"build":"webpack ./src/main.js -o ./dist/bundle.js"}，webpack表示使用webpack命令，-o表示输出
运行命令进行打包：npm run build

# 设置打包模式

生产模式：mode=production，开发模式：mode=development
生产模式下会进行压缩，体积比开发模式小

第一种设置方式，修改script命令

//--mode
scripts:{"build":"webpack ./src/main.js -o ./dist/bundle.js --mode=production"}

第二种设置方式，webpack.config.js，是webpack默认会读取的配置文件

scripts:{"build":"webpack"}

//webpack.config.js的配置
const path=require('path');
module.exports={
	
	//入口：要对哪些文件打包
	//可是指定字符串（单个文件）、数组（多个文件）、对象（单个或多个文件）
	entry:'./src/main.js',
	
	//出口：要打包到哪去
	output:{
		path:path.join(__dirname,'dist'), //打包的路径 __dirname当前路径
		filename:'bundle.js' //打包的文件名
	},
	
	//模式：打包的模式
	mode:'development'
}

TIP

main.js文件中可以包含多个js文件一块打包到bundle.js文件中，但是需要在main.js加载js文件
例如：加载aa.js文件 -> require('./aa')；加载jquery -> const $=require('jquery')

# webpack插件

# html-webpack-plugin 打包处理html

安装 npm i html-webpack-plugin -D
配置webpack.config.js

const htmlWebpackPlugin=require('html-webpack-plugin');
const path=require('path');
module.exports={
	entry:'./src/main.js',
	output:{
		path:path.join(__dirname,'dist'), //打包的路径
		filename:'bundle.js' //打包的文件名
	},
	mode:'development',
	
	plugins:[
		//将src下的index.html打包到disk文件夹下，且会自动引用bundle.js
		new htmlWebpackPlugin({template: './src/index.html'});
	]
}

# webpack的loader

loader让webpack能够去处理那些非JavaScript文件（webpack自身只理解JavaScript）
loader可以将所有类型的文件转换为webpack能够处理的有效模块，然后就可以利用webpack的打包能力，对它们进行处理

# css-loader 处理css

安装 npm i css-loader style-loader -D
配置webpack.config.js

//在main.js中导入样式
require('./css/css.css');

//配置webpack.config.js
const path=require('path');
module.exports={
	entry:'./src/main.js',
	output:{
		path:path.join(__dirname,'dist'), //打包的路径
		filename:'bundle.js' //打包的文件名
	},
	mode:'development',
	plugins:[
		new htmlWebpackPlugin({template: './src/index.html'});
	],
	//配置loader
	module:{
		//规则
		rules:[
			//处理CSS的规则
			{
				//用于匹配对应的文件
				test:/\.css$/,
				
				//匹配到的文件用什么loader来处理
				//css-loader只能把css文件进行处理
				//style-loader 让样式生效
				//处理顺序从右到左css-loader -> style-loader
				use:['style-loader','css-loader'] 
			}
		]
	}
}

# less-loader 把less编译成css

安装 npm i less-loader less style-loader -Dless用来处理less语法（变量、函数、嵌套等）
配置webpack.config.js

//在main.js中导入样式
require('./css/less.less');

//配置webpack.config.js
const path=require('path');
module.exports={
	entry:'./src/main.js',
	output:{
		path:path.join(__dirname,'dist'), //打包的路径
		filename:'bundle.js' //打包的文件名
	},
	mode:'development',
	plugins:[
		new htmlWebpackPlugin({template: './src/index.html'});
	],
	//配置loader
	module:{
		rules:[
			{
				test:/\.less$/,
				use:['style-loader','css-loader','less-loader'] 
			}
		]
	}
}

# file-loader/url-loader 处理文件（图片、音频、视频、字体图标等）

安装npm i file-loader url-loader -D
配置webpack.config.js
如果需要将文件打包到bundele.js中需要使用url-loader，推荐使用url-loader

const path=require('path');
module.exports={
	entry:'./src/main.js',
	output:{
		path:path.join(__dirname,'dist'), //打包的路径
		filename:'bundle.js' //打包的文件名
	},
	mode:'development',
	plugins:[
		new htmlWebpackPlugin({template: './src/index.html'});
	],
	//配置loader
	module:{
		rules:[
			//file-loader
			{
				test:/\.(gif|png|jpg|jpeg)$/,
				use:'file-loader' 
			},
			//url-loader
			{
				test:/\.(gif|png|jpg|jpeg)$/,
				use:{
					loader:'url-loader',
					options:{
						//图片小于10KB使用url-loader否则使用file-loader
						limit:10*1024
					}
				}
			}
		]
	}
}

处理字体图标文件，可以和上面的合并处理

//在main.js中导入样式
require('./css/icofont.less');

//配置webpack.config.js
const path=require('path');
module.exports={
	entry:'./src/main.js',
	output:{
		path:path.join(__dirname,'dist'), //打包的路径
		filename:'bundle.js' //打包的文件名
	},
	mode:'development',
	plugins:[
		new htmlWebpackPlugin({template: './src/index.html'});
	],
	//配置loader
	module:{
		rules:[
			{
				test:/\.(eot|svg|ttf|woff|woff2)$/,
				use:{
					loader:'url-loader',
					options:{
						//图片小于10KB使用url-loader否则使用file-loader
						limit:10*1024
					}
				}
			}
		]
	},
	//或者
	{ 
		/**
		 * 打包其他资源（除了html/js/css等资源以外的资源，比如图标，字体）
		 * 可以不用test去匹配，而用exclude排除
		 */
		exclude: /\.(css|less|jpg|png|gif|html|js)$/,
		loader: 'file-loader',
		options: {
		  name: '[hash:10].[ext]',
		  outputPath: 'media'
		}
	}
}

# babel-loader 可以把最新版本的语法编译成浏览器能兼容的代码（ES5）

安装npm i babel-loader @babel/core @babel/preset-env -D
配置webpack.config.js

const path=require('path');
module.exports={
	entry:'./src/main.js',
	output:{
		path:path.join(__dirname,'dist'), //打包的路径
		filename:'bundle.js' //打包的文件名
	},
	mode:'development',
	plugins:[
		new htmlWebpackPlugin({template: './src/index.html'});
	],
	//配置loader
	module:{
		rules:[
			{
				test:/\.js$/,
				//排除的文件
				exclude: /node_modules/,
				use:{
				  loader: 'babel-loader',
				  options: {
					  //预设：配置哪些版本的js代码需要被处理
					  //@babel/preset-env：表示es6以上的语法都需要处理
				     presets: ['@babel/preset-env']
				  }
				}
			}
		]
	}
}

# 打包TS文件

安装npm i typescript ts-loader -D
配置webpack.config.js

const path=require('path');
module.exports={
	entry:'./src/main.ts',
	output:{
		path:path.join(__dirname,'dist'), //打包的路径
		filename:'bundle.js' //打包的文件名
	},
	mode:'development',
	plugins:[
		new htmlWebpackPlugin({template: './src/index.html'});
	],
	//处理哪种类型的文件
	resolve:{
		extensions:['.ts','.js']
	},
	//配置loader
	module:{
		rules:[
			{
				test:/\.ts$/,
				//排除的文件
				exclude: /node_modules/,
				use:{
				  loader: 'ts-loader'
				}
			}
		]
	}
}

# webpack-dev-server 开发辅助包

自动开启HTTP服务、自动打开浏览器、自动监视文件变化、每次修改完自动重新打包

安装npm i webpack-dev-server -D
修改script命令

"scripts":{
	"build":"webpack",
	"dev":"webpack-dev-server"
}

//webpack.config.js，非必须的配置
const path=require('path');
module.exports={
	entry:'./src/main.js',
	output:{
		path:path.join(__dirname,'dist'), //打包的路径
		filename:'bundle.js' //打包的文件名
	},
	mode:'development',
	plugins:[
		new htmlWebpackPlugin({template: './src/index.html'});
	],
	module:{},
	
	//配置webpack-dev-server
	devServer:{
		//预览文件的目录，默认在pulic文件夹下
		static: {
		  directory: path.join(__dirname, ''),
		},
		open:true,
		port:3000,
		hot:true  //启用热更新
	}
}

# vue安装配置

//安装vue命令行工具
npm install @vue/cli -g

//获取v版本信息
vue -V

//创建项目
vue create demo
vue init webpack demo

//可视化的创建项目
vue ui

注意

一定要在全局模式下安装@vue/cli，否则无法使用vue命令
Vue CLI的包名由vue-cli改成了@vue/cli（1.X或2.X）

# vue脚手架@vue/cli

@vue/cli是Vue官方提供的用于初始化Vue项目的脚手架工具。使用@vue/cli有以下几大优势

脚手架是开发现代web应用的必备
@vue/cli是一套成熟的vue项目架构设计，会跟着Vue版本的更迭而更新
@vue/cli提供了一套本地的热加载的测试服务器
@vue/cli集成了一套打包上线的方案，可使用webpack或Browserify等构建工具
vue脚手架还提供了配套的图形管理界面，用户创建、开发和管理你的项目
充分利用webpack、babel、eslint（检查代码是否合法）等工具辅助项目开发

# 创建项目

选择预设（手动选择）
选择项目功能（Babel、Router、Vuex、CSS Pre、Linter/Formatter代码风格检测与格式化）
选择路由风格（history需要服务端配合，地址栏不带#，不能刷新）
选择CSS预处理语言（less）
选择代码规范（Airbnb 爱彼迎：带分号，Standard：不带分号）
选择校验规则（Lint on save：保存时校验，Lint and fix on commit：提交时校验，失败无法提交）
配置文件的生成方式（In dedicated config files：生成专用的配置文件，In package json）
是否保存配置，下次可以直接使用

# vue.config.js配置

官方配置 (opens new window)

module.exports={
	//默认情况下 babel-loader 会忽略所有 node_modules 中的文件
	//你可以启用本选项，以避免构建后的代码中出现未转译的第三方依赖
	transpileDependencies: true,
    // transpileDependencies: [
	// 	/[/\\]node_modules[/\\](.+?)?element-ui(.*)[/\\]src/,
	// 	/[/\\]node_modules[/\\](.+?)?element-ui(.*)[/\\]package/,
	// 	/[/\\]node_modules[/\\](.+?)?f-render(.*)/,
	// 	/[/\\]node_modules[/\\](.+?)?quill-image-drop-module(.*)/,
	// 	/[/\\]node_modules[/\\](.+?)?vue-ele-form(.*)/,
	// 	/[/\\]node_modules[/\\](.+?)?vue-ele-form-bmap(.*)/,
	// 	/[/\\]node_modules[/\\](.+?)?vue-baidu-map(.*)/,
	// 	/[/\\]node_modules[/\\](.+?)?vue-ele-upload-image(.*)/,
	// ],
	//部署应用包时的基本URL，设置为'./'时根目录二级目录皆可部署
    publicPath:'./',
	//打包生产环境构建文件的目录
	outputDir:'dist',
	//放置生成的静态资源的 (相对于outputDir的) 目录
	assetsDir:'',
	//指定生成的index.html的输出路径 (相对于outputDir)。也可以是一个绝对路径
	indexPath:'index.html',
	//关闭文件名哈希
	filenameHashing:false,
	//关闭eslint校验
	lintOnSave:false,
	//设置为true后你就可以在Vue组件中使用template选项
	runtimeCompiler:false,
	
	//在设置为false之后，js文件就不会生成map文件，在源代码中就看不到webpack文件夹
	//置为false，既可以减少包大小，也可以加密源码
	productionSourceMap:true,
	
	//配置css变量文件地址
	// $font-size-mini: 12px;
	// $font-size-common: 14px;
	// $font-size-medium: 16px;
	// $font-size-big: 20px;
	
	// $color-primary: #1E90FF;
	// $background-primary: #ffffff;
	
	// 全局标题大小
	// $font-size-title: 18px;
	// $font-size-titlecolor:#6cd9f8;
	
	// 列表文字颜色字体大小
	// $list-size-color:#c5f2ff;
	// $list-font-size:14px;
	css: {
	  loaderOptions: {
		sass: {
		  additionalData: `@import "@/assets/css/variable.scss";`
		}
	  }
	}
	
	//配置文件压缩，服务端需要开启gzip:on
	configureWebpack: (config) => {
		if (process.env.NODE_ENV === 'production') {
		  // 仅在生产环境下启用该配置
		  return {
			plugins: [
			  new CompressionWebpackPlugin({
				filename: '[path].gz[query]',
				algorithm: 'gzip',
				test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
				threshold: 1024, // 只有大小大于该值的资源会被处理,当前配置为对于超过1k的数据进行处理，不足1k的可能会越压缩越大
				minRatio: 0.99, // 只有压缩率小于这个值的资源才会被处理
				deleteOriginalAssets: false // 删除原文件
			  })
			]
		  }
		}
	  },
	//修改webpack配置
	devServer:{
		disableHostCheck:true, //当设置为true时，此选项将绕过主机检查
		
		//默认情况下是/，所以您可以作为http://localhost:8080使用
		//更改为 /assets/ 就变为 http://localhost:8080/assets
		publicPath: '/assets/', 
		host: '127.0.0.1',
		port:3000,
		open:true,
		proxy: {
		  '/api': {
			disableHostCheck:true, //当设置为true时，此选项将绕过主机检查
		
			//默认情况下是/，所以您可以作为http://localhost:8080使用
			//更改为 /assets/ 就变为 http://localhost:8080/assets
			publicPath: '/assets/', 
			target: 'http://expo.sdxsk.com/api', //请求接口域名
			ws: true,
			secure: false,
			// 是否允许跨域
			changOrigin: true,
			// 如果配置了axios的baseURL为'/api',在这里需要用空字符串代替
			pathRewrite: {
			  '^/api': ''
			}
		  }
		}
	}
	//这样写是对所有的接口都代理的，不止是检测到 /api 的接口
	devServer: {
	 proxy: 'http://e.dxy.net'
	}
}

# 目录介绍

.editorconfig：编辑器的配置（VSCode需要安装此插件）
babel.config.js：配置Babel（ES6转ES5）
.prettierrc：格式化文件配置

"semi": false,    // 使用分号, 默认true
"singleQuote": true,   // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
"bracketSpacing": true   // 对象中的空格 默认true

修改eslint的规则，在package.json的eslintConfig中的rules

//方法名前面的空格数
"space-before-function-paren": 0

//组件 name 属性值必须使用帕斯卡命名法（单词首字母大写）
"vue/name-property-casing": ["error", "PascalCase"]

单独某一行忽略eslint的规则

Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

# vscode设置

安装时需要的几个插件

chinese：中文包
EditorConfig for VS Code：规范代码风格
Live Server：实时服务器
Vetur：格式化VUE代码

html、css格式化时禁止换行

//打开—>文件—>首选项—>设置，然后在搜索栏键入vetur.format.defaultFormatterOptions
//点击后编辑文件,在原配置信息下面加上如下一段配置即可:
"vetur.format.defaultFormatter.css": "none", //禁止css换行
"vetur.format.defaultFormatter.html": "js-beautify-html", //禁止html换行
"vetur.format.defaultFormatterOptions": {
	"js-beautify-html": {
	  "wrap_attributes": "auto"
	},
	"prettyhtml": {
	  "printWidth": 100,
	  "singleQuote": false,
	  "wrapAttributes": false,
	  "sortAttributes": false
	}
}

vue文件格式化时禁止自动补填加上冒号和分号

找到 Vetur › Format › Default Formatter: JS 将默认值 prettier 修改为 vscode-typescript 即可

# http-server

http-server是一个基于Node.js的简单零配置命令行HTTP服务器
安装：$ npm install http-server -g
打开：http-server -c-1（只输入http-server的话，更新了代码后，页面不会同步更新）
端口：http-server -p 443 或者 hs -p 443（启动本地服务设置端口号）
关闭：按快捷键CTRL-C

# json-server

会自动根据一个JSON文件生成一套RESTful风格的增删改查接口

# 常用组件

# 时间处理

安装模块

npm install moment --save

在main.js中引入

import moment from 'moment'; //导入模块
moment.locale('zh-cn'); //设置语言 或 moment.lang('zh-cn'); 
Vue.prototype.$moment = moment;//赋值使用

使用

//1小时前
this.$moment('2019/06/17 14:00:00').startOf('hour').fromNow();
//2019年08月01日 19时50分20秒
this.$moment().format('YYYY年MM月DD日 HH时mm分ss秒');  
//2019年08月01日 19时50分20秒
this.$moment(new Date()).format('YYYY年MM月DD日 HH时mm分ss秒'); 
//获取前一天的日期
moment().subtract(1, 'day').format('YYYY-MM-DD')
//获取前一个月的日期
moment().subtract(1, 'month').format('YYYY-MM-DD')
//获取前一年的日期
moment().subtract(1, 'year').format('YYYY-MM-DD')

//计算两个日期的天数
let d = this.$moment('2019/06/17 14:00:00').diff(this.$moment('2019/06/20 14:00:00'),'days')

//比较两个日期的大小
let flag=this.$moment('2019/06/17 14:00:00').isBefore('2019/06/17 14:00:00')

# 数字动画

//安装
npm install vue-count-to 
//导入
import countTo from 'vue-count-to' 
//使用
<count-to  :start-val="0" :end-val="999999" :duration="1000"></count-to>

# 富文本编辑器

wangEditor官网 (opens new window)

import '@wangeditor/editor/dist/css/style.css'
import { createEditor, createToolbar } from '@wangeditor/editor'

// 创建编辑器
const editor = createEditor({
  selector: '#editor-container'
})
// 创建工具栏
const toolbar = createToolbar({
  editor,
  selector: '#toolbar-container'
})

# Lodash

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。它内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数,Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单

Lodash 中文文档 (opens new window)

npm i -save lodash   \\全局安装

//按需引入方法一：
import _get from 'lodash/get'
import _map from 'lodash/map'
import _uniq from 'lodash/uniq'
import _pick from 'lodash/pick'
import _omit from 'lodash/omit'
import _isNaN from 'lodash/isNaN'
import _property from 'lodash/property'
import _findIndex from 'lodash/findIndex'
import _isUndefined from 'lodash/isUndefined'
import _isString from 'lodash/isString'
import _debounce from 'lodash/debounce'
 
 
//按需引入方法二：
import {debounce, isString, isUndefined, isNaN, map} from 'lodash'

常见方法

Array //适用于数组类型，比如填充数据、查找元素、数组分片等操作
Collection //适用于数组和对象类型，部分适用于字符串，比如分组、查找、过滤等操作
Function //适用于函数类型，比如节流、延迟、缓存、设置钩子等操作
Lang //普遍适用于各种类型，常用于执行类型判断和类型转换
Math //适用于数值类型，常用于执行数学运算
Number //适用于生成随机数，比较数值与数值区间的关系
Object //适用于对象类型，常用于对象的创建、扩展、类型转换、检索、集合等操作
Seq //常用于创建链式调用，提高执行性能（惰性计算）
String //适用于字符串类型

# swiper 循环轮播

在vue项目中安装swiper

cnpm install swiper@5.4.5 -S
cnpm install vue-awesome-swiper@3.1.3 -S

在main.js中引入swiper.css

import 'swiper/css/swiper.css'

引入必要的组件

import { swiper, swiperSlide } from "vue-awesome-swiper";

components: {
    swiper,
    swiperSlide
}

结构添加

data() {
    return {
      swiperOptions: {
		  direction: 'horizontal', //vertical
		  loop: true,
		  slidesPerView: 5, // 数量
		  centeredSlides: true,
		  slideToClickedSlide: true,
		  autoplay: {
			delay: 3000,
			stopOnLastSlide: false,
			disableOnInteraction: false
		  },
		  autoHeight: true, // 解决垂直滚动
		  observer: true, // 修改swiper自己或子元素时，自动初始化swiper
		  observeParents: true // 修改swiper父元素时，自动初始化swiper
		  // 显示分页
		  // pagination: {
		  //   el: '.swiper-pagination',
		  //   clickable: true // 允许分页点击跳转
		  // },
		  // // 设置点击箭头
		  // navigation: {
		  //   nextEl: '.swiper-button-next',
		  //   prevEl: '.swiper-button-prev'
		  // }
		  // 修改默认点击左右箭头样式
		  // navigation: {
		  // nextEl: ".swiper-button-next",
		  // prevEl: ".swiper-button-prev",
		  // },
		}
    };
},

template 箭头放到轮播图内

<template>
  <div class="wrapper">
    <swiper ref="mySwiper" v-bind:options="swiperOptions"  v-if="listMenu.length>0">
      <swiper-slide v-for="(item, index) in listMenu" v-bind:key="index">
          {{item}}
      </swiper-slide>

      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
  </div>
</template>

template 箭头放到轮播图外

<template>
  <div class="wrapper">
    <swiper ref="mySwiper" v-bind:options="swiperOptions"  v-if="listMenu.length>0">
      <swiper-slide v-for="(item, index) in listMenu" v-bind:key="index">
          {{item}}
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
     <div class="swiper-button-prev swiper-button-prevsp" slot="button-prev"></div>
      <div class="swiper-button-next swiper-button-nextsp" slot="button-next"></div>
  </div>
</template>

样式设置

.wrapper{
	margin-top: 60px;
	width: 836px;
	height: 150px;
}
.swiper-container{
    height: 150px;
}

注意

最为重要的是要设置 v-if="parentData.length"
autoHeight: true 解决垂直滚动
observer: true 修改swiper自己或子元素时，自动初始化swiper
observeParents: true 修改swiper父元素时，自动初始化swiper

# vue-seamless-scroll

vue-seamless-scroll是vue当前使用最多的一个列表循环滚动插件

引入库

//安装vue-seamless-scroll插件
npm install vue-seamless-scroll --save
//在mian.js文件中引入
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

具体使用

<div class="con-1">
  <div class="list-1" v-for="item in listNewsTop" :key="item.id" @click="tapUrl(item.id)"><div class="name">{{item.title}}</div><span>{{item.time}}</span></div>
  <vue-seamless-scroll :data="listNewsCom" :class-option="optionDefault"   class="seamless-warp">
	  <div class="list-2" v-for="item in listNewsCom" :key="item.id"  @click="tapUrl(item.id)"><div class="name">{{item.title}}</div><span>{{item.time}}</span></div>
  </vue-seamless-scroll>
</div>

data () {
    return {
      optionDefault: {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      },
    }
  }

.seamless-warp{
	width: 430px;
	height: 90px;
	overflow: hidden;
}

可以设置cookie的过期时间、设置domain等

// npm install vue-cookie --save
var Vue = require('vue');
var VueCookie = require('vue-cookie');
  
Vue.use(VueCookie);
  
// 设置cookie  
this.$cookie.set('test', 'Hello world!', {expires: 1, domain: 'localhost'});
// expires 过期时间：  
// 1Y  ---->  1年 
// 1M  ---->  1个月
// 1D  ---->  1天
// 1h  ---->  1小时
// 10m ---->  10分支
// 30s ---->  30秒
  
// 使用cookie
this.$cookie.get('test');
 
//删除cookie
this.$cookie.delete('test');

# 可视化大屏自适应

// npm i autofit.js
import autofit from 'autofit.js'

// App.vue 需要在renderDom挂载到dom之后，才可以生效
export default {  
  mounted() {
  autofit.init({
        designHeight: 1080,
        designWidth: 1920,
        renderDom:"#app",
        resize: true
    })
  },
}

// 以上使用的是默认参数，可根据实际情况调整，参数分别为
// renderDom（可选）：渲染的dom，默认是 "#app"，必须使用id选择器
// designWidth（可选）：设计稿的宽度，默认是 1920
// designHeight（可选）：设计稿的高度，默认是 929 ，如果项目以全屏展示，则可以设置为1080
// resize（可选）：是否监听resize事件，默认是 true

# 支持Vue2和Vue3的拖拽组件

组件地址 (opens new window)

# 可视化编辑器

h5-Dooring (opens new window)

# WEB打印组件

Hiprint (opens new window)

语法使用 →