前言
從這篇文章開始，就進入真正的實踐了。
在前端項目開發中，我們可以根據實際情況不同程度地使用 Vue。利用 Vue CLI（或寫成 vue-cli，即 Vue 腳手架）搭建出來的項目，是最能體現 Vue 的特性的。這點在接下來的內容中我們可以慢慢感受。
關於項目的構建其實類似的文章網上有很多，但我還是重新寫了一下，一是為了確保項目能夠運行成功，二是對幾個細節作了解釋，三是加入了使用 IDE 的構建方法。
在動手操作之前，我希望大家已經清楚什么是 “前后端分離” ，什么是 “單頁面應用” 。
簡單地說，前后端分離 的核心思想是前端頁面通過 ajax 調用后端的 restuful api 進行數據交互，而 單頁面應用（single page web application，SPA），就是只有一張頁面，並在用戶與應用程序交互時動態更新該頁面的 Web 應用程序。
附上 Vue 的官方教程：
https://cn.vuejs.org/v2/guide/
這是第一手的學習資料，本篇的實踐內容雖然用不上，但是日后要經常查閱。
一、安裝 Vue CLI
因為需要使用 npm 安裝 Vue CLI，而 npm 是集成在 Node.js 中的，所以第一步我們需要安裝 Node.js，訪問官網 https://nodejs.org/en/，首頁即可下載。
圖中左邊是長期支持版本，右邊是當前版本，下載哪個都行，我一般選擇長期支持版本。
下載完成后運行安裝包，一路下一步就行。然后在 cmd 中輸入 node -v，檢查是否安裝成功。
如圖，出現了版本號（根據下載時候的版本確定），說明已經安裝成功了。同時，npm 包也已經安裝成功，可以輸入 npm -v 查看版本號
輸入 npm -g install npm ，將 npm 更新至最新版本。
之后可以選擇安裝 cnpm，即 npm 的國內鏡像。使用 cnmp 的好處是在日后下載內容時會比較快，但是下載的包可能不是最新的。
安裝 cnpm 的命令為 ：
npm install -g cnpm --registry=https://registry.npm.taobao.org
完成后就可以使用 cnpm 替代 npm 了，我不太喜歡用 cnpm，喜歡用的小伙伴注意一點，cnpm 不要與 npm 混合使用，一個項目用 cnpm 就從頭用到底，不要中途敲錯命令，否則就會出現混亂。不過萬一遇到這種情況也不用慌，把項目的 node_modules 文件夾刪了重新執行 npm/cnpm install 就行了，只是比較浪費時間。
之后，使用 npm install -g vue-cli 安裝腳手架。
注意此種方式安裝的是 2.x 版本的 Vue CLI，最新版本需要通過 npm install -g @vue/cli 安裝。新版本可以使用圖形化界面初始化項目，並加入了項目健康監控的內容，推薦大家使用。不過新版本創建出項目的結構跟舊版本略有不同，閱讀這個教程時可能會有一些困惑的地方。
雖然我也想專門針對新的 CLI 和 Vue 3.0 重構一下教程，但想了想這是個無休止的工作，這個教程也不是為了講前端框架的新特性，所以就不折騰了。
如果你有一些開發的經驗，那么切換成新版本不會有什么問題。如果剛剛入門，害怕因為卡在某一步失去信心，就先用 2.x 吧，不用着急，相信你學完這個教程，一定也能隨意切換過去了。
二、構建前端項目
1.通用方法
直接使用命令行構建項目。首先，進入到我們的工作文件夾中，我在 D 盤新建了一個叫 workspace 的文件夾，大家可以自行選擇位置。
然后執行命令 vue init webpack wj-vue，這里 webpack 是以 webpack 為模板指生成項目，還可以替換為 pwa、simple 等參數，這里不再贅述。 wj-vue 是我們的項目名稱（White Jotter），大家也可以起別的名字。
在程序執行的過程中會有一些提示，可以按照默認的設定一路回車下去，也可以按需修改，比如下圖問我項目名稱是不是 wj-vue，直接回車確認就行。
這里還會問是否安裝 vue-router，一定要選是，也就是回車或按 Y，vue-router 是我們構建單頁面應用的關鍵。
還有是否使用 es-lint，這玩意兒挺煩的，但為了代碼質量先將就一下吧。
接下來等待項目構建完成就 OK 了。
可以看到 workspace 目錄下生成了項目文件夾 wj-vue，里面的結構如圖
接下來，進入到我們的項目文件夾里(cd D:\workspace\wj-vue)，執行npm run dev
項目構建成功，這一步如果報錯，可能是未能加載項目所需的依賴包，即 node_modules 里的內容，需要在該文件夾執行 npm install ，再執行 npm run dev
訪問 http://localhost:8080，查看網頁 demo，大工告成！
2.使用 IDE (IntelliJ IDEA)
對於習慣使用 IDE 的同學，可以使用更直觀的方式構建項目。以 IntelliJ IDEA 為例，點擊 Create New Project
然后選擇 Static Web -> Vue.js，點擊 next，輸入相關參數
此處可以選擇 CLI 的版本
這里注意 Project location 需要輸入到項目文件夾一級而不是 workspace。輸入完成后點擊 Next，等待 Vue CLI 初始化，然后在可視化界面上確認項目信息，修改或 Next 即可。IDEA 構建出的 Vue 項目是不含 node_modules 的，所以要先調出終端，執行 npm install
運行完成后，輸入 npm run dev 即可。
另外 IDE 嘛，總是在 UI 上下了很多功夫，我們還可以在 package.json 文件上點擊右鍵，選擇 show npm scripts
然后就會出來 npm 命令窗口，想要執行哪個命令直接雙擊運行就可以了。
這些命令都是在 package.json 文件里預定義的。dev 和 start 是一樣的，start 即是執行 npm run dev 命令
另外使用這種方法，可以激活 IDE 右上角的按鈕，不過這些都不重要了。
上面的內容應該足夠詳細了，如果大家還是遇到了問題，可以在評論區反饋一下，我會第一時間解答。
三、Vue 項目結構分析
1.概覽
使用 CLI 構建出來的 Vue 項目結構是這個樣子的
里面我們需要關注的內容如下圖，重點需要關注的我用小紅旗標了出來
其中我們最常修改的部分就是 components 文件夾了，幾乎所有需要手動編寫的代碼都在其中。
2.x 時代沒有創建 view 這個目錄，其實加上更加合理，現在我們姑且認為 Vue 把視圖也當做“組件”的一部分，有助於初期的理解。
接下來我們分析幾個文件，目的是看看各個部分是怎么聯系到一起的。
2.index.html
首頁文件的初始代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>wj-vue</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html> - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
就是一個普普通通的 html 文件，讓它不平凡的是 <div id="app"></div> ，下面有一行注釋，構建的文件將會被自動注入，也就是說我們編寫的其它的內容都將在這個 div 中展示。
還有不普通的一點是，整個項目只有這一個 html 文件，所以這是一個 單頁面應用，當我們打開這個應用，表面上可以有很多頁面，實際上它們都只不過在一個 div 中。
3.App.vue
上面圖上我把這個文件稱為“根組件”，因為其它的組件又都包含在這個組件中。
.vue 文件是一種自定義文件類型，在結構上類似 html，一個 .vue 文件即是一個 vue 組件。先看它的初始代碼
<template> <div id="app"> <img src="./assets/logo.png"> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
大家可能注意到了，這里也有一句 <div id="app">，但跟 index.html 里的那個是沒有關系的。這個 id=app 只是跟下面的 css 對應。
<script>標簽里的內容即該組件的腳本，也就是 js 代碼，export default 是 ES6 的語法，意思是將這個組件整體導出，之后就可以使用 import 導入組件了。大括號里的內容是這個組件的相關屬性。
這個文件最關鍵的一點其實是第四行， <router-view/>，是一個容器，名字叫“路由視圖”，意思是當前路由（ URL）指向的內容將顯示在這個容器中。也就是說，其它的組件即使擁有自己的路由（URL，需要在 router 文件夾的 index.js 文件里定義），也只不過表面上是一個單獨的頁面，實際上只是在根組件 App.vue 中。
4.main.js
前面我們說 App.vue 里的 <div id="app"> 和 index.html 里的 <div id="app"> 沒有關系，那么這兩個文件是怎么建立聯系的呢？讓我們來看入口文件 main.js 的代碼
import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
這里插一嘴，這個 js 文件有的同學可能看着不順眼，比如沒有分號（;），因為是 ES6 的語法，不這么寫反而會提示錯誤，雖說可以把 es-lint 改了或者關了，但我想熟悉一下新的規則也挺好。
最上面 import 了幾個模塊，其中 vue 模塊在 node_modules 中，App 即 App.vue 里定義的組件，router 即 router 文件夾里定義的路由。
Vue.config.productionTip = false ,作用是阻止vue 在啟動時生成生產提示。
在這個 js 文件中，我們創建了一個 Vue 對象（實例），el 屬性提供一個在頁面上已存在的 DOM 元素作為 Vue 對象的掛載目標，router 代表該對象包含 Vue Router，並使用項目中定義的路由。components 表示該對象包含的 Vue 組件，template 是用一個字符串模板作為 Vue 實例的標識使用，類似於定義一個 html 標簽。
看完了以上三個文件，我想基本上就對前端項目的結構有所了解了。下一篇中我將用一個例子解釋前后端分離的項目是如何聯系起來的。