本篇目錄

前言
一、安裝 Vue CLI
二、構建前端專案
- 1.通用方法
- 2.使用 IDE (IntelliJ IDEA)
三、Vue 專案結構分析

前言

從這篇文章開始，就進入真正的實踐了。

在前端專案開發中，我們可以根據實際情況不同程度地使用 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 重構一下教學，但想了想這是個無休止的工作，這個教學也不是為了講前端框架的新特性，而且直到現在 Vue 3.0 也只是釋出了初期試驗版本，想必又是一堆依賴問題，所以就不折騰了。

二、構建前端專案

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>

就是一個普普通通的 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>

大家可能注意到了，這裡也有一句 <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/>'
})

這裡插一嘴，這個 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 標籤。

看完了以上三個檔案，我想基本上就對前端專案的結構有所瞭解了。下一篇中我將用一個例子解釋前後端分離的專案是如何聯絡起來的。

檢視系列文章目錄：
https://learner.blog.csdn.net/article/details/88925013

上一篇：Vue + Spring Boot 專案實戰（一）：專案簡介

下一篇：Vue + Spring Boot 專案實戰（三）：前後端結合測試（登入頁面開發）

Vue + Spring Boot 專案實戰（二）：使用 CLI 搭建 Vue.js 專案