? ? ? ?Vue開發(fā)中Element是一個(gè)比較受歡迎的界面庫(kù)，實(shí)際開發(fā)中Vue2搭配Element UI開發(fā)，Vue3搭配Element plus開發(fā)，今天就用Vue2 + Element來(lái)開發(fā)登錄頁(yè)面。
目錄
1.Element UI介紹
1.1官網(wǎng)
1.2element-ui安裝
2.開發(fā)環(huán)境準(zhǔn)備
2.1core-js安裝
2.2瀏覽器自動(dòng)打開和關(guān)閉useEslint校驗(yàn)配置
2.3Element UI全局引入
2.4Element UI按需引入
2.5 SASS: CSS預(yù)處理器
2.6?LASS： 另外一個(gè)CSS預(yù)處理器
2.7??默認(rèn)CSS重置文件：
2.8?圖標(biāo)庫(kù)安裝
2.9?axios和路由安裝
3.登錄頁(yè)面開發(fā)
3.1 版本1
3.2?版本2
3.3?版本3
3.4?版本4
4.運(yùn)行效果
4.1 代碼結(jié)構(gòu)
4.2 效果
5.JS中var let const區(qū)別
1.Element UI介紹
? ? ? ? Element UI是一套為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于Vue 2.0的桌面端元組件庫(kù)，由餓了么前端團(tuán)隊(duì)推出。它并不依賴于Vue，卻是一個(gè)十分適合Vue項(xiàng)目的框架。可使用Element UI輕松制作出網(wǎng)頁(yè)，為前端開發(fā)人員大大減輕了代碼負(fù)擔(dān)。
1.1官網(wǎng)
https://element.eleme.cn/#/en-US/component/installation
1.2element-ui安裝
npm i element-ui -S
2.開發(fā)環(huán)境準(zhǔn)備
2.1core-js安裝
? ? ? core-js 它是JavaScript標(biāo)準(zhǔn)庫(kù)的 polyfill（墊片/補(bǔ)?。? 新功能的es'api'轉(zhuǎn)換為大部分現(xiàn)代瀏覽器都可以支持運(yùn)行的一個(gè)'api' 補(bǔ)丁包集合。
npm install --save core-js
2.2瀏覽器自動(dòng)打開和關(guān)閉useEslint校驗(yàn)配置
文件：
config/index.js
設(shè)置：
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按需引入
?參考網(wǎng)址：
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預(yù)處理器
官網(wǎng)
https://www.sass.hk/
安裝：
sudo apt install ruby-sass
npm i sass-loader@7 node-sass
node-sass版本過(guò)高導(dǎo)致的，卸載重裝低版本:
(1) 卸載已安裝版本 npm uninstall node-sass
(2) 安裝 npm install node-sass@4.14.1
(3) npm run dev
引用：
<style lang="scss">
? ? .hello {
? ? ? ? background: yello;
? ? ? ? .el-button {
? ? ? ? ? ? color: red;
? ? ? ? }
? ? }
</style>
查看版本：
sass -v
2.6?LASS： 另外一個(gè)CSS預(yù)處理器
安裝:
npm i less@3 less-loader@7 -S --force
引用：
<style lang="less">
? ? .hello {
? ? ? ? background: yello;
? ? ? ? .el-button {
? ? ? ? ? ? color: red;
? ? ? ? }
? ? }
</style>
2.7??默認(rèn)CSS重置文件：
https://meyerweb.com/eric/tools/css/reset/
2.8?圖標(biāo)庫(kù)安裝
npm i -D font-awesome
2.9?axios和路由安裝
axios：
npm i axios -S
路由：
npm i vue-router@3.5.3 -S
3.登錄頁(yè)面開發(fā)
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 charset="utf-8">
? ? <meta name="viewport" content="width=device-width,initial-scale=1.0">
? ? <title>demo</title>
? </head>
? <body>
? ? <div id="app2"></div>
? ? <!-- built files will be auto injected -->
? </body>
</html>
src/App.vue
<template>
<div id="myapp1111" class="hello">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
<h1>hello</h1>
<el-button>你好</el-button>
<el-button type="primary">你好</el-button>
<el-button type="info">你好</el-button>
<el-button type="danger">你好</el-button>
<el-button type="success">你好</el-button>
<el-tag> fsfsd dsd dsfv</el-tag>
<i class="fa fa-user"></i>
<i class="fa fa-users"></i>
</div>
</template><style lang="scss">
? ? .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>
<h1>Home Page</h1>
<button @click="goToAbout">Go 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 class="login">
? ? <el-card class="box-card">
? ? ? ? <div slot="header" class="clearfix">
? ? ? ? ? ? <span>后臺(tái)管理系統(tǒng)</span>
? ? ? ? </div>? ? ? ? <el-form label-width="100px" :model="form" ref="form">
? ? ? ? ? ? <el-form-item label="用戶名" prop='username'?
? ? ? ? ? ? :rules="[
? ? ? ? ? ? ? ? { required: true, message: '請(qǐng)輸入用戶名', trigger: 'blur'},
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? min: 4,
? ? ? ? ? ? ? ? ? ? max: 10,
? ? ? ? ? ? ? ? ? ? message: '長(zhǎng)度在4-10位之間',
? ? ? ? ? ? ? ? ? ? trigger: 'blur'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ]"
? ? ? ? ? ? >
? ? ? ? ? ? ? ? <el-input v-model="form.username"></el-input>
? ? ? ? ? ? </el-form-item>
? ? ? ? ? ? <el-form-item label="密碼" prop='password'
? ? ? ? ? ? ? ? :rules="[
? ? ? ? ? ? ? ? { required: true, message: '請(qǐng)輸入密碼', trigger: 'blur'},
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? min: 6,
? ? ? ? ? ? ? ? ? ? max: 12,
? ? ? ? ? ? ? ? ? ? message: '長(zhǎng)度在6-12位字符',
? ? ? ? ? ? ? ? ? ? trigger: 'blur'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ]"
? ? ? ? ? ? >
? ? ? ? ? ? ? ? <el-input type='password' v-model="form.password"></el-input>
? ? ? ? ? ? </el-form-item>
? ? ? ? ? ? <el-form-item>
? ? ? ? ? ? ? ? <el-button type='primary' @click="login('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 lang='scss'>
? ? .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 class="login">
? ? <el-card class="box-card">
? ? ? ? <div slot="header" class="clearfix">
? ? ? ? ? ? <span>后臺(tái)管理系統(tǒng)</span>
? ? ? ? </div>? ? ? ? <el-form label-width="100px" :model="form" ref="form">
? ? ? ? ? ? <el-form-item label="用戶名" prop='username'?
? ? ? ? ? ? :rules="[
? ? ? ? ? ? ? ? { required: true, message: '請(qǐng)輸入用戶名', trigger: 'blur'},
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? min: 4,
? ? ? ? ? ? ? ? ? ? max: 10,
? ? ? ? ? ? ? ? ? ? message: '長(zhǎng)度在4-10位之間',
? ? ? ? ? ? ? ? ? ? trigger: 'blur'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ]"
? ? ? ? ? ? >
? ? ? ? ? ? ? ? <el-input v-model="form.username"></el-input>
? ? ? ? ? ? </el-form-item>
? ? ? ? ? ? <el-form-item label="密碼" prop='password'
? ? ? ? ? ? ? ? :rules="[
? ? ? ? ? ? ? ? { required: true, message: '請(qǐng)輸入密碼', trigger: 'blur'},
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? min: 6,
? ? ? ? ? ? ? ? ? ? max: 12,
? ? ? ? ? ? ? ? ? ? message: '長(zhǎng)度在6-12位字符',
? ? ? ? ? ? ? ? ? ? trigger: 'blur'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ]"
? ? ? ? ? ? >
? ? ? ? ? ? ? ? <el-input type='password' v-model="form.password"></el-input>
? ? ? ? ? ? </el-form-item>
? ? ? ? ? ? <el-form-item>
? ? ? ? ? ? ? ? <el-button type='primary' @click="login('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 lang='scss'>
? ? .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 class="login">
? ? <el-card class="box-card">
? ? ? ? <div slot="header" class="clearfix">
? ? ? ? ? ? <span>后臺(tái)管理系統(tǒng)</span>
? ? ? ? </div>? ? ? ? <el-form label-width="100px" :model="form" ref="form" :rules='rules'>
? ? ? ? ? ? <el-form-item label="用戶名" prop='username'>
? ? ? ? ? ? ? ? <el-input v-model="form.username"></el-input>
? ? ? ? ? ? </el-form-item>
? ? ? ? ? ? <el-form-item label="密碼" prop='password'>
? ? ? ? ? ? ? ? <el-input type='password' v-model="form.password"></el-input>
? ? ? ? ? ? </el-form-item>
? ? ? ? ? ? <el-form-item>
? ? ? ? ? ? ? ? <el-button type='primary' @click="login('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("請(qǐng)輸入用戶名"));
? ? ? ? } else if (!reg.test(value)) {
? ? ? ? ? ? callback(new Error("請(qǐng)輸入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("請(qǐng)輸入密碼"));
? ? ? ? } else if (!pass.test(value)) {
? ? ? ? ? ? callback(new Error("請(qǐng)輸入6-12位密碼需要包含大小寫和數(shù)字及特殊字符"));
? ? ? ? } 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 lang='scss'>
? ? .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 class="login">
? ? <el-card class="box-card">
? ? ? ? <div slot="header" class="clearfix">
? ? ? ? ? ? <span>業(yè)務(wù)后臺(tái)管理系統(tǒng)</span>
? ? ? ? </div>? ? ? ? <el-form label-width="100px" :model="form" ref="form" :rules='rules'>
? ? ? ? ? ? <el-form-item label="用戶名" prop='username'>
? ? ? ? ? ? ? ? <el-input v-model="form.username"></el-input>
? ? ? ? ? ? </el-form-item>
? ? ? ? ? ? <el-form-item label="密碼" prop='password'>
? ? ? ? ? ? ? ? <el-input type='password' v-model="form.password"></el-input>
? ? ? ? ? ? </el-form-item>
? ? ? ? ? ? <el-form-item>
? ? ? ? ? ? ? ? <el-button type='primary' @click="login('form')">登錄</el-button>
? ? ? ? ? ? </el-form-item>
? ? ? ? </el-form>
? ? </el-card>
? </div>
</template><script>
//登錄驗(yàn)證的封裝
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 lang='scss'>
? ? .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("請(qǐng)輸入用戶名"));
? ? } else if (!reg.test(value)) {
? ? ? ? callback(new Error("請(qǐng)輸入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("請(qǐng)輸入密碼"));
? ? } else if (!pass.test(value)) {
? ? ? ? callback(new Error("請(qǐng)輸入6-12位密碼需要包含大小寫和數(shù)字及特殊字符"));
? ? } 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.運(yùn)行效果
4.1 代碼結(jié)構(gòu)
4.2 效果
5.JS中var let const區(qū)別
1.var
使用關(guān)鍵字 var 聲明的所有變量和函數(shù)都被提升到其作用域的頂部。
(1) var在函數(shù)內(nèi)聲明變量時(shí)。該變量在該函數(shù)之外無(wú)法訪問(wèn)，因?yàn)樵谶@種情況下它具有函數(shù)作用域。
(2) var在函數(shù)外聲明變量時(shí)，它將具有全局作用域。這意味著它可以在你的代碼中的任何地方訪問(wèn)。
(3) var 的變量是可聲明和可重新分配的。這意味著您可以重新聲明相同的變量并重新分配它，而不會(huì)出現(xiàn)任何問(wèn)題。
例如：
var name = 'zhangsan';
var name = 'lisi';
// 'lisi'
console.log(name)?文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-604668.html
2.let & const
ES6 中引入了關(guān)鍵字 let 和 const 作為 var 的替代。
與關(guān)鍵字 var 不同，這兩個(gè)關(guān)鍵字具有塊作用域。這意味著當(dāng)你在塊中聲明它們時(shí)，它們只能在該塊 {} 內(nèi)訪問(wèn)。
使用 let 和 const 聲明的變量和函數(shù)不會(huì)被提升。
用關(guān)鍵字let聲明的變量是可重新分配的，而不是可重新聲明的。雖然使用關(guān)鍵字const聲明的變量不可重新分配且不可重新聲明。
舉例：
const name = "zhangsan";
//Error
const name = lisi;?
let x = 1;
x = 2;
//"zhangsan"
console.log(name);?
// 2
console.log(x);?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-604668.html
到了這里，關(guān)于Vue系列第四篇：Vue2 + Element開發(fā)登錄頁(yè)面的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
