一、安装前的准备工作
- 安装node.js
- 安装webpack（ npm install webpack -g ）
- 安装vue （npm install -g vue-cli ）
- 查看vue版本 （ vue -V ）
- 创建vue项目 （ vue init webpack vuedemo ）
含义：项目名称
项目简介
项目的作者
是否安装Vue-router（是）
是否进行语法检测（是）
是否下载测试代码（否）
最后一个也是 no
- 进入安装目录 cd vuedemo
- 运行项目；npm run dev
二、把Vue项目的默认的#去除
在router目录下的index.js下进行配置，添加以下配置
mode: 'history',
三、解决移动端点击延迟300毫秒事件
在package.json文件中找到dependencies 对象，在此对象后面添加一个组件 "fastclick": "^1.0.6",
或者使用npm install fastclick --save 在终端上进行下载安装fastclick
Fastclick 的配置（在main.ja中进行配置）
1 // 引入fastclick 2 3 import fastClick from 'fastclick' 4 5 // 引入公共样式 6 7 import './assets/styles/reset.css' 8 9 // 1像素边框yangs 10 11 import './assets/styles/border.css' 12 13 Vue.config.productionTip = false 14 15 // 把 fastClick 事件绑定在 body上 16 17 fastClick.attach(document.body)
四、常用到的语法检测配置（eslintsc.js）
找到 .eslintrc.js中的rules对象，在这个对象中进行配置
1 rules: { 2 3 // 配置强制有分号（；) 4 5 // 'semi': ['error','always'], 6 7 // 去除空格报错 8 9 'indent': 0, 10 11 // 文件末尾强制换行 12 13 'eol-last': 0 14 15 }
五、配置别名（webpack.base.conf.js）
找到bulid目录下的webpack.base.conf.js下的resolve 对象添加别名对象
1 resolve: { 2 3 extensions: ['.js', '.vue', '.json'], 4 5 alias: { 6 7 'vue$': 'vue/dist/vue.esm.js', 8 9 '@': resolve('src'), 10 11 'styles': resolve('src/assets/styles'), 12 13 'common': resolve('src/common'), 14 15 } 16 17 },
六、手动校验代码格式
关闭代码校验，在bulid目录下的webpack.base.conf.js文件下注释掉
1 module: { 2 rules: [ 3 /* { 4 test: /.(js|vue)$/, 5 loader: 'eslint-loader', 6 enforce: 'pre', 7 include: [resolve('src'), resolve('test')], 8 options: { 9 formatter: require('eslint-friendly-formatter') 10 } 11 }, */
在package.json修改这行代码，添加 --fix
1 "lint": "eslint --fix --ext .js,.vue src"
使用终端 npm run lint 进行代码格式化