使用vue-cli（vue腳手架）快速搭建項目
- 下面整個過程是基于已經安裝node.js和cnpm的基礎上，node.js如何安裝就不在這里詳說了。如何全局化安裝cnpm，這里簡單提一下：
npm install cnpm -g --registry=https://registry.npm.taobao.org
（1）全局安裝 vue-cli ，在命令提示窗口執行：
cnpm install -g vue-cli
出現以上提示表示vue-cli正常安裝成功，可以正式創建vue-cli工程項目了。
（2）接下來，安裝webpack
vue init webpack
確認創建項目后，后續還需輸入一下項目名稱、項目描述、作者、打包方式、是否使用ESLint規范代碼等等，詳見上圖。安裝順利執行后會，生成如下文件目錄：
（3）生成文件目錄后，使用 cnpm 安裝依賴：
cnpm install
（4）最后需要執行命令： npm run dev 來啟動項目，啟動完成后會自動彈出默認網頁
到這一步，就算成功利用vue-cli搭建一個vue項目了，撒花 ~
- 目錄結構及其對應作用
通過vue-cli搭建一個vue項目，會自動生成一系列文件，而這些文件具體是怎樣的結構、文件對應起什么作用，可以看看下面的解釋：
├── build/ # webpack 編譯任務配置文件: 開發環境與生產環境
│ └── ...
├── config/
│ ├── index.js # 項目核心配置
│ └── ...
├ ── node_module/ #項目中安裝的依賴模塊
── src/
│ ├── main.js # 程序入口文件
│ ├── App.vue # 程序入口vue組件
│ ├── components/ # 組件
│ │ └── ...
│ └── assets/ # 資源文件夾，一般放一些靜態資源文件
│ └── ...
├── static/ # 純靜態資源 (直接拷貝到dist/static/里面)
├── test/
│ └── unit/ # 單元測試
│ │ ├── specs/ # 測試規范
│ │ ├── index.js # 測試入口文件
│ │ └── karma.conf.js # 測試運行配置文件
│ └── e2e/ # 端到端測試
│ │ ├── specs/ # 測試規范
│ │ ├── custom-assertions/ # 端到端測試自定義斷言
│ │ ├── runner.js # 運行測試的腳本
│ │ └── nightwatch.conf.js # 運行測試的配置文件
├── .babelrc # babel 配置文件
├── .editorconfig # 編輯配置文件
├── .gitignore # 用來過濾一些版本控制的文件，比如node_modules文件夾
├── index.html # index.html 入口模板文件
└── package.json # 項目文件，記載著一些命令和依賴還有簡要的項目描述信息
└── README.md #介紹自己這個項目的，可參照github上star多的項目。
build/
樣式用sass的話需要安裝如下依賴：
npm install node-sass --save-dev
npm install sass-loader --save-dev
npm install css-loader --save-dev
npm install style-loader --save-dev
webpack.base.config.js在module rules里面加上
{
test: /.scss$/,
loaders: ["style", "css", "sass"]
},
<style lang="scss">
@import "@/css/main.scss";
</style>
