以下布局代碼
1. vue怎么引入和配置使用element-ui框架
? 1.1 使用vue-cli腳手架工具創(chuàng)建一個(gè)vue項(xiàng)目
? ? ? vue init webpack vuelogin
? 1.2 npm安裝elementUI
? ? ? cd vuelogin#進(jìn)入新建項(xiàng)目的根目錄
? ? ? npm install element-ui -S? ? ? ? ? ? ? ? ? #安裝element-ui模塊
? ## 重要的事情說(shuō)三遍：在指定位置!!!在指定位置!!!在指定位置!!!~~~添加三行代碼
? 1.3 在項(xiàng)目中src目錄下找到main.js瑟押，并在指定位置添加三行代碼（main.js是入口文件虹钮，所以在這里引入就行，頁(yè)面就不用引入了）
? ? ? import Vue from 'vue'
? ? ? import ElementUI from 'element-ui' //新添加1
? ? ? import 'element-ui/lib/theme-chalk/index.css' //新添加2晤锹，避免后期打包樣式不同凤薛，要放在import App from './App';之前
? ? ? import App from './App'
? ? ? import router from './router'
? ? ? Vue.use(ElementUI)? //新添加3
? ? ? Vue.config.productionTip = false
1.5:main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
// 導(dǎo)入字體圖標(biāo)
import './assets/fonts/iconfont.css'
// 導(dǎo)入全局樣式表
import './assets/css/global.css'
import axios from 'axios'
// 配置請(qǐng)求的跟路徑
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
Vue.prototype.$http = axios
Vue.config.productionTip = false
new Vue({
? router,
? render: h => h(App)
}).$mount('#app')
2:router.js
import Vue from 'vue'
import Router from 'vue-router'
import Login from './components/Login.vue'
import Home from './components/Home.vue'
Vue.use(Router)
const router = new Router({
? routes: [
? ? { path: '/', redirect: '/login' },
? ? { path: '/login', component: Login },
? ? { path: '/home', component: Home }
? ]
})
// 掛載路由導(dǎo)航守衛(wèi),防止跳過(guò)登錄界面進(jìn)入用戶(hù)界面
// router.beforeEach((to, from, next) => {
// ? // to 將要訪問(wèn)的路徑
// ? // from 代表從哪個(gè)路徑跳轉(zhuǎn)而來(lái)
// ? // next 是一個(gè)函數(shù)，表示放行
// ? // ? ? next() ?放行 ? ?next('/login') ?強(qiáng)制跳轉(zhuǎn)
// ? if (to.path === '/login') return next()
// ? // 獲取token
// ? const tokenStr = window.sessionStorage.getItem('token')
// ? if (!tokenStr) return next('/login')
// ? next()
//})
//暴露路由
export default router
3：login.vue
<template>
? <div class="login_container">
? ? <div class="login_box">
? ? ? <!-- 頭像區(qū)域 -->
? ? ? <div class="avatar_box">
? ? ? ? <img src="../assets/logo.png" alt="">
? ? ? </div>
? ? ? <!-- 登錄表單區(qū)域 -->
? ? ? <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
? ? ? ? <!-- 用戶(hù)名 -->
? ? ? ? <el-form-item prop="username">
? ? ? ? ? <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>
? ? ? ? </el-form-item>
? ? ? ? <!-- 密碼 -->
? ? ? ? <el-form-item prop="password">
? ? ? ? ? <el-input v-model="loginForm.password" prefix-icon="iconfont icon-3702mima" type="password"></el-input>
? ? ? ? </el-form-item>
? ? ? ? <!-- 按鈕區(qū)域 -->
? ? ? ? <el-form-item class="btns">
? ? ? ? ? <el-button type="primary" @click="login">登錄</el-button>
? ? ? ? ? <el-button type="info" @click="resetLoginForm">重置</el-button>
? ? ? ? </el-form-item>
? ? ? </el-form>
? ? </div>
? </div>
</template>
<script>
export default {
? data() {
? ? return {
? ? ? // 這是登錄表單的數(shù)據(jù)綁定對(duì)象
? ? ? loginForm: {
? ? ? ? username: 'admin',
? ? ? ? password: '123456'
? ? ? },
? ? ? // 這是表單的驗(yàn)證規(guī)則對(duì)象
? ? ? loginFormRules: {
? ? ? ? // 驗(yàn)證用戶(hù)名是否合法
? ? ? ? username: [
? ? ? ? ? { required: true, message: '請(qǐng)輸入登錄名稱(chēng)', trigger: 'blur' },
? ? ? ? ? { min: 3, max: 10, message: '長(zhǎng)度在 3 到 10 個(gè)字符', trigger: 'blur' }
? ? ? ? ],
? ? ? ? // 驗(yàn)證密碼是否合法
? ? ? ? password: [
? ? ? ? ? { required: true, message: '請(qǐng)輸入登錄密碼', trigger: 'blur' },
? ? ? ? ? { min: 6, max: 15, message: '長(zhǎng)度在 6 到 15 個(gè)字符', trigger: 'blur' }
? ? ? ? ]
? ? ? }
? ? }
? },
? methods: {
? ? // 點(diǎn)擊重置按鈕，重置登錄表單
? ? resetLoginForm() {
? ? ? // console.log(this);
? ? ? this.$refs.loginFormRef.resetFields()
? ? },
? ? login() {
? ? ? this.$refs.loginFormRef.validate(async valid => {
? ? ? ? if (!valid) return
? ? ? ? const { data: res } = await this.$http.post('login', this.loginForm)
? ? ? ? if (res.meta.status !== 200) return this.$message.error('登錄失敻恰！')
? ? ? ? this.$message.success('登錄成功')
? ? ? ? // 1. 將登錄成功之后的 token疗琉，保存到客戶(hù)端的 sessionStorage 中
? ? ? ? // ? 1.1 項(xiàng)目中出了登錄之外的其他API接口冈欢，必須在登錄之后才能訪問(wèn)
? ? ? ? // ? 1.2 token 只應(yīng)在當(dāng)前網(wǎng)站打開(kāi)期間生效，所以將 token 保存在 sessionStorage 中
? ? ? ? window.sessionStorage.setItem('token', res.data.token)
? ? ? ? // 2. 通過(guò)編程式導(dǎo)航跳轉(zhuǎn)到后臺(tái)主頁(yè)盈简，路由地址是 /home
? ? ? ? this.$router.push('/home')
? ? ? })
? ? }
? }
}
</script>
<style lang="less" scoped>
.login_container {
? background-color: #2b4b6b;
? height: 100%;
}
.login_box {
? width: 450px;
? height: 300px;
? background-color: #fff;
? border-radius: 3px;
? position: absolute;
? left: 50%;
? top: 50%;
? transform: translate(-50%, -50%);
? .avatar_box {
? ? height: 130px;
? ? width: 130px;
? ? border: 1px solid #eee;
? ? border-radius: 50%;
? ? padding: 10px;
? ? box-shadow: 0 0 10px #ddd;
? ? position: absolute;
? ? left: 50%;
? ? transform: translate(-50%, -50%);
? ? background-color: #fff;
? ? img {
? ? ? width: 100%;
? ? ? height: 100%;
? ? ? border-radius: 50%;
? ? ? background-color: #eee;
? ? }
? }
}
.login_form {
? position: absolute;
? bottom: 0;
? width: 100%;
? padding: 0 20px;
? box-sizing: border-box;
}
.btns {
? display: flex;
? justify-content: flex-end;
}
</style>
4:app.vue
<template>
? <div id="app">
? ? <!-- 路由占位符 -->
? ? <router-view></router-view>
? </div>
</template>
<script>
export default {
? name: 'app'
}
</script>
<style>
</style>
2. 后臺(tái)交互(axios/qs/vue-axios)
? 3.1 axios
? ? ? axios是vue2提倡使用的輕量版的ajax凑耻。它是基于promise的HTTP庫(kù)。它會(huì)從瀏覽器中創(chuàng)建XMLHttpRequests柠贤，與Vue配合使用非常好香浩。
? ? ? 1.題外話：
? ? ? vue.js有著名的全家桶系列：vue-router，vuex臼勉， vue-resource邻吭，再加上構(gòu)建工具vue-cli，就是一個(gè)完整的vue項(xiàng)目的核心構(gòu)成宴霸。
? ? ? 其中vue-resource是Vue.js的一款插件囱晴，它可以通過(guò)XMLHttpRequest或JSONP發(fā)起請(qǐng)求并處理響應(yīng)，但在vue更新到2.0之后瓢谢，
? ? ? 作者就宣告不再對(duì)vue-resource更新畸写，而是推薦的axios
? ? 1.安裝
? ? ? npm install axios -S
? ? ? npm install qs -S?
? ? ? npm install vue-axios -S?
原文鏈接：https://blog.csdn.net/qq_44224377/article/details/118227186
