Vue.js+vue-element搭建屬於自己的後台管理模板：什麼是Vue.js?（一）
- 2019 年 10 月 3 日
- 筆記
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
