ECMAScript介紹

什么是ECMAScript

ECMAScript是一種由Ecma國際（前身為歐洲計算機制造商協會，European Computer Manufacturers Association）通過ECMA-262標準化的腳本程序設計語言。這種語言在萬維網上應用廣泛，它往往被稱為JavaScript或JScript，所以它可以理解為是JavaScript的一個標準,但實際上后兩者是ECMA-262標準的實現和擴展。

ECMAScript 和 JavaScript 的關系

要講清楚這個問題，需要回顧歷史。1996 年 11 月，JavaScript 的創造者 Netscape 公司，決定將 JavaScript 提交給標準化組織 ECMA，希望這種語言能夠成為國際標準。次年，ECMA 發布 262 號標準文件（ECMA-262）的第一版，規定了瀏覽器腳本語言的標準，并將這種語言稱為 ECMAScript，這個版本就是 1.0 版。

該標準從一開始就是針對 JavaScript 語言制定的，但是之所以不叫 JavaScript，有兩個原因。一是商標，Java 是 Sun 公司的商標，根據授權協議，只有 Netscape 公司可以合法地使用 JavaScript 這個名字，且 JavaScript 本身也已經被 Netscape 公司注冊為商標。二是想體現這門語言的制定者是 ECMA，不是 Netscape，這樣有利于保證這門語言的開放性和中立性。

因此，ECMAScript 是瀏覽器的規范(標準), JavaScript是一種實現。

ECMAScript 6 簡介

ECMAScript 6.0（以下簡稱 ES6）是 JavaScript 語言的下一代標準，已經在 2015 年 6 月正式發布了。它的目標，是使得 JavaScript 語言可以用來編寫復雜的大型應用程序，成為企業級開發語言。

每一次版本的發布都有新的語法特性

ES6新特性

let基本使用

   		// 定義變量let a = 1;let b = 2;let c = 3;console.log(a,b,c);// es6中中也可以這樣定義let [d, e, f] = [11, 12, 13];console.log(d,e,f);// 重復定義變量var a = 1;var a = 2;let b = 11;let b = 12; // let 定義的變量不能重復定義console.info(a);console.info(b); // 報錯，Identifier 'b' has already been declared// 使用未定義的變量console.info(a);  // undefinedconsole.info(b); // Cannot access 'b' before initializationvar a = 1;let b = 2;// 塊級作用域{var a = 1;let a1 = 11;console.log(a); // 1console.log(a1); // 11}console.log(a); // 1 // console.log(a1); // let定義的變量，只能在塊作用域里訪問，不能跨塊訪問// 通過var定義的變量可以跨塊作用域訪問到。

var和let區別

1. var定義的變量，沒有塊的概念，可以跨塊訪問, 不能跨函數訪問。
2. let定義的變量，只能在塊作用域里訪問，不能跨塊訪問，也不能跨函數訪問，定義的變量更加的嚴謹。

const

const用來定義常量，使用時必須初始化(即必須賦值)，只能在塊作用域里訪問，而且不能修改。

   		const a = 10;// a = 100; const 定義的變量不能被修改console.info(a);

 		const param = new Object();param.name = "admin";param.age = 22;console.info(param);// 修改對象屬性param.name = "zs"; // 可以修改console.info(param);param = new Object(); // 不能修改console.info(param);

因為對象是引用類型的，param中保存的僅是對象的指針，這就意味著，const僅保證指針不發生改變，修改對象的屬性不會改變對象的指針，所以是被允許的。也就是說const定義的引用類型只要指針不發生改變，其他的不論如何改變都是允許的，除非改變param的指針。

不定參數

不定參數是在函數中使用命名參數同時接收不定數量的未命名參數

        function sum(...args){let sum = 0;for(var i =0;i<args.length;i++){sum +=args[i];}return sum;}console.info(sum(1));console.info(sum(1,2,3));console.info(sum(12,3,4,5));

箭頭函數

