一、安裝前的準備工作

• 安裝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項目的搭建以及開發前的配置