基於NPM搭建Vue-CLI腳手架並動手構建一個SPA專案
什麼是腳手架？
可以快速生成新專案的目錄模板(Node.js)，將複雜的前端專案分成多個系統化的模組，便於管理和編輯，簡化開發的軟體。
什麼是Vue-CLI？
是一個基於 Vue.js 進行快速開發的完整系統，一種互動式的專案腳手架，用於自動生成vue.js+webpack的專案模板（要使用此腳手架必須先準備vue,vue-cli，webpack，node等一些必要的環境）。
什麼是webpack?
WebPack可以看做是模組打包機：它做的事情是，分析你的專案結構，找到JavaScript模組以及其它的一些瀏覽器不能直接執行的拓展語言（Scss，TypeScript等），並將其打包為合適的格式以供瀏覽器使用。
今的很多網頁其實可以看做是功能豐富的應用，它們擁有著複雜的JavaScript程式碼和一大堆依賴包。為了簡化開發的複雜度，社群湧現出了模組化的處理方案。
對於webpack看來一切都是模組，這就是它不可不說的優點，包括你的JavaScript程式碼，也包括CSS和fonts以及圖片等等等，只有通過合適的loaders，它們都可以被當做模組被處理。
安裝Vue-CLI
npm install -g vue-cli
安裝成功後在全域性配置（global）目錄會出現以下檔案：
- vue
- vue.cmd
- vue-init
- vue-init.cmd
- vue-list
- vue-list.cmd
構建專案
1.開啟cmd視窗，cd到你自定義的專案目錄下，然後執行：
vue init webpack spa1 //此命令用於建立SPA專案，他會在當前頁面生成一個"spa1"的專案目錄.
2.然後進入一問一答模式：
1.Project name：專案名，預設是輸入時的那個名稱spa1，直接回車
2.Project description：專案描述，直接回車
3.Author：作者，隨便填或直接回車
4.Vue build：選擇題，一般選第一個
4.1Runtime + Compiler: recommended for most users//執行加編譯，官方推薦，就選它了
- render functions are required elsewhere//僅執行時，已經有推薦了就選擇第一個了
5.Install vue-router：是否需要vue-router，Y選擇使用，這樣生成好的專案就會有相關的路由配置檔案
6.Use ESLint to lint your code：是否用ESLint來限制你的程式碼錯誤和風格。N 新手就不用了，但實際專案中一般都會使用，這樣多人開發也能達到一致的語法
7.Set up unit tests：是否安裝單元測試 N
8.Setup e2e tests with Nightwatch?：是否安裝e2e測試 N
9.Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM
Yes, use Yarn
No, I will handle that myself //選擇題：選第一項“Yes, use NPM”是否使用npm install安裝依賴
全部選擇好回車就進行了生成專案，出現如下內容表示專案建立完成
# Project initialization finished!
3.啟動專案，可以看到Vue-CLI的歡迎頁
切換到專案所在目錄 ： cd spa1
執行專案 ： npm run dev
注意啟動後的專案預設的除錯地址是8080埠，而這埠很容易發生衝突（比如Tomcat的預設啟動埠），可以通過以下方式更新。
config --> index.js //進入所在專案的此配置檔案 dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {}, host: 'localhost', port: 8083, // 在這裡修改埠號 autoOpenBrowser: false, errorOverlay: true, notifyOnErrors: true, },
4.Vue專案結構說明
- build資料夾：這個資料夾主要是進行webpack（模組打包器，他可以遞迴的打包專案中的所有模組，最終生成幾個打包後的檔案）的一些配置
- webpack.base.conf.js webpack基礎配置,開發環境,生產環境都依賴
- webpack.dev.conf.js webpack開發環境配置
- webpack.prod.conf.js webpack生產環境配置
- build.js 生產環境構建指令碼
- vue-loader.conf.js 此檔案是處理.vue檔案的配置檔案
- config資料夾：
- dev.env.js 配置開發環境
- prod.env.js 配置生產環境
- index.js 這個檔案進行配置代理伺服器，例如：埠號的修改
- node_modules資料夾 存放npm install時根據package.json配置生成的npm安裝包的資料夾
- src資料夾 原始碼目錄(開發中用得最多的資料夾)
- assets 共用的樣式、圖片
- components 業務程式碼存放的地方，裡面分成一個個元件存放，一個頁面是一個元件，一個頁面裡面還會包著很多元件
- router 設定路由
- App.vue vue檔案入口介面
- main.js 對應App.vue建立vue例項，也是入口檔案，對應webpack.base.config.js裡的入口配置
- static資料夾 存放的檔案不會經過webpack處理，可以直接引用，例如swf檔案如果要引用可以在webpack配置，對swf字尾名的檔案處理的loader，也可以直接將swf檔案放在這個資料夾引用
- package.json 這個檔案有兩部分是有用的：scripts 裡面設定命令以及在dependencies和devDependencies中，分別對應全域性下載和區域性下載的依賴包
package.json詳解
每個專案的根目錄下面，一般都有一個package.json檔案，定義了這個專案所需要的各種模組，以及專案的配置資訊（比如名稱、版本、許可證等元資料）。npm install命令根據這個配置檔案，
自動下載所需的模組，也就是配置專案所需的執行和開發環境，下面是摘自package.json中的基本欄位。
"name": "spa_01",//專案名稱 "version": "1.0.0",//版本號 "description": "A Vue.js project",//專案描述 "author": "star",//作者 "private": true,//是否私有，false將作為公共專案儲存到npm上。 "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",//webpack的啟動指令，包含了專案的啟動配置 "start": "npm run dev",//啟動命令 "build": "node build/build.js"//執行時啟動編譯，（熱載入） "dependencies": {//生產和開發過程中都需要的包 "element-ui": "^2.13.2",//餓了嗎推出的基於Vue.js的樣式框架 "vue": "^2.5.2",//Vue核心js檔案 "vue-router": "^3.0.1"//Vue的路由器檔案 "devDependencies": //只在開發過程中所依賴的包，生產環境下不會打包這裡的內容 //version，必須匹配某個版本，如：1.1.2，表示必須依賴1.1.2版 //>version，必須大於某個版本，如：>1.1.2，表示必須大於1.1.2版 //~version，大概匹配某個版本，~1.1.2，表示>=1.1.2 <1.2.0 //^version，相容某個版本，如：^1.1.2 ，表示>=1.1.2 <2.0.0 "engines": {//指定包的執行環境NodeJS "node": ">= 6.0.0",//至少6版本以上 "npm": ">= 3.0.0" } "browserslist": [//根據提供的目標瀏覽器的環境來，智慧新增css字首，js的polyfill墊片,來相容舊版本瀏覽器 //last 2 versions：CanIUse.com追蹤的IE最新版本為11,向後相容兩個版本即為10、11 "> 1%", "last 2 versions", "not ie <= 8" ]
什麼是*.vue檔案？
*.vue 檔案，是一個自定義的檔案型別，用類似HTML的語法描述一個Vue元件。
每個.vue檔案包含三種類型的頂級語言塊 <template>, <script> 和 <style>。
這三個部分分別代表了 html,js,css。