1、介紹
vue-cli這個構建工具大大降低了webpack的使用難度，支持熱重載，有webpack-dev-server的支持，相當於啟動了一個請求服務器，給你搭建了一個測試環境，只關注開發就OK。
2、全局安裝vue-cli
npm install vue-cli -g
驗證是否安裝成功
vue -V3
3、初始化項目，生成項目模板
（1）查看幫助
$ vue --help Usage: vue <command> [options] Options: -V, --version output the version number -h, --help output usage information Commands: init generate a new project from a template list list available official templates build prototype a new project create (for v3 warning only) help [cmd] display help for [cmd]
（2）查看官方提供模板
vue-cli提供了幾個模板給開發者用於不同類型的項目
$ vue list Available official templates: ★ browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing. ★ browserify-simple - A simple Browserify + vueify setup for quick prototyping. ★ pwa - PWA template for vue-cli based on the webpack template ★ simple - The simplest possible Vue setup in a single HTML file ★ webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction. ★ webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.
★browserify ★ browserify-simple這兩個模板已過時，
★pwa主要是做移動端
一般我們用★webpack和★webpack-simple的比較多
（3）vue-cil構建項目
vue init webpack your-project
? Project description 輸入項目描述
? Author 作者
? Vue build 打包方式，回車就好了
? Install vue-router? 選擇 Y 使用 vue-router，輸入 N 不使用
? Use ESLint to lint your code? 代碼規范，推薦 N
? Setup unit tests with Karma + Mocha? 單元測試，推薦 N
? Setup e2e tests with Nightwatch? E2E測試，N
（4）框架目錄結構
├── README.md // 項目說明文檔 ├── node_modules // 依賴包目錄 ├── build // webpack相關配置文件（都已配置好，一般無需再配置） │ ├── build.js //生成環境構建 │ ├── check-versions.js //版本檢查（node，npm） │ ├── dev-client.js //開發服務器熱重載 （實現頁面的自動刷新） │ ├── dev-server.js //構建本地服務器（npm run dev） │ ├── utils.js // 構建相關工具 │ ├── vue-loader.conf.js //csss 加載器配置 │ ├── webpack.base.conf.js //webpack基礎配置 │ ├── webpack.dev.conf.js // webpack開發環境配置 │ └── webpack.prod.conf.js //webpack生產環境配置 ├── config // vue基本配置文件（可配置監聽端口，打包輸出等） │ ├── dev.env.js // 項目開發環境配置 │ ├── index.js // 項目主要配置（包括監聽端口、打包路徑等） │ └── prod.env.js // 生產環境配置 ├── index.html // 項目入口文件 ├── package-lock.json // npm5 新增文件，優化性能 ├── package.json // 項目依賴包配置文件
├── src // 項目核心文件（存放我們編寫的源碼文件） │ ├── App.vue // 根組件
│ ├── assets // 靜態資源（樣式類文件、如css，less，和一些外部的js文件） │ │ └── css //樣式
│ │ └── font //字體
│ │ └── images //圖片
│ ├── components // 組件目錄 │ │ └── Hello.vue // 測試組件 │ ├── main.js // 入口js文件 │ └── router // 路由配置文件夾 │ └── index.js // 路由配置文件 └── static // 靜態資源目錄（一般存放圖片類）
assets和static文件夾的區別
assets目錄中的文件會被webpack處理解析為模塊依賴，只支持相對路徑形式。例如，在 <img src="./logo.png">
和 background: url(./logo.png)中，"./logo.png" 是相對的資源路徑，將由Webpack解析為模塊依賴。
static/ 目錄下的文件並不會被Webpack處理：它們會直接被復制到最終的打包目錄（默認是dist/static）下。必須使用絕對路徑引用這些文件，這是通過在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 連接來確定的。
任何放在 static/ 中文件需要以絕對路徑的形式引用：/static/[filename]。
在我們實際的開發中，總的來說：static放不會變動的文件 assets放可能會變動的文件。