目錄

1. 前言

vue-cli 一個簡單的構建Vue.js專案的命令列介面

整體過程：

$ npm install -g vue-cli 
$ vue init webpack vue-element-admin 
$ cd vue-element-admin 
$ npm install 
$ npm run dev 

後面分步說明。

2. 安裝

前提條件，Node.js >=4.x版本，建議使用6.x版本。npm版本 > 3.x
全域性安裝vue-cli

$ npm install -g vue-cli 

...

3. 使用

 $ vue init <template-name> <project-name> 
 

vue官方提供了多個打包工具版本的模版。我們可以使用vue list命令檢視，當前可以使用的模版。

$ vue list 

我們在這裡，使用webpack模版。 功能齊全的webpack& vue-loader 提供熱載入、程式碼檢查、單元測試和css分離

$ vue init webpack vue-element-admin

之後，在E：\project資料夾下面，會有剛初始化的構建的專案vue-element-admin

4. 執行結果

專案基礎結構已經搭建好了，現在來啟動它。
進入專案檔案:

$ cd vue-element-admin 

安裝依賴：

中國行情原因，直接安裝，有時候會失敗。我們一般使用npm的淘寶映象cnpm。
先安裝cnpm：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

之後，使用:

$ cnpm install 

你直接安裝也可以的：

$ npm install 

執行：

$ npm run dev

啟動之後，自動開啟預設瀏覽器

之後，就可以進行本地開發，實時預覽開發效果。

5. 打包部署

專案開發完成之後，可以使用npm run build進行打包工作

$ npm run build

打包完成之後，會生成dist資料夾，專案上線時候，只需要將dist資料夾放到伺服器就行了。

6. 專案結構

vue-element-admin:             專案名稱 
|   .babelrc                   babel的配置檔案 
|   .editorconfig              編輯器的配置檔案 
|   .gitignore                 git的忽略檔案 
|   .postcssrc.js              編譯css的工具 
|   index.html                 網站主頁 
|   package.json               專案依賴哪些包的檔案 
|   README.md                  說明文件 
|  
+---build                      構建的配置資料夾 
|       build.js               專案構建配置入口
|       check-versions.js
|       dev-client.js
|       dev-server.js
|       utils.js
|       vue-loader.conf.js
|       webpack.base.conf.js
|       webpack.dev.conf.js
|       webpack.prod.conf.js
|       webpack.test.conf.js
|      
+---config                      整體的配置資料夾
|       dev.env.js
|       index.js                配置檔案入口
|       prod.env.js
|       test.env.js
|      
+---src                         原始檔夾
|   |   App.vue                 佈局元件
|   |   main.js                 入口檔案
|   |  
|   +---assets                  靜態資料夾
|   |       logo.png
|   |      
|   +---components              元件資料夾
|   |       Hello.vue           單個元件
|   |      
|   \---router                  路由資料夾
|           index.js            路由主頁
|          
+---static                      靜態資料夾
|       .gitkeep                空檔案（Git本身不允許全空目錄提交至版本庫，一個辦法是在目錄下建立一個檔案，取名為.gitkeep是習慣用法）
|      
\---test                        測試資料夾
 

7 總結

萬事開頭難，前期專案搭建可能會遇到一些問題，冷靜分析慢慢都能解決的。

8 專案原始碼