# 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
# 添加到暂存区
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 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的版本号,建议不要安装在系统盘
# 设置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的匹配关系
# 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 -D
less用来处理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配置
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'
})
# 大屏数据展示组件库
# vuepress
# 京东营销活动组件
# 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;
}
# vue-cookie
可以设置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');
语法使用 →