FLASK+VUE–前后端分離（一）- Flask基礎(chǔ)講解之路由、視圖函數(shù)及代碼實(shí)現(xiàn)
FLASK+VUE–前后端分離（二）- VUE基礎(chǔ)安裝及項(xiàng)目的簡(jiǎn)易介紹
FLASK+VUE–前后端分離（三）- VUE+Element-UI搭建登陸頁面且能夠正常登陸
FLASK+VUE–前后端分離（四）- VUE+Element-UI簡(jiǎn)單搭建主頁布局
FLASK+VUE–前后端分離（五）- VUE測(cè)試/線上/開發(fā)環(huán)境地址配置+攔截器+全局導(dǎo)航守衛(wèi)+基礎(chǔ)配置+獲取設(shè)置cookie等系列
一、簡(jiǎn)單介紹所用到的基本庫(kù)及安裝配置
（一）、在VUE項(xiàng)目?jī)?nèi)引用Element-UI及配置
Element-UI簡(jiǎn)介：Element，一套為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的組件庫(kù)，提供了配套設(shè)計(jì)資源，幫助你的網(wǎng)站快速成型。
Element-UI官網(wǎng)：https://element.eleme.cn/#/zh-CN/component/installation
1、在Vscode安裝Element-UI的依賴包
在Vscode內(nèi)輸入：npm i element-ui -S
2、根據(jù)官方文檔提示：快速上手—>引入 Element
Element教程
實(shí)際項(xiàng)目
（1）Vue.use(ElementUI)是什么意思，是將ElementUI注入到Vue根實(shí)例中。
（2）根據(jù)上面講述，大家可能會(huì)問到什么是實(shí)例：在 面向?qū)ο蟪绦蛟O(shè)計(jì)中，“類”在實(shí)例化之后叫做一個(gè)“實(shí)例”。 “類”是靜態(tài)的，不占進(jìn)程內(nèi)存，而“實(shí)例”擁有動(dòng)態(tài)內(nèi)存。
（二）、在VUE項(xiàng)目?jī)?nèi)引用Vue-Router
Vue Router簡(jiǎn)介： Vue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，讓構(gòu)建單、多頁面應(yīng)用變得易如反掌。
Router官網(wǎng)：https://router.vuejs.org/zh/installation.html
1、在Vscode安裝Router的依賴包
在Vscode內(nèi)輸入：npm install vue-router
2、根據(jù)官方文檔提示：引用vue-router
vue-router教程
實(shí)際項(xiàng)目
Vue.use(VueRouter)是將VueRouter注入到Vue根實(shí)例中。
（三）、在VUE項(xiàng)目?jī)?nèi)引用Axios、qa.js及配置
Axios簡(jiǎn)介： Axios是一個(gè)基于promise 的 HTTP 庫(kù)，可以用在瀏覽器和 node.js中。
安裝Axios
npm install vue-axios --save
安裝qs.js：qs.js的作用是能把json格式的直接轉(zhuǎn)成data所需的格式（先安裝后面會(huì)用到）
npm install qs.js --save
配置：在main.js中添加文章來源：http://www.zghlxwxcb.cn/news/detail-414564.html
import axios from 'axios'
Vue.prototype.$axios = axios //全局注冊(cè)，使用方法為:this.$axios
Vue.prototype.qs = qs //全局注冊(cè)，使用方法為:this.qs
（1）Vue.prototype：個(gè)人理解類似于全局賦值，我們可能會(huì)在很多組件里用到數(shù)據(jù)/實(shí)用方法，但是不想污染全局的作用域，那么我們可能會(huì)與原方法進(jìn)行區(qū)分，比如我們?cè)谠椒ㄇ懊婕由?span id="n5n3t3z" class="katex--inline"> 符 號(hào) 。 這 樣 調(diào) 用 的 時(shí) 候 就 用 t h i s . 符號(hào)。這樣調(diào)用的時(shí)候就用this. 符號(hào)。這樣文章來源地址http://www.zghlxwxcb.cn/news/detail-414564.html
到了這里，關(guān)于FLASK+VUE--前后端分離（三）- VUE+Element-UI搭建登陸頁面且能夠正常登陸的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
