前言
springboot和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 安裝腳手架。（本文寫作的時候 cli 仍在 2.x 時代，3.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，輸入相關參數
這里注意 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.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 標簽。
看完了以上三個文件，我想基本上就對前端項目的結構有所了解了。下一篇中我將用一個例子解釋前后端分離的項目是如何聯系起來的。
————————————————
版權聲明：本文為CSDN博主「Evan-Nightly」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://learner.blog.csdn.net/article/details/88926242