二级域名网站建设,企业网站推广总结,大学生ppt自我介绍幻灯片,seo外链推广Vue开发中Element是一个比较受欢迎的界面库#xff0c;实际开发中Vue2搭配Element UI开发#xff0c;Vue3搭配Element plus开发#xff0c;今天就用Vue2 Element来开发登录页面。
目录
1.Element UI介绍
1.1官网
1.2element-ui安装
2.开发环境准备
2.1core-js安装
2… Vue开发中Element是一个比较受欢迎的界面库实际开发中Vue2搭配Element UI开发Vue3搭配Element plus开发今天就用Vue2 Element来开发登录页面。
目录
1.Element UI介绍
1.1官网
1.2element-ui安装
2.开发环境准备
2.1core-js安装
2.2浏览器自动打开和关闭useEslint校验配置
2.3Element UI全局引入
2.4Element UI按需引入
2.5 SASS: CSS预处理器
2.6 LASS 另外一个CSS预处理器
2.7 默认CSS重置文件
2.8 图标库安装
2.9 axios和路由安装
3.登录页面开发
3.1 版本1
3.2 版本2
3.3 版本3
3.4 版本4
4.运行效果
4.1 代码结构
4.2 效果
5.JS中var let const区别 1.Element UI介绍 Element UI是一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端元组件库由饿了么前端团队推出。它并不依赖于Vue却是一个十分适合Vue项目的框架。可使用Element UI轻松制作出网页为前端开发人员大大减轻了代码负担。
1.1官网
https://element.eleme.cn/#/en-US/component/installation
1.2element-ui安装
npm i element-ui -S
2.开发环境准备
2.1core-js安装 core-js 它是JavaScript标准库的 polyfill垫片/补丁, 新功能的esapi转换为大部分现代浏览器都可以支持运行的一个api 补丁包集合。 npm install --save core-js
2.2浏览器自动打开和关闭useEslint校验配置
文件 config/index.js 设置 autoOpenBrowser: true useEslint: false
2.3Element UI全局引入 需要在main.js引入如下模块 import ElementUI from element-ui import element-ui/lib/theme-chalk/index.css Vue.use(ElementUI)
2.4Element UI按需引入 参考网址 https://element.eleme.cn/#/zh-CN/component/quickstart babel安装 cnpm install babel-plugin-component -D babel配置.babelrc中增加 plugins: [ [ component, { libraryName: element-ui, styleLibraryName: theme-chalk } ] ]
2.5 SASS: CSS预处理器
官网 https://www.sass.hk/ 安装 sudo apt install ruby-sass npm i sass-loader7 node-sass
node-sass版本过高导致的卸载重装低版本: (1) 卸载已安装版本 npm uninstall node-sass (2) 安装 npm install node-sass4.14.1 (3) npm run dev
引用
style langscss .hello { background: yello; .el-button { color: red; } } /style
查看版本 sass -v
2.6 LASS 另外一个CSS预处理器
安装:
npm i less3 less-loader7 -S --force
引用
style langless .hello { background: yello; .el-button { color: red; } } /style 2.7 默认CSS重置文件
https://meyerweb.com/eric/tools/css/reset/
2.8 图标库安装
npm i -D font-awesome
2.9 axios和路由安装
axios npm i axios -S
路由 npm i vue-router3.5.3 -S
3.登录页面开发
src/main.js //import ../plugins/element.js import Vue from vue import VueRouter from vue-router import Home from ./components/Home.vue //import About from ./components/HelloWorld.vue import NotFound from ./components/MyFirst.vue import App from ./App import font-awesome/css/font-awesome.min.css import axios from axios /* //按需加载 import { Button, Tag } from element-ui Vue.use(Button) Vue.use(Tag) */ // 挂载到原型就可以全局使用 Vue.prototype.axios axios import ElementUI from element-ui import element-ui/lib/theme-chalk/index.css Vue.use(ElementUI) Vue.use(VueRouter) const routes [ { path: /, redirect: /login, component: () import(/components/Login) }, { path: /login, name: Login, component: () import(/components/Login) }, { path: /home, component: Home }, //{ path: /about, component: About }, //使用懒加载官方推荐 //{ path: /about, component: () import(/components/HelloWorld.vue) }, //{ path: /about, component: () import(/components/HelloWorld) }, //异步组件加载 { path: /about, component: resolve require([/components/HelloWorld], resolve)}, { path: *, component: NotFound } ] const router new VueRouter({ mode: history, routes }) new Vue({ router, render: h h(App) }).$mount(#app2) index.html !DOCTYPE html html head meta charsetutf-8 meta nameviewport contentwidthdevice-width,initial-scale1.0 titledemo/title /head body div idapp2/div !-- built files will be auto injected -- /body /html src/App.vue template div idmyapp1111 classhello router-link to/Home/router-link router-link to/aboutAbout/router-link router-view/router-view h1hello/h1 el-button你好/el-button el-button typeprimary你好/el-button el-button typeinfo你好/el-button el-button typedanger你好/el-button el-button typesuccess你好/el-button el-tag fsfsd dsd dsfv/el-tag i classfa fa-user/i i classfa fa-users/i /div /template style langscss .hello { background: yello; .el-button { color: red; } } import url(./assets/css/reset.css) /style src/assets/css/reset.css /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ; content: none; } table { border-collapse: collapse; border-spacing: 0; } src/components/Home.vue template div h1Home Page/h1 button clickgoToAboutGo to About/button /div /template script export default { methods: { goToAbout () { this.$router.push(/about) } } } /script 3.1 版本1
src/components/Login_V1.vue template div classlogin el-card classbox-card div slotheader classclearfix span后台管理系统/span /div el-form label-width100px :modelform refform el-form-item label用户名 propusername :rules[ { required: true, message: 请输入用户名, trigger: blur}, { min: 4, max: 10, message: 长度在4-10位之间, trigger: blur } ] el-input v-modelform.username/el-input /el-form-item el-form-item label密码 proppassword :rules[ { required: true, message: 请输入密码, trigger: blur}, { min: 6, max: 12, message: 长度在6-12位字符, trigger: blur } ] el-input typepassword v-modelform.password/el-input /el-form-item el-form-item el-button typeprimary clicklogin(form)登录/el-button /el-form-item /el-form /el-card /div /template script export default { data () { return { form: { username: , password: } } }, methods: { login(form) { this.$refs[form].validate((valid) { if (valid) { console.log(this.form) } else { console.error(this.form) } }) } } } /script style langscss .login { width: 100%; height: 100%; position: absolute; background: #409EFF; .box-card { width: 450px; margin: 200px auto; .el-card_header { font-size: 34px; } .el-button { width: 100%; } } } /style 3.2 版本2
src/components/Login_V2.vue template div classlogin el-card classbox-card div slotheader classclearfix span后台管理系统/span /div el-form label-width100px :modelform refform el-form-item label用户名 propusername :rules[ { required: true, message: 请输入用户名, trigger: blur}, { min: 4, max: 10, message: 长度在4-10位之间, trigger: blur } ] el-input v-modelform.username/el-input /el-form-item el-form-item label密码 proppassword :rules[ { required: true, message: 请输入密码, trigger: blur}, { min: 6, max: 12, message: 长度在6-12位字符, trigger: blur } ] el-input typepassword v-modelform.password/el-input /el-form-item el-form-item el-button typeprimary clicklogin(form)登录/el-button /el-form-item /el-form /el-card /div /template script export default { data () { return { form: { username: , password: } } }, methods: { login(form) { this.$refs[form].validate((valid) { if (valid) { console.log(this.form) //this.$router.push(/about) this.axios.post(https://www.baidu.com/, this.form).then(res { console.log(res) if (res.data.status 200) { localStorage.setItem(username, res.data.username) this.$message({message: res.data.message, type: success}) this.$router.push(/home) } }) } else { console.error(this.form) } }) } } } /script style langscss .login { width: 100%; height: 100%; position: absolute; background: #409EFF; .box-card { width: 450px; margin: 200px auto; .el-card_header { font-size: 34px; } .el-button { width: 100%; } } } /style 3.3 版本3
src/components/Login_V3.vue template div classlogin el-card classbox-card div slotheader classclearfix span后台管理系统/span /div el-form label-width100px :modelform refform :rulesrules el-form-item label用户名 propusername el-input v-modelform.username/el-input /el-form-item el-form-item label密码 proppassword el-input typepassword v-modelform.password/el-input /el-form-item el-form-item el-button typeprimary clicklogin(form)登录/el-button /el-form-item /el-form /el-card /div /template script export default { data () { const validateName (rule, value, callback) { let reg /(^[a-zA-Z0-9]{4,10}$)/; if (value ) { callback(new Error(请输入用户名)); } else if (!reg.test(value)) { callback(new Error(请输入4-10用户名)); } else { callback(); } }; const validatePass (rule, value, callback) { let pass /^\S*(?\S{6,12})(?\S*\d)(?\S*[A-Z])(?\S*[a-z])(?\S*[!#$%^*? ])\S*$/; if (value ) { callback(new Error(请输入密码)); } else if (!pass.test(value)) { callback(new Error(请输入6-12位密码需要包含大小写和数字及特殊字符)); } else { callback(); } }; return { form: { username: , password: , }, rules: { username: [{validator: validateName, required: true, trigger: blur}], password: [{validator: validatePass, required: true, trigger: blur}], }, } }, methods: { login(form) { this.$refs[form].validate((valid) { if (valid) { console.log(this.form) //this.$router.push(/about) this.axios.post(https://www.baidu.com/, this.form).then(res { console.log(res) if (res.data.status 200) { localStorage.setItem(username, res.data.username) this.$message({message: res.data.message, type: success}) this.$router.push(/home) } }) } else { console.error(this.form) } }) } } } /script style langscss .login { width: 100%; height: 100%; position: absolute; background: #409EFF; .box-card { width: 450px; margin: 200px auto; .el-card_header { font-size: 34px; } .el-button { width: 100%; } } } /style 3.4 版本4
src/components/Login.vue template div classlogin el-card classbox-card div slotheader classclearfix span业务后台管理系统/span /div el-form label-width100px :modelform refform :rulesrules el-form-item label用户名 propusername el-input v-modelform.username/el-input /el-form-item el-form-item label密码 proppassword el-input typepassword v-modelform.password/el-input /el-form-item el-form-item el-button typeprimary clicklogin(form)登录/el-button /el-form-item /el-form /el-card /div /template script //登录验证的封装 import {nameRule, passRule} from ../utils/validate.js import {setToken} from /utils/dealtoken.js export default { data () { return { form: { username: , password: }, rules: { username: [{validator: nameRule, required: true, trigger: blur}], password: [{validator: passRule, required: true, trigger: blur}] } } }, methods: { login(form) { this.$refs[form].validate((valid) { if (valid) { console.log(this.form) //this.$router.push(/about) this.axios.post(https://www.baidu.com/, this.form).then(res { console.log(res) if (res.data.status 200) { //localStorage.setItem(username, res.data.username) setToken(username, res.data.username) this.$message({message: res.data.message, type: success}) this.$router.push(/home) } }) } else { console.error(this.form) } }) } } } /script style langscss .login { width: 100%; height: 100%; position: absolute; background: #409EFF; .box-card { width: 450px; margin: 200px auto; .el-card_header { font-size: 34px; } .el-button { width: 100%; } } } /style src/utils/validate.js //用户名匹配 export function nameRule (rule, value, callback) { let reg /(^[a-zA-Z0-9]{4,10}$)/; if (value ) { callback(new Error(请输入用户名)); } else if (!reg.test(value)) { callback(new Error(请输入4-10用户名)); } else { callback(); } } //密码匹配 export function passRule (rule, value, callback) { let pass /^\S*(?\S{6,12})(?\S*\d)(?\S*[A-Z])(?\S*[a-z])(?\S*[!#$%^*? ])\S*$/; if (value ) { callback(new Error(请输入密码)); } else if (!pass.test(value)) { callback(new Error(请输入6-12位密码需要包含大小写和数字及特殊字符)); } else { callback(); } } src/utils/dealtoken.js // Token的封装 Token存放在localStorage export function setToken(tokenkey, token) { return localStorage.setItem(tokenkey, token) } export function getToken(tokenkey) { return localStorage.getItem(tokenkey) } export function removeToken(tokenkey) { return localStorage.removeItem(tokenkey) } 4.运行效果
4.1 代码结构 4.2 效果 5.JS中var let const区别
1.var 使用关键字 var 声明的所有变量和函数都被提升到其作用域的顶部。 (1) var在函数内声明变量时。该变量在该函数之外无法访问因为在这种情况下它具有函数作用域。 (2) var在函数外声明变量时它将具有全局作用域。这意味着它可以在你的代码中的任何地方访问。 (3) var 的变量是可声明和可重新分配的。这意味着您可以重新声明相同的变量并重新分配它而不会出现任何问题。 例如 var name zhangsan; var name lisi; // lisi console.log(name)
2.let const ES6 中引入了关键字 let 和 const 作为 var 的替代。 与关键字 var 不同这两个关键字具有块作用域。这意味着当你在块中声明它们时它们只能在该块 {} 内访问。 使用 let 和 const 声明的变量和函数不会被提升。 用关键字let声明的变量是可重新分配的而不是可重新声明的。虽然使用关键字const声明的变量不可重新分配且不可重新声明。 举例 const name zhangsan; //Error const name lisi; let x 1; x 2; //zhangsan console.log(name); // 2 console.log(x);
