【 聲明：版權(quán)所有，歡迎轉(zhuǎn)載，請勿用于商業(yè)用途。 聯(lián)系信箱：feixiaoxing @163.com】
? ? ? ? 前面說到了路由，有了這個(gè)功能，其實(shí)后面的工作就比較好開展了。一般來說，很多網(wǎng)頁項(xiàng)目都是這樣的，首先進(jìn)入的是登錄窗口，在輸入用戶名和密碼之后，就可以進(jìn)入主頁面了。所以，登陸頁面本身也是非常重要的一個(gè)環(huán)節(jié)。
? ? ? ? 窗口編寫的過程中涉及到node-sass、sass-loader的安裝，這是因?yàn)樯婕暗絚ss的編寫，這部分需要注意下。
1、創(chuàng)建登錄工程，注意選中router功能
vue init ./webpack login2、安裝element ui
cd login
npm install element-ui -S3、安裝其他node_modules，并執(zhí)行
npm install
npm run dev
4、將element ui添加到項(xiàng)目中
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
render:h=>h(App)
})
5、刪除原來HelloWorld相關(guān)的功能
5.1 刪除App.vue中圖片的內(nèi)容、刪除樣式
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>
5.2 刪除HelloWorld.vue中顯示的內(nèi)容，僅保留一個(gè)基本框架
<template>
</template>
<script>
export default {
name: 'HelloWorld'
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
6、創(chuàng)建view目錄
6.1 添加Login.vue
<template>
<div>Login</div>
</template>
<script>
export default {
name: "Login"
}
</script>
<style scoped>
</style>6.2 添加Main.vue，其實(shí)和Login.vue差不多
<template>
<div>Main</div>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped>
</style>6.3 修改router/index.js，將Login和Main插入到路由表中
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/view/Login'
import Main from '@/view/Main'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/Login',
name: 'Login',
component: Login
},
{
path: '/Main',
name: 'Main',
component: Main
}
]
})
6.4 輸入127.0.0.1:8082/#/Login和127.0.0.1:8082/#/Main來進(jìn)行驗(yàn)證。
7、準(zhǔn)備利用element ui組件來修飾Login.vue
7.1 因?yàn)榫帉懙倪^程中涉及到style的編寫，所以需要安裝node-sass、sass-loader
npm install node-sass@4.13.1 --registry=http://registry.npm.taobao.org
npm install sass-loader@7.3.1 --registry=http://registry.npm.taobao.org
7.2 修改Login.vue
<template>
<div>
<el-form ref="form" :model="form" :rules="rules" class="login-box">
<h3 class="login-title">歡迎登陸</h3>
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="密碼" prop="password">
<el-input v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('form')">確定</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "Login",
data() {
return {
form:{
name:'',
password:''
},
rules:{
name: [
{ required: true, message: '請輸入姓名', trigger: 'blur' },
],
password: [
{ required: true, message: '請選擇密碼', trigger: 'change' }
]
}
}
},
methods:{
submitForm(formName) {
//alert('submit!');
this.$refs[formName].validate((valid) => {
if (valid) {
this.$router.push("/Main");
} else {
this.$message.error('請輸入正確用戶名或密碼!');
return false;
}
});
}
}
}
</script>
<style lang="scss" scoped>
.login-box{
width: 350px;
margin:120px auto;
border:1px solid #DCDFE6;
padding:20px;
border-radius:5px;
box-shadow:0 0 30px #DCDFE6;
}
.login-title{
text-align: center;
}
</style>8、測試網(wǎng)頁
? ? ? ? 有了上面這些操作，在npm run dev運(yùn)行后，就可以看到不錯(cuò)的登錄框效果了，文章來源：http://www.zghlxwxcb.cn/news/detail-413430.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-413430.html
到了這里，關(guān)于element ui框架（登錄窗口）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
