FLASK+VUE--前后端分离（三）- VUE+Element-UI搭建登陆页面且能够正常登陆-Toy模板网

这篇具有很好参考价值的文章主要介绍了FLASK+VUE--前后端分离（三）- VUE+Element-UI搭建登陆页面且能够正常登陆。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

FLASK+VUE–前后端分离（一）- Flask基础讲解之路由、视图函数及代码实现
FLASK+VUE–前后端分离（二）- VUE基础安装及项目的简易介绍
FLASK+VUE–前后端分离（三）- VUE+Element-UI搭建登陆页面且能够正常登陆
FLASK+VUE–前后端分离（四）- VUE+Element-UI简单搭建主页布局
FLASK+VUE–前后端分离（五）- VUE测试/线上/开发环境地址配置+拦截器+全局导航守卫+基础配置+获取设置cookie等系列

一、简单介绍所用到的基本库及安装配置

（一）、在VUE项目内引用Element-UI及配置

Element-UI简介：Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。

Element-UI官网：https://element.eleme.cn/#/zh-CN/component/installation

1、在Vscode安装Element-UI的依赖包

在Vscode内输入：npm i element-ui -S

2、根据官方文档提示：快速上手—>引入 Element

Element教程 FLASK+VUE--前后端分离（三）- VUE+Element-UI搭建登陆页面且能够正常登陆
实际项目
（1）Vue.use(ElementUI)是什么意思，是将ElementUI注入到Vue根实例中。
（2）根据上面讲述，大家可能会问到什么是实例：在面向对象程序设计中，“类”在实例化之后叫做一个“实例”。 “类”是静态的，不占进程内存，而“实例”拥有动态内存。 FLASK+VUE--前后端分离（三）- VUE+Element-UI搭建登陆页面且能够正常登陆

（二）、在VUE项目内引用Vue-Router

Vue Router简介： Vue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单、多页面应用变得易如反掌。

Router官网：https://router.vuejs.org/zh/installation.html
1、在Vscode安装Router的依赖包

在Vscode内输入：npm install vue-router

2、根据官方文档提示：引用vue-router

vue-router教程
FLASK+VUE--前后端分离（三）- VUE+Element-UI搭建登陆页面且能够正常登陆
实际项目
Vue.use(VueRouter)是将VueRouter注入到Vue根实例中。

（三）、在VUE项目内引用Axios、qa.js及配置

Axios简介： Axios是一个基于promise 的 HTTP 库，可以用在浏览器和 node.js中。

安装Axios

npm install vue-axios --save

安装qs.js：qs.js的作用是能把json格式的直接转成data所需的格式（先安装后面会用到）

npm install qs.js --save

配置：在main.js中添加

import axios from 'axios'

Vue.prototype.$axios = axios    //全局注册，使用方法为:this.$axios
Vue.prototype.qs = qs   //全局注册，使用方法为:this.qs

（1）Vue.prototype：个人理解类似于全局赋值，我们可能会在很多组件里用到数据/实用方法，但是不想污染全局的作用域，那么我们可能会与原方法进行区分，比如我们在原方法前面加上 $符号。这样$ 文章来源地址https://www.toymoban.com/news/detail-414564.html

到了这里，关于FLASK+VUE--前后端分离（三）- VUE+Element-UI搭建登陆页面且能够正常登陆的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！