前言
本文也會在github上我的web-study倉庫中同步更新，歡迎star。 戳這里，傳送
准備工作
-
判斷是否需要翻牆或安裝鏡像，鏡像一般可安裝國內淘寶鏡像，詳情可看這里：cnpm
npm install -g cnpm --registry="cnpm"全局安裝淘寶cnpm。 -
開發工具選擇很多，VUE無專用開發工具，開發項目多以SPA形式體現，本例使用 Visual Studio Code。
-
調試工具選擇很多，官方推薦 vue-devtools 。
安裝方法：翻牆或者github主頁。https://github.com/vuejs/vue-devtools下載壓縮包，解壓到Chrome擴展程序。
環境搭建
-
安裝 Node.js 10.15.3, npm包管理工具（高版本node.js自帶npm）。
安裝完成后，DOS命令行輸入命令檢查安裝情況npm -v,出現npm版本號即可。
下載地址https://nodejs.org/en/download/ -
全局安裝 vue-cli腳手架
DOS命令行安裝(-g 參數表示安裝至 npm 工作路徑,以后任意位置均可訪問)
npm install -g vue-cli -
安裝 開發工具 Visual Studio Code
-
下載地址 https://code.visualstudio.com/Download
注意 User Installer / System Installer 不同（建議安裝系統版本）
-
安裝 Vetur ,vue 2 snippets插件
文件 -> 首選項 -> 擴展 -> 搜索 -> 輸入 Vetur/vue 2 snippets -> 安裝
-
安裝 語言包（視個人喜好）
文件 -> 首選項 -> 擴展 -> 搜索 -> 輸入 Chinese(Simplified)... -> 安裝
-
打開文件夾... 開發已存在項目
-
-
安裝 vue-devtools。
-
DOS 命令進入解壓后目錄
修改\shells\chrome\manifest.json中 background 節點 persistent 值為 true -
運行 npm install 命令安裝依賴包。
進度條等待完成，大約5-15分鍾，必要使用cnpm -
運行 npm run build(一定要執行這步，不然后面會報錯)
-
啟動 Google Chrome -> 輸入 chrome://extensions/ -〉確認打開“開發者模式” -> 加載已解壓擴展程序 -> 選擇 shells\chrome 確定即可安裝
初始化項目
初始化項目有多種方式，建議采用 Webpack 模板模式
-
進入需要創建Vue項目文件夾，打開DOS命令行輸入：vue init webpack 項目名稱
-
然后終端會出現下圖“一問一答”模式
“Project name”：這個是項目名稱，默認是輸入時的那個名稱，想改的話直接輸入修改，也可以直接回車
“Install vue-router”:是否需要vue-router，這里默認選擇使用，這樣生成好的項目就會有相關的路由配置文件
“Use ESLint to lint your code”:是否使用ESLint，剛才說了我們這個項目需要使用所以也是直接回車，默認使用，這樣會生成相關的ESLint配置
“Setup unit tests with Karma + Moch?”: 是否安裝單元測試。由於我們現在還沒有單元測試，所以這里選擇的是”N”
“Setup e2e tests with Nightwatch”：是否安裝e2e測試，這里我也同樣選擇的是“N”
-
下載依賴包
cd ‘項目文件’ 終端執行命令：npm install .這個過程會生成一個node_modules 文件夾
-
調試項目
終端輸入：npm run dev/start
-
打開Google Chrome ,默認項目地址:localhost://8080,訪問即可。F12啟用開發者調試工具，調試菜單欄選擇 Vue
開發過程
-
相關文件說明
build和config >webpack配置相關文件
node_modules>項目需要的模板文件
src/main.js>入口js文件
src/assets>公共的樣式，圖片文件
src/components>各種vue組件文件
src/App.vue>頁面主組件
src/router>vue-router 路由配置文件
static>靜態資源文件（不會被webpack處理）
.eslintrc.js>eslint檢查配置文件
.editorconfig>代碼編輯環境配置文件
.eslintignore>eslint檢查忽略文件
.babelrc>babel編譯參數配置文件
index.html>主頁，項目入口文件
package.json>項目配置文件，描述項目信息和依賴
README.md>項目的說明文檔
-
新增組件
在 \src\components 目錄新建 vue 文件(每一個.vue文件都是一個單獨vue組件，用來實現頁面特定的功能界面，包括基本的骨架html+CSS+js)。例如 Hellovue.vue，vue文件代碼標准模板樣式如下：
<template>
<div id="...">
組件html模板
</div>
</template>
<style>
css相關樣式
</style>
<script>
export default { //默認向外暴露一個對象
name:'Hellovue',
data () {
return {};// data保存數據必須返回一個對象
}
};
</script>
-
引入組件
-
在App.vue主文件中script標簽添加
import Hellovue form ./components/Hellovue.vue導入子組件。 -
組件模板對象添加components屬性。
-
重啟項目即可看到自己定義的組件。
-
新增頁面（利用vue路由實現）在 \router\index.js 添加新增頁面路由
-
import Hellovue from '@/components/Hellovue'
...
{
path: '/Hellovue',
name: 'Hellovue',
component: Hellovue
}
在App.vue主頁面掛載<router-link to='Hellovue'>跳轉我的頁面</router-link>即可
-
打包編譯
終端運行命令編譯
npm run build
即可產品dist文件，項目上線后只需把dist文件丟到服務器即可。ps:如果本地測試，則需修改webpack生產環境下的assetsPublicPath配置
注意事項：
-
最好使用cnpm代替npm安裝依賴，因為開發過程中少部分包如果用npm是無法下載完成，一直卡住，換為cnpm毫無壓力記得加上--save選項，否則別人安裝的話會缺少包.
-
路徑說明
‘/‘, 表示項目根目錄
‘./‘，表示當前目錄
‘../‘ ，表示上一級目錄，可以連續多個，比如‘../../../‘表示往外層退3級目錄
-
所有組件的數據都必須放置在data函數返回的對象中，無論是否有數據，否則會報錯。
-
一個template組件下只能有一個並列的div，否則報錯。
-
ESLint 格式問題
-
vue 創建項目時，ESLint 選擇啟用時候，因 ESLint 代碼檢查極其嚴格，縮進空格數量，尾部空行等皆在檢查之列，可以選擇關閉。
build/webpack.base.conf.js 注釋掉 module->rules 中 ESLint 規則，關閉代碼：
//...(config.dev.useEslint ? [createLintingRule()] : []),
規范起見，修改 .eslintrc.js 文件 rules 節點，關閉指定格式檢查。例如
'semi': ['off', 'always'], 需要分號的地方即錄入，否則 ESLint 強制檢查不錄入分號。說明參照https://eslint.org/docs/rules/semi。隨后重新 npm run dev 即可。完整說明參照https://github.com/standard/standard/blob/master/docs/RULES-zhcn.md。或者在.eslintignore文件下配置相關忽略ESlint檢查的文件格式，如:*.js,eslint則默認忽略根目錄下所有的js文件。 -
Tab Size 調整
多數開發工具 Tab Size 默認 4，ESLint 默認 2，需要將開發工具 Tab Size 默認值調為2或關閉 ESLint
-
VUE 腳本結束標志
</script>或者.vue文件結尾</style>不能作為文件結尾，其后必須另起一行寫入其它代碼，必要時插入空行.
-
常見問題：
-
npm run dev提示webpack-dev-server --inline --progress --config build/webpack.dev.conf.jsnot found module ‘xxx’
原因：依賴庫不完整
方案：項目所在目錄運行
npm install xxx -S安裝相關依賴包，或按照如下指定安裝相關版本，npm install xx@版本號 -S。 -
安裝插件提示
npm WARN rollback Rolling back ...... failed (this is probably harmless): EPERM: operation not permitted原因：npm 權限不足
方案：安裝所在目錄設置權限
npm config set user 0npm config set unsafe-perm true -
npm run build后，打包生成的dist文件本地測試發現404錯誤。原因：本地測試當前文件默認路徑以‘./’開頭，vue配置文件中默認以‘/’開頭
方案：設置config/index.js中assetsPublicPath屬性值為‘./’
vue項目啟動原理
-
讀取 package.json 文件 scripts 內部節點，例 start / build / dev 節點，根據節點值獲得相應啟動參數
-
Webpack配置項目入口文件，出口文件名。
在
.\build\webpack.base.conf.js文件配置入口文件module.exports.entry值即項目總入口，默認為 ./src/main.js。在config/index.js文件中build對象assetsRoot中配置打包后文件名。
-
./src/main.js。頁面入口js文件，實例化一個Vue，平且引入vue和主入口組件。componens和template屬性缺一不可。
new Vue({
el: '#app',
router,
components: { App }, // 定義組件映射
template: '<App/>' // 定義組件模板
})
- 打包項目提交到Svn或github注意不要提交node_modules文件夾，以免造成資源浪費
附件
-
幫助文檔
vuex狀態管理庫:https://vuex.vuejs.org/zh/guide/
vue中文網：https://cn.vuejs.org/
vue-routerhttps://router.vuejs.org/zh/
webpack中文網https://www.webpackjs.com/
-
安裝 cnpm 淘寶鏡像避免翻牆
npm install -g cnpm --registry=https://registry.npm.taobao.org
完成后安裝相關命令可用 cnpm 代替 npm。淘寶鏡像包與原包存在一定差異，避免莫名其妙問題起見，盡量使用原包命令 npm 安裝，可以使用 hosts 翻牆模式。
-
依賴包出錯刪除重裝
刪除全局包
npm uninstall -g包名刪除本地包
npm uninstall包名不成功可以采用 remove 代替 uninstall
-
引用外部 js
引用外部 js 有全局引用、VUE 外部引用、VUE 內部引用等多種方法
-
內部引用
A. 安裝模塊至項目目錄（jQuery案例）
npm install jquery --saveB. 確認 package.json dependencies 節點已添加依賴
"jquery": "^3.3.1",C. Vue 文件直接引用
import $ from 'jquery' -
全局引用
A. 在package.json中添加依賴文件
dependencies:{"jquery":"^2.2.1"} //可以自己指定版本B. 重新安裝項目依賴
cnpm installc. 在webpack.base.conf.js中module.exports中提供一個全局變量:$
-