# git使用

# 三个分区

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

# 忽略文件

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

index.txt  //单个文件
node_modules/   //某个文件夹
*.log    //某类文件
css/*.js  //文件夹下的某类文件

# 基本命令

//git初始化一个仓库
git init

//添加到暂存区
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

# 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

# “环境变量” -> “用户变量”

编辑用户变量里的Path,将相应npm的路径 C:\Users\用户名\AppData\Roaming\npm 改为:C:\Program Files\nodejs\node_global

# 安装cnpm

  • 将 npm 源切换为淘宝源 npm config set registry https://registry.npm.taobao.org
  • 安装淘宝源 npm install -g cnpm --registry=https://registry.npm.taobao.org

# Node和node-sass的匹配关系

匹配关系 (opens new window)

# 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.npm.taobao.org # 设置淘宝镜像
npm config set registry https://registry.npm.taobao.org # npm

# 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
  • .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'
})

# 大屏数据展示组件库

大屏数据展示组件库 (opens new window)

# vuepress

vuepress (opens new window)

# 京东营销活动组件

京东营销活动组件 (opens new window)

# 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');