Vue.js+vue-element搭建屬於自己的後臺管理模板：什麼是Vue.js?（一）
Vue.js+vue-element搭建屬於自己的後臺管理模板：Vue.js是什麼?（一）
前言
本教程主要講解關於前端Vue.js框架相關技術知識，通過學習一步一步學會搭建屬於自己的後臺管理模板，並且記錄了本人在學習過程中遇到的難題和技術要點，講解基礎知識同時分享個人所學到心得，供讀者參考與學習，學習本教程要求有一定的JavaScript程式設計能力，並且掌握HTML和CSS基礎知識，如果有著web開發經驗，會更容易解讀本教程。若有疑問可以在評論區留言進行討論，本人初學與大家一同進步。（作者寫文章辛苦，不接受任何無關技術點評，不喜勿噴！本人記錄了學習中一點一滴，為以後專案實戰中作參考資料。）
背景
公司研討決定將老專案進行重新架構，要求前後端分離，後端Spring cloud+.net core微服務架構，前端採用MVVM模式，SAP單頁面富應用。研發部門最終決定前端採用VUE框架，因為它學習成本最低，並且滿足當前需求。之前研發團隊大部分人並未接觸過MVVM模式，加上專案龐大業務複雜，難度係數未知，有點趕鴨子上架的意思，不過慶幸的是，我之前有過一段Vue.js學習積累，勉強初級水平，趁著在專案啟動之前，把我之前所學習心得簡單的整理出一個相關技術文件，也算是自己重新溫習了一遍，初衷是為那些未接觸過Vue.js的，不瞭解Vue.js框架的，想知道與傳統前端開發方式區別的，用哪些編譯器等疑問的新手通過本教程有個初步的理解，也希望可以通過短期自學達到快速入門，著手專案研發當中。通過每個人的理解也可以作為提前考量一個團隊並作出最終抉擇。新手在閱讀該技術文件同時推薦官方文件資料作為最終參考並配合閱讀。初識VUE的我可能對有些知識層面瞭解不深刻或誤解，望後來讀者給與指正與評教（抱拳）。
Vue.js是什麼？
官方文件中介紹，Vue.js是一套用於構建使用者介面的漸進式框架，易用、靈活、高效，似乎任何規模的應用都適用。它採用的是MVVM模式，與知名前端框架Angular、Ember等一樣，讓Web開發變得簡單，同時也顛覆了傳統前端開發模式，Vue屬於輕量級，易上手，學習成本更低。
MVVM模式
MVVM是Model-View-ViewModel的簡寫，即模型-檢視-檢視模型。當View（檢視層）變化時，會自動更新到ViewModel（檢視模型），反之也一樣，View和ViewModel之間通過雙向繫結。
與MVC區別，MVC是單向通訊，VUE就是基於MVVM模式實現的一套框架，在VUE中Model層指的是js中的data資料，View層指的是頁面檢視，ViewModel是指vue例項化物件。
Vue.js第一個例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="name" placeholder="你的名字">
<h1>你好，{{ name }}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
name: ''
}
})
</script>
</body>
</html>
從上面例子中可以看出，我們並沒有通過DOM操作去改變它的值，之前我們經常用Jquery操作DOM元素改變狀態和值，這裡完全體現了MVVM模式雙向資料繫結。這裡要說明一下，使用Vue.js並不是它不操作DOM了，只不過是VUE內部幫你做了。與傳統前端開發區別就是，經歷過Web開發者都知道，前端研發大部分工作量都在於通過JS操作DOM，這個改變使研發者不再投入大量精力去維護DOM操作，更多專注於業務和資料。
Vue.js的開發模式
Vue.js是一個漸進式框架，根據專案需求選擇不同維度來使用它，為什麼說VUE是一個漸進式的javascript框架呢？比如你已經有一個現成的服務端應用，你可以將VUE作為該應用的一部分嵌入其中，如果你希望把更多的業務邏輯放到前端實現，VUE的強大核心庫可以滿足你各種需求。上面例子中是採用直接引用script方式引入Vue.js框架後，頁面中new Vue()的方式建立一個例項，這是最簡單的開發模式，初學者瞭解VUE語法時可以通過此方式進行練習。但對於我們後期研發專案業務邏輯複雜，必須採用Vue單檔案的形式，配合webpack使用，元件複用，並且還會用到vuex管理狀態，vue-router管理路由等。
編譯器與環境配置
編譯器推薦Microsoft VS Code，它是微軟出的輕量級程式碼編輯器。
Microsoft VS Code下載安裝：https://code.visualstudio.com/
關於VSCode中文配置：
開啟vscode在擴充套件（Ctrl+Shift+X）中搜索“Chinese”，找到Chinese (Simplified) Language Pack for Visual Studio Code安裝。
Ctrl+Shift+P, 輸入>Configure Display Language，選擇"zh-CN"切換顯示語言為中文。
安裝外掛：
- JavaScript (ES6) code snippets ES6語法提示
- ESLint 程式碼檢測工具
- Vetur支援vue檔案的程式碼高亮（Vue.js必備）
- Vue 2 Snippets程式碼提示片段補全工具
- VueHelper支援vue及相關技術棧語法提示
- Beautify程式碼格式化
- Auto Close Tag自動閉合標籤
- Auto Rename Tag自動更改對應標籤名
- Path Autocomplete自動補全路徑
- Debugger for Chrome除錯谷歌瀏覽器
- Live Server 本地測試web伺服器
配置vscode settings.json：
Ctrl+Shift+P 輸入Open User Settings 開啟使用者設定，右上角{} json設定，貼上以下配置。
{
// 基礎設定
"editor.tabSize": 2,
"workbench.startupEditor": "welcomePage",
"editor.quickSuggestions": {
"strings": true
},
// vue設定
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
"files.associations": {
"*.vue": "vue"
},
// vetur設定
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "vscode-typescript",
// eslint設定
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
// format設定
"javascript.format.insertSpaceBeforeFunctionParenthesis": false,
//"prettier.singleQuote": true,
//"prettier.semi": false,
//"prettier.useTabs": true,
// git設定
//"gitlens.advanced.messages": {
// "suppressCommitHasNoPreviousCommitWarning": false,
// "suppressCommitNotFoundWarning": false,
// "suppressFileNotUnderSourceControlWarning": false,
// "suppressGitVersionWarning": false,
// "suppressLineUncommittedWarning": false,
// "suppressNoRepositoryWarning": false,
// "suppressUpdateNotice": false,
// "suppressWelcomeNotice": true
//},
"liveServer.settings.donotShowInfoMsg": true
}
Node.js安裝：
官方下載地址：http://nodejs.cn/download/ 下載長期支援版本，預設安裝。
檢查版本：開啟開始選單，Node.js - Node.js command prompt 輸入node -v
如果你獲得以上輸出結果，說明你已經成功安裝了Node.js。
npm包管理器：
npm包管理器，是整合在node中的，所以，直接輸入 npm -v就會如下圖所示，顯示出npm的版本資訊
安裝cnpm：
由於有些npm有些資源被遮蔽或者是國外資源的原因，經常會導致用npm安裝依賴包的時候失敗，所有我還需要npm的國內映象—cnpm。
在命令列中輸入npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝完成後cnpm代替npm命令。
安裝vue-cli腳手架構建工具（用於幫助搭建所需的模板框架）
在命令列輸入：cnpm install --global vue-cli
備註：安裝後，檢查是否安裝成功 。vue -V (在此注意V為大寫)
目錄導航
- Vue.js+vue-element搭建屬於自己的後臺管理模板：什麼是Vue.js?（一）
- Vue.js+vue-element搭建屬於自己的後臺管理模板：Vue.js快速入門（二）
- Vue.js+vue-element搭建屬於自己的後臺管理模板：關於元件使用（三）（待更新...）
參考資料
Vue.js
- vuejs官方文件
- vue.js實戰尤雨溪作推薦序 PDF掃描版