使用Vue-cli搭建專案與目錄詳解
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 name 輸入專案名稱
? 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放可能會變動的檔案。