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

FLASK+VUE--前后端分离(三)- VUE+Element-UI搭建登陆页面且能够正常登陆
实际项目
(1)Vue.use(ElementUI)是什么意思,是将ElementUI注入到Vue根实例中。
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根实例中。
FLASK+VUE--前后端分离(三)- VUE+Element-UI搭建登陆页面且能够正常登陆

(三)、在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:个人理解类似于全局赋值,我们可能会在很多组件里用到数据/实用方法,但是不想污染全局的作用域,那么我们可能会与原方法进行区分,比如我们在原方法前面加上符 号 。 这 样 调 用 的 时 候 就 用 t h i s . 符号。这样调用的时候就用this.符号。这样调

Original: https://blog.csdn.net/geinvse_seg/article/details/123158324
Author: geinvse_seg
Title: FLASK+VUE–前后端分离(三)- VUE+Element-UI搭建登陆页面且能够正常登陆

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/745181/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球