如果你會C#或者Java，你肯定知道lambda表達式，ES6中新增的箭頭操作符=>便有異曲同工之妙。它簡化了函數的書寫。操作符左邊為輸入的參數，而右邊則是進行的操作以及返回的值Inputs=>outputs。

        // 傳遞多個參數var sum = (x, b) => x + b;console.info(sum(10, 20));// 方法體中存在多行代碼var sum2 = (a, b) => {console.info(a)console.info(b)return a + b;}console.info(sum2(4, 5));// 箭頭函數+結構表達式，調用函數傳遞param對象，通過{name}結構出對象的name屬性傳遞到方法里面var param = {name:"admin",age:22}var nameFun = ({name}) => console.info(name)console.info(nameFun(param))// 對象中函數簡寫let user3 = {name: "admin",age: 20,go: function (param) { // 之前是這樣寫console.info(param)},// 不能使用thisgo1: param => console.info(param+", age:"+user3.age), // 使用箭頭函數go2 (param) { // 使用箭頭函數// 可以使用thisconsole.info(param+",age:"+this.age);}}user3.go("1")user3.go1("2")user3.go2("3")

對象簡寫

        let age = 23let name = "達哥"// 之前是這樣寫let user1 = { age: age, name: name }// es6之后可以這樣寫，屬性名稱和變量一直let user2 = { age, name }console.info(user1)console.info(user2)

模塊化

以往我們是直接引入一些外部的js文件，有多少引多少，這樣會造成一個js文件夾很多js文件，而且要一個一個的引入，影響瀏覽速度。在es6中支持了模塊化開發，即你只需要引入一個入口的js文件，并不需要輸入script標簽引入。

但是現在的瀏覽器是不支持es6的模塊化的，我們需要通過webpack這個工具進行打包 降級 才能正常訪問。

export：用于導出模塊，可以導出各種類型的變量。比如：字符串、數值、函數、對象 等等
import：用于導入模塊，模塊中的變量經過導入之后就可以在js文件中使用。

導出

export name 導出name;name可以是函數，類，變量，數字，對象…
export default name默認導出
export * from '...js'引入另一個js并將其導出
export {a,v,c,d} from '...js'只引入部分內容并導出
export {default} from '...js'引入另一個文件的default并導出

導入

import * as test from '....js' 引入全部內容
import {a,b,c} from '....js' 引入指定內容
import main from '....js'引入export default
let promise=import ('/path')異步引入，返回promise對象

a.js

let a = 10;
let user = {name :"程序員",age:20
}
// 定義導出內容
export {a,user} // 導出一個變量和一個對象

b.js

function go (param){console.info(param);
}function multi(x,y){return x * y;
}
export {go,multi} // 導出一個函數

main.js

// 導入外部的js
import {a,user} from '../modules/a.js'
import {go} from '../modules/b.js'console.info(a,user)
go(a)

Vue簡介

Vue是一套用于構建用戶界面的漸進式的js框架，發布于 2014 年 2 月。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫（如：vue-router，vue-resource，vuex）或既有項目整合。

MVVM 模式的實現者——雙向數據綁定模式

• Model：模型層，在這里表示 JavaScript 對象
• View：視圖層，在這里表示 DOM（HTML 操作的元素）
• ViewModel：連接視圖和數據的中間件，Vue.js 就是 MVVM 中的 ViewModel 層的實現者

