Vue腳手架（vue-cli）安裝總結
單頁Web應用（single page web application，SPA），就是只有一張Web頁面的應用，是加載單個HTML 頁面並在用戶與應用程序交互時動態更新該頁面的Web應用程序。
提供一個官方命令行工具，可用於快速搭建大型單頁應用（SPA）。該工具為現代化的前端開發工作流提供了開箱即用的構建配置。只需幾分鐘即可創建並啟動一個帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目：
1 # 全局安裝 vue-cli 2 ＄ npm install --global vue-cli 3 # 創建一個基於 webpack 模板的新項目 4 ＄ vue init webpack my-project5 # 安裝依賴，走你 6 ＄ cd my-project 7 ＄ npm install 8 ＄ npm run dev
註意：CLI 工具假定用戶對 Node.js 和相關構建工具有一定程度的了解。如果你是新手，我們強烈建議先在不用構建工具的情況下通讀指南，在熟悉 Vue 本身之後再使用 CLI。
1.1、環境搭建
1.1.1、安裝node.js
從node.js官網下載並安裝node，安裝過程很簡單，一路“下一步”就可以了。安裝完成之後，打開命令行工具(win+r，然後輸入cmd)，輸入 node -v，如下圖，如果出現相應的版本號，則說明安裝成功。
如果安裝不成功，可以直接把安裝包修改成壓縮包，解壓後配置環境變量也可以，就成了綠色版。
這裏需要說明下，因為在官網下載安裝node.js後，就已經自帶npm（包管理工具）了，另需要註意的是npm的版本最好是3.x.x以上，以免對後續產生影響。
註意版本不能太低，如果您已經安裝了低版本的node可以使用npm直接更新。
1.1.2、修改npm為淘寶鏡像
因為npm的倉庫有許多在國外，訪問的速度較慢，建議修改成cnpm，換成taobao的鏡像。
打開命令行工具，復制如下配置：
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝這裏是因為我們用的npm的服務器是外國，有的時候我們安裝“依賴”的時候很很慢很慢超級慢，所以就用這個cnpm來安裝我們說需要的“依賴”。安裝完成之後輸入 cnpm -v，如下圖，如果出現相應的版本號，則說明安裝成功。
版本號：
1.1.3、安裝webpack
安裝webpack，打開命令行工具輸入：
npm install webpack -g
安裝完成之後輸入
webpack -v
如下圖，如果出現相應的版本號，則說明安裝成功。
1.1.4、安裝vue-cli腳手架構建工具
打開命令行工具輸入：
cnpm install vue-cli -g
安裝完成之後輸入 vue -V（註意這裏是大寫的“V”），如下圖，如果出現相應的版本號，則說明安裝成功。
2.2、構建項目
1)、在硬盤上找一個文件夾放工程用的。這裏有兩種方式指定到相關目錄：
①cd 目錄路徑
②如果以安裝git的，在相關目錄右鍵選擇Git Bash Here
2)、安裝vue腳手架輸入：vue init webpack projectName，註意這裏的“projectName” 是項目的名稱可以說是隨便的起名，但是“不能用中文”。
提示選擇項：
$ vue init webpack exprice --------------------- 這個是那個安裝vue腳手架的命令
This will install Vue 2.x version of the template. ---------------------這裏說明將要創建一個vue 2.x版本的項目
For Vue 1.x use: vue init webpack#1.0 exprice
? Project name (exprice) ---------------------項目名稱
? Project name exprice
? Project description (A Vue.js project) ---------------------項目描述
? Project description A Vue.js project
? Author Datura --------------------- 項目創建者
? Author Datura
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安裝Vue路由，也就是以後是spa（但頁面應用需要的模塊）
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否啟用eslint檢測規則，這裏個人建議選no
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "exprice".
To get started: --------------------- 這裏說明如何啟動這個服務
cd exprice
npm install
npm run dev
View Code
3）、cd 命令進入創建的工程目錄，首先cd projectName；
4）、安裝項目依賴：npm install，因為自動構建過程中已存在package.json文件，所以這裏直接安裝依賴就行。不要從國內鏡像cnpm安裝(會導致後面缺了很多依賴庫)，但是但是如果真的安裝“個把”小時也沒成功那就用：cnpm install 吧
5）、安裝 vue 路由模塊 vue-router 和網絡請求模塊 vue-resource，輸入：cnpm install vue-router vue-resource --save。
目錄：
|-- build // 項目構建(webpack)相關代碼
| |-- build.js // 生產環境構建代碼
| |-- check-version.js // 檢查node、npm等版本
| |-- dev-client.js // 熱重載相關
| |-- dev-server.js // 構建本地服務器
| |-- utils.js // 構建工具相關
| |-- webpack.base.conf.js // webpack基礎配置
| |-- 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數據等
| |-- data // 群聊分析得到的數據用於數據可視化
|-- .babelrc // ES6語法編譯配置
|-- .editorconfig // 定義代碼格式
|-- .gitignore // git上傳需要忽略的文件格式
|-- README.md // 項目說明
|-- favicon.ico
|-- index.html // 入口頁面
|-- package.json // 項目基本信息
2.3、運行項目
6）、啟動項目，輸入：npm run dev。服務啟動成功後瀏覽器會默認打開一個“歡迎頁面”，如下圖：
編譯成功後可以直接在瀏覽器中查看項目：
Vue腳手架（vue-cli）安裝總結