Vue.js+vue-element搭建屬於本身的後臺管理模板：什麼是Vue.js?（一）

時間 2019-11-14

標籤 vue.js+vue vue element 搭建屬於本身後臺管理模板什麼 vue.js 欄目 JavaScript 简体版

原文原文鏈接

Vue.js+vue-element搭建屬於本身的後臺管理模板：Vue.js是什麼?（一）

前言

本教程主要講解關於前端Vue.js框架相關技術知識，經過學習一步一步學會搭建屬於本身的後臺管理模板，而且記錄了本人在學習過程當中遇到的難題和技術要點，講解基礎知識同時分享我的所學到心得，供讀者參考與學習，學習本教程要求有必定的JavaScript編程能力，而且掌握HTML和CSS基礎知識，若是有着web開發經驗，會更容易解讀本教程。如有疑問能夠在評論區留言進行討論，本人初學與你們一同進步。（做者寫文章辛苦，不接受任何無關技術點評，不喜勿噴！本人記錄了學習中一點一滴，爲之後項目實戰中做參考資料。）javascript

背景

公司研討決定將老項目進行從新架構，要求先後端分離，後端Spring cloud+.net core微服務架構，前端採用MVVM模式，SAP單頁面富應用。研發部門最終決定前端採用VUE框架，由於它學習成本最低，而且知足當前需求。以前研發團隊大部分人並未接觸過MVVM模式，加上項目龐大業務複雜，難度係數未知，有點趕鴨子上架的意思，不過慶幸的是，我以前有過一段Vue.js學習積累，勉強初級水平，趁着在項目啓動以前，把我以前所學習心得簡單的整理出一個相關技術文檔，也算是本身從新溫習了一遍，初衷是爲那些未接觸過Vue.js的，不瞭解Vue.js框架的，想知道與傳統前端開發方式區別的，用哪些編譯器等疑問的新手經過本教程有個初步的理解，也但願能夠經過短時間自學達到快速入門，着手項目研發當中。經過每一個人的理解也能夠做爲提早考量一個團隊並做出最終抉擇。新手在閱讀該技術文檔同時推薦官方文檔資料做爲最終參考並配合閱讀。初識VUE的我可能對有些知識層面瞭解不深入或誤解，望後來讀者給與指正與評教（抱拳）。html

Vue.js是什麼？

官方文檔中介紹，Vue.js是一套用於構建用戶界面的漸進式框架，易用、靈活、高效，彷佛任何規模的應用都適用。它採用的是MVVM模式，與知名前端框架Angular、Ember等同樣，讓Web開發變得簡單，同時也顛覆了傳統前端開發模式，Vue屬於輕量級，易上手，學習成本更低。前端

MVVM模式

MVVM是Model-View-ViewModel的簡寫，即模型-視圖-視圖模型。當View（視圖層）變化時，會自動更新到ViewModel（視圖模型），反之也同樣，View和ViewModel之間經過雙向綁定。vue

與MVC區別，MVC是單向通訊，VUE就是基於MVVM模式實現的一套框架，在VUE中Model層指的是js中的data數據，View層指的是頁面視圖，ViewModel是指vue實例化對象。java

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操做，更多專一於業務和數據。node

Vue.js的開發模式

Vue.js是一個漸進式框架，根據項目需求選擇不一樣維度來使用它，爲何說VUE是一個漸進式的javascript框架呢？好比你已經有一個現成的服務端應用，你能夠將VUE做爲該應用的一部分嵌入其中，若是你但願把更多的業務邏輯放到前端實現，VUE的強大核心庫能夠知足你各類需求。上面例子中是採用直接引用script方式引入Vue.js框架後，頁面中new Vue()的方式建立一個實例，這是最簡單的開發模式，初學者瞭解VUE語法時能夠經過此方式進行練習。但對於咱們後期研發項目業務邏輯複雜，必須採用Vue單文件的形式，配合webpack使用，組件複用，而且還會用到vuex管理狀態，vue-router管理路由等。react

編譯器與環境配置

編譯器推薦Microsoft VS Code，它是微軟出的輕量級代碼編輯器。webpack

Microsoft VS Code下載安裝：https://code.visualstudio.com/git

關於VSCode中文配置：web

打開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
}