在 MVVM 架構中，是不允許 數據 和 視圖 直接通信的，只能通過 ViewModel 來通信，而 ViewModel 就是定義了一個Observer` 觀察者。

• ViewModel 能夠觀察到數據的變化，并對視圖下對應的內容進行更新；
• ViewModel 能夠監聽到視圖的變化，并能夠通知數據發生改變；

至此，我們就明白了，Vue.js 就是一個 MVVM 的實現者，他的核心就是實現了 DOM 監聽 與 數據綁定。

Vue環境搭建

在頁面引入vue的js文件即可。

<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>

創建div元素用來展示

<div id="app">
</div>

創建vue對象，設計對象的內容

	<script>new Vue({el:"#app",data:{message: 'Hello Vue!'}});</script>

el: element的簡稱，也就是Vue實例掛載的元素節點，值可以是 CSS 選擇符，或實際 HTML 元素，或返回 HTML 元素的函數。
data: 用于提供數據的對象，里面存放鍵值對數據。

在頁面的元素中使用插值表達式來使用vue對象中的內容

<div id="app">{{ message }}
</div>

Vue插值表達式

插值表達式的作用是在View中獲得Model中的內容

Model中的內容如下

	var app = new Vue({el: '#app',data: {message: 'Hello Vue!',title:"hello vue!",age:18,sex:'男',flag:true,array:[1,2,3,4,5],obj:{email:'da@qq.com'}},methods:{add:function(){return "add";}}})

簡單使用插值表達式獲取數據

<div id="app">message:{{ message }}<br>name:{{title}},<br>array:{{array}},<br>array:{{array[0]}},<br>obj:{{obj.email}},<br>add:{{add()}},<br><!-- 插值表達式做計算 -->{{10+10}}<br>{{10*10}}<br>{{[1,2,3,4,5][3]}}<br>{{flag?'男':'女'}}<br>
</div>

Vue判斷

Vue中的分支語句v-if非常好理解，邏輯跟Java中的if-else相同。v-if語句塊包含以下內容：

• v-if
• v-else
• v-else-if

接下來以一個簡單例子即可理解：

	<div id="app"><p v-if="flag">今天天氣很舒服！</p><p v-else-if="rich">今天天氣很燥熱！晚上要去放松一下！</p><p v-else="rich">晚上只能自嗨！</p></div><script>new Vue({el:'#app',data:{flag:false,rich:false}});</script>

vue顯示隱藏

    <p v-show="rich">有錢！</p><p v-if="rich">有錢！</p></div>
<script>new Vue({el:'#app',data:{flag:false,rich:false}});
</script>

Vue循環

Vue中的循環關鍵字并沒有Java的那么多，只有v-for，但用法上有多種。接下來我們來逐一介紹。

<div id="app"><ul><li v-for="a in args">{{a}}</li></ul>
</div>
<script>new Vue({el:'#app',data:{args:[1,2,3,4,5,6]}});
</script>

<div v-for="(item, index) in items"></div> <!-- 遍歷數組,帶索引-->
<div v-for="(val, key) in object"></div> <!-- 遍歷對象-->
<div v-for="(val, name, index) in object"></div> <!--遍歷對象帶索引-->

vue屬性綁定

通過v-model將標簽的value值與vue對象中的data屬性值進行綁定。

<body><div id="app"><input type="text" v-model="title">{{title}}<a v-bind:href="link"></a></div>
</body>
<script type="text/javascript">new Vue({el:'#app',data:{title:"hello vue",link:'http://www.baidu.com'}})
</script>

Vue事件綁定

關于事件，要把握好三個步驟：設參、傳參和接參。

<div id="app">sum={{sum}}<br/>{{sum>10?'總數大于10':'總數小于10'}}<br/><button type="button" @click="add(2)">增加</button>
</div>
<script type="text/javascript">new Vue({el:'#app',data:{sum:0},methods:{add:function(s){this.sum+=s}}})
</script>

Vue組件化

Vue的組件化設計思想借鑒了Java的面向對象思想。Java認為萬物皆對象，在Vue中，萬物皆組件。也就是說，在實際的vue項目中，以及使用了Vue框架的項目中，Vue的對象都會以組件的形式出現，能被反復使用。要想實現組件化，需要在頁面中注冊組件：關于注冊的方式有兩種，分別是全局注冊和本地注冊。

全局注冊組件

vue的全局注冊，也就意味著在頁面的任意一個被vue綁定過的div中，都可以使用全局注冊了的vue組件。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue組件的全局注冊</title>
</head>
<body><div id="app"><model1></model1><model1></model1><model1></model1></div><hr/><div id="app1"><model1></model1><model1></model1><model1></model1></div>
</body><script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>//通過Vue.component實現組件的全局注冊，全局注冊后的組件可以被重復使用。Vue.component("model1",{// 模板中的標簽要用一個div包起來template:"<div><h1>{{title}}</h1><button type='button' @click='btnfn'>點我</button></div>",data:function(){return {title:"hello vue",name:'VUE'}},methods:{btnfn:function(){alert("hello !!!");}}});new Vue({el:'#app'})new Vue({el:'#app1'})
</script></html>

局部注冊組件

如果是對vue組件進行局部注冊，那么只能在局部使用這些組件。

    <div id="app"><model11></model11></div><hr/><script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>new Vue({el:'#app',components:{"model11":{// 模板中的標簽要用一個div包起來template:"<div><h1>{{title}}</h1><button type='button' @click='btnfn'>點我</button></div>",data:function(){return {title:"hello vue",name:"VUE"}},methods:{btnfn:function(){alert("hello !!!");}}}}})
</script>

組件小結

這是一個完整的Vue組件。該組件包含了三個部分：template（html視圖層內容）、script（Model層）、style（CSS樣式）。這樣封裝好的組件可以被復用，也可以作為其他組件的組成部分而被封裝——Java的面向對象再次體現。

• 特點1： template標簽內，必須有且只能有一個根標簽。

• 特點2： componet中注冊的組件中的data，必須是已函數的形式。

如下：

data:function(){return {title:"hello vue"}}

組件的生命周期

Vue中的組件也是有生命周期的。一個Vue組件會經歷：初始化、創建、綁定、更新、銷毀等階段，不同的階段，都會有相應的生命周期鉤子函數被調用。

<div id="app1">{{title}}<!-- 這里設置組件v-mode綁定--><button type="button" @click="changeTitle">change title</button><button type="button" @click="destroy">destroy</button>
</div>
<script>new Vue({el:"#app1",data:{title:"this is title"},methods:{changeTitle:function(){this.title= "new title";},destroy:function(){this.$destroy();}},beforeCreate(){console.log("beforeCreate")},created(){console.log("created")},beforeMount(){console.log("beforeMount")},mounted(){console.log("mounted")},beforeUpdate(){console.log("beforeUpdate")},updated(){console.log("updated")},beforeDestroy(){console.log("beforeDestory")},destroyed(){console.log("destory")}})

NodeJS

官方網站：http://nodejs.cn/

node.js提供了前端程序的運行環境，可以把node.js理解成是運行前端程序的服務器。

Node.js 版本的話建議安裝 V10 的，盡力少踩坑。下載 Node.js V10 版本的安裝包地址：https://nodejs.org/en/download/releases/

測試node.js是否安裝成功

Vue腳手架

vue-cli 是vue.js的腳手架，用于自動生成vue.js+webpack的項目模板，分為vue init webpack-simple 項目名 和vue init webpack 項目名 兩種。當然首先你的安裝vue，node等一些必要的環境。

安裝vue腳手架

npm install vue-cli -g

- npm： 使用node.js的命令
- install： 安裝
- vue-cli： 要安裝的vue-cli(腳手架)
- -g： 全局安裝

本地安裝

1. 將安裝包放在 ./node_modules 下（運行 npm 命令時所在的目錄），如果沒有 node_modules 目錄，會在當前執行 npm 命令的目錄下生成 node_modules 目錄。
2. 可以通過 require() 來引入本地安裝的包

全局安裝

1. 將安裝包放在 /usr/local 下或者你 node 的安裝目錄。
2. 可以直接在命令行里使用。

安裝cnpm

NMP安裝插件是從NPM官網下載對應的插件包，該網站的服務器在國外，經常會出現下載緩慢或出現異常，這時便需要找到另外的方法提供穩定的下載，這個方法就是CNPM。阿里巴巴的淘寶團隊把NMP官網的插件都同步到了在中國的服務器，提供給我們從這個服務器上穩定下載資源。CNMP同樣是NMP的一個插件，要安裝的話需要在CMD命令行控制臺執行以下命令：

# 安裝cpnm插件
npm install -g cnpm --registry=https://registry.npm.taobao.org

# 使用cnpm安裝腳手架
cnpm install vue-cli -g

使用vue-cli搭建Vue項目

就像maven一樣，vue為我們提供了一些官方項目骨架。使用vue list命令可以列出當前官方提供的骨架，可以使用這些骨架來快速搭建出項目。

創建項目目錄并打開

mkdir e:/hello-vue
cd e:/hello-vue

使用Webpack快速創建項目

在my-vue-project目錄中使用以下命令下載項目骨架。

vue init webpack hello-vue

- webpack: 骨架名稱
- my-project1: 項目名稱

過程中會出現如下界面，需要手動操作

1、項目名稱
2、項目名稱
3、作者
4、運行時編譯
5、是否安裝路由
6、是否使用ESL語法
7、是否測試
8、是否e2e
9、是否自動使用NPM

出現如下界面，表示安裝成功。

運行項目

npm run dev

訪問項目

http://localhost:8081

項目結構介紹

webpack項目的幾個常用命令

• npm install

在運行和調試項目前，一般都需要先執行該命令，目的是安裝項目運行所需要的環境。

• npm run dev

以調試的方式運行項目

• npm run build

生成用于項目部署所需的最小資源，生成的內容存放在build文件夾內。

Vue項目打包

npm打包Vue項目

1、在項目的根目錄下行執行命令npm run build命令

2、打包好的文件會放在dist文件夾，其中index.html為入口文件

3、運行index.html出現404的錯誤

4、修改config/ndex.js文件

5、再次執行npm run build，然后打開index.html發現成功了。

解決圖片字體不顯示的問題

在build/utils 中，找到這里添加 publicPath:‘…/…/’ 這條代碼 即可解決這個問題。

Java系理解nodejs/npm/webpack的關系

Node.JS理解

Node.js 是一個開源與跨平臺的 JavaScript 運行時環境。用來開發Web應用的話，有時要便捷很多。很多人都不明白，為什么一個javascript的東西用在了服務器端的開發上。一般認為javascript是瀏覽器端的腳本語言，但是google將其再開發，用來作為服務器端腳本環境，其性能自稱比Python、PHP還要快。

NodeJS可以連接數據庫，搭建Web服務器

NPM理解

從事網站制作的小前端們都知道cdn的概念，也就是在網站制作中如果我們需要jquery或者bootstrap等文件支持的話，就可以通過cdn引入的方式來實現調用。由于node的使用日益廣泛，也帶動了其組件npm的使用，而npm就是這些jquery以及bootstrap這些文件包的組合管理器。現在只要使用了node環境進行web網站開發，你就可以直接用npm進行調用以前所有的cdn文件了。

Webpack理解

Webpack 是一個前端資源加載/打包工具。它將根據模塊的依賴關系進行靜態分析，然后將這些模塊按照指定的規則生成對應的靜態資源。

總結

nodejs是js后端運行平臺，可以把它看成java體系中對應的jdk，是三個里面最基礎的。

npm是nodejs的包管理工具，可以把它看成maven中包依賴管理那部分。

webpack是前端工程化打包工具，可以把它看成maven中工程自動化構建那部分。

vue-cli是用來自動生成模板工程

Vue-router

簡介

官網地址：https://router.vuejs.org/zh/installation.html

路由，其實就是指向的意思，當我點擊頁面上的home按鈕時，頁面中就要顯示home的內容，如果點擊頁面上的about 按鈕，頁面中就要顯示about 的內容。Home按鈕 => home 內容， about按鈕 => about 內容，也可以說是一種映射. 所以在頁面上有兩個部分，一個是點擊部分，一個是點擊之后，顯示內容的部分。 點擊之后，怎么做到正確的對應，比如，我點擊home 按鈕，頁面中怎么就正好能顯示home的內容。這就要在js 文件中配置路由。

路由中有三個基本的概念 route, routes, router。

1， route，它是一條路由，由這個英文單詞也可以看出來，它是單數， Home按鈕 => home內容， 這是一條route, about按鈕 => about 內容， 這是另一條路由。

2， routes 是一組路由，把上面的每一條路由組合起來，形成一個數組。[{home 按鈕 =>home內容 }， { about按鈕 => about 內容}]

3， router 是一個機制，相當于一個管理者，它來管理路由。因為routes 只是定義了一組路由，它放在哪里是靜止的，當真正來了請求，怎么辦？ 就是當用戶點擊home 按鈕的時候，怎么辦？這時router 就起作用了，它到routes 中去查找，去找到對應的 home 內容，所以頁面中就顯示了 home 內容。

4，客戶端中的路由，實際上就是dom 元素的顯示和隱藏。當頁面中顯示home 內容的時候，about 中的內容全部隱藏，反之也是一樣。客戶端路由有兩種實現方式：基于hash 和基于html5 history api.

安裝路由

npm install vue-router@3.0.1 -s

創建addUser.vue文件

<template><div>{{title}}</div>
</template><script>
export default {name: "addUser",data(){return{title:"addUser.vue"}}
}
</script>
<style scoped>
</style>

創建路由表

修改路由表src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入
import addUser from '@/components/addUser'Vue.use(VueRouter)export default new VueRouter({routes: [{path:'/toAddUser',component: addUser}]
})

引入路由模塊并使用

在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, //使用路由模塊，這里必須交router，也可以設置為router:router1components: { App },template: '<App/>'
})

在App.vue中使用

<template><div id="app"><h3>Vue Route</h3><router-link to="/toAddUser">toAddUser</router-link><!-- 顯示路由結果--><router-view></router-view></div>
</template>

程序式路由的實現

使用進行路由跳轉是有局限性的，可以通過this.$router.push(‘/toAddUser’）的js方式實現路由跳轉，更加靈活。

<template><div id="app"><router-link to="/toAddUser">toAddUser</router-link><button type="button" @click="btnfn">點我跳轉到頁面</button><router-view/></div>
</template><script>
export default {name: 'App',methods:{btnfn(){//代替router-link實現路由跳轉this.$router.push("/toAddUser");}}}
</script>

vue-axios

簡介

官網：http://www.axios-js.com/

Axios 是一個開源的可以用在瀏覽器端和 NodeJS 的異步通信框架，她的主要作用就是實現 AJAX 異步通信，其功能特點如下：

• 從瀏覽器中創建 XMLHttpRequests
• 從 node.js 創建 http 請求
• 支持 Promise API
• 攔截請求和響應
• 轉換請求數據和響應數據
• 取消請求
• 自動轉換 JSON 數據
• 客戶端支持防御 XSRF（跨站請求偽造）

官網：http://www.axios-js.com/

為什么要使用 Axios

由于 Vue.js 是一個 視圖層框架 并且作者（尤雨溪）嚴格準守 SoC （關注度分離原則），所以 Vue.js 并不包含 AJAX 的通信功能，為了解決通信問題，作者單獨開發了一個名為 vue-resource 的插件，不過在進入 2.0 版本以后停止了對該插件的維護并推薦了 Axios 框架

安裝vue axios

npm install --save axios vue-axios

在項目中使用vue-axios模塊

在main.js中引入vue-axios

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'Vue.use(VueAxios, axios) // 先傳入VueAxios在傳入axios

使用vue-axios發送請求

<template><div id="app"><input type="text" v-model="age" /><button @click="findJson()">獲取JSON數據</button><br/>{{obj}}</div>
</template><script>
export default {name: 'App',data(){return {age:10,obj:{}}},methods:{findJson:function(){this.axios.get('http://localhost:10000/json', {params: {id: this.$data.age // 傳遞數據}}).then((resp)=>{this.obj=resp.data;console.log("success:"+resp);})// .then(function (response) { // 這里用戶無法使用Vue實例//   console.log("success:"+response);//   return response;// }).catch(function (error) {console.log("error:"+error);});}}
}
</script>

SpringBoot解決跨域問題

@Configuration
public class CORSConfig {@Beanpublic WebMvcConfigurer corsConfigurer(){return new WebMvcConfigurer() {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**") // 匹配所有路徑.allowedHeaders("*") // 任意的頭.allowedMethods("GET", "POST", "DELETE", "PUT") // 允許這些請求.allowedOrigins("*"); // 任意域名}};}
}

Element UI組件庫

Element官網：http://element.eleme.io/#/zh-CN

Element，一套為開發者、設計師和產品經理準備的基于 Vue 2.0 的桌面端組件庫。Element是餓了么前端開源維護的Vue UI組件庫，更新頻率還是很高的，基本一周到半個月都會發布一個新版本。組件齊全，基本涵蓋后臺所需的所有組件，文檔講解詳細，例子也很豐富。是一個質量比較高的Vue UI組件庫。

安裝element-ui

npm i element-ui -S

使用Element-UI

在 main.js 中引入以下內容：

import Vue from 'vue'
import App from './App'
// 導入element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';// 全局配置使
Vue.use(ElementUI);Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',components: { App },template: '<App/>'
})

后記
👉👉💕💕美好的一天，到此結束，下次繼續努力！欲知后續，請看下回分解，寫作不易，感謝大家的支持！！ 🌹🌹🌹