一、安装前的准备工作

安装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 },

六、手动校验代码格式

在package.json修改这行代码，添加 --fix

1 "lint": "eslint --fix --ext .js,.vue src"

使用终端 npm run lint 进行代码格式化

Vue项目的搭建以及开发前的配置