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 總結
萬事開頭難，前期項目搭建可能會遇到一些問題，冷靜分析慢慢都能解決的。