vue2.0的完整安裝步驟和項目的建立過程

vue2.0的完整安裝步驟

vue版本：2.2.2

vue有兩種項目建立方式，一種是下載vue.js，經過script標籤引入便可；另外一種經過vue-cli構建基於webpack的項目，這種項目構建發佈須要部署node環境，不能以文件的方式直接打開。

1.全局安裝vue命令行工具
npm install -g vue-cli  （首次須要安裝vue-cli 後面就不須要了）
2.建立一個基於webpack模板的新項目
vue init webpack my-project
注：跟「npm init」相似，輸入一系列項目描述與配置，能夠不用配置ESLint和單元測試框架。
3.項目建立完成後再安裝基礎模塊
cd my-project
npm install
注：第一次安裝了單元測試框架，結果安裝到27%就安裝不下去了，而後顯示失敗。第二次我把單元測試框架也去掉了，很快便安裝完了。
4.安裝完成後運行該項目便可。
npm run dev
項目監聽在8080端口，出現頁面即爲成功。

下圖爲安裝ESLint和單元測試框架後的文件結構
.
|-- build                            // 項目構建相關代碼
|   |-- build.js                     // 生產環境構建代碼
|   |-- check-version.js             // 檢查 node、npm 等版本
|   |-- dev-client.js                // 熱重載相關
|   |-- dev-server.js                // 構建本地服務器
|   |-- utils.js                     // 構建工具相關
|   |-- webpack.base.conf.js         // webpack 基礎配置（出入口和 loader）
|   |-- webpack.dev.conf.js         // webpack 開發環境配置
|   |-- webpack.prod.conf.js         // webpack 生產環境配置
|-- config                           // 項目開發環境配置
|   |-- dev.env.js                   // 開發環境變量
|   |-- index.js                     // 項目一些配置變量（開發環境接口轉發將在此配置）
|   |-- prod.env.js                 // 生產環境變量
|   |-- test.env.js                 // 測試環境變量
|-- src                              // 源碼目錄
|   |-- components                   // vue 公共組件
|   |-- store                        // vuex 的狀態管理
|   |-- App.vue                      // 頁面入口文件
|   |-- main.js                      // 程序入口文件，加載各類公共組件
|-- static                           // 靜態文件，好比一些圖片，json數據等
|-- test                             // 自動化測試相關文件
|-- .babelrc                         // ES6語法編譯配置
|-- .editorconfig                    // 定義代碼格式
|-- .eslintignore                    // ESLint 檢查忽略的文件
|-- .eslistrc.js                     // ESLint 文件，如需更改規則則在此文件添加
|-- .gitignore                       // git 上傳須要忽略的文件
|-- README.md                        // 項目說明
|-- index.html                       // 入口頁面
|-- package.json                     // 項目基本信息
.

當項目須要發佈時，執行 npm run build命令來打包項目，打包後的存放在dist文件夾下。dist下的頁面不能以文件的方式打開，須要經過發佈後才能訪問。

ps:第一次打包後，啓動服務運行結果發現找不到相關的js和css，檢查後發現dist前面多了一條「/」，因此須要在config/index.js裏修改

將assetsPublicPath的值設爲‘’；