002-VUE+ElementUI实现登录页面
002-VUE+ElementUI实现登录页面一、整合ElementUI1.创建一个名为 vue-elementui 的工程2.安装依赖二、登录页面1、创建首页视图2、创建登录页视图4、路由配置文件5、 测试运行三、创建嵌套视图组件1、创建嵌套vue1.用户信息组件2.用户列表组件2、添加路由如果还没有下载node请看:001-vue入门一、整合ElementUI1.创建一个名为 vue-elem
002-VUE+ElementUI实现登录页面
如果还没有下载node请看:001-vue入门
一、整合ElementUI
1.创建一个名为 vue-elementui 的工程
# 使用 webpack 打包工具初始化一个名为 vue-elementui 的工程
vue init webpack vue-elementui
2.安装依赖
安装 vue-router 、element-ui 、sass-loader 和 node-sass 四个插件
进入工程目录
cd vue-elementui
安装 vue-router
npm install vue-router --save-dev
安装 element-ui
npm i element-ui -S
安装 SASS 加载器
npm install sass-loader@7.3.1 node-sass --save-dev
安装项目所有依赖
npm install
assets:用于存放资源文件
components:用于存放 Vue 功能组件
views:用于存放 Vue 视图组件
router:用于存放 vue-router 配置
- 安装成功后:>npm run dev 运行即可
在浏览器打开 http://localhost:8080 你会看到如下效果。说明项目以及创建成功了
二、登录页面
在elm官网中,可以快速生代码
1、创建首页视图
在 views 目录下创建一个名为 Main.vue 的视图组件;该组件在当前章节无任何作用,主要用于登录后展示登录成 功的跳转效果
<template>
<div>
<el-container>
<el-aside width="200px">
<el-menu :default-openeds="['1']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>会员管理</template>
<el-menu-item-group>
<el-menu-item index="1-1">
<router-link :to="{name:'MemberLevel',params:{id:3}}">会员等级</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<router-link to="/member/list">会员列表</router-link>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-message"></i>商品管理</template>
<el-menu-item-group>
<el-menu-item index="2-1">商品分类</el-menu-item>
<el-menu-item index="2-2">商品列表</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>用户中心</el-dropdown-item>
<el-dropdown-item>退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>{{$store.getters.getUser.name}}</span>
</el-header>
<el-main>
<router-view />
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
name: 'Main'
}
</script>
<style scoped>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
2、创建登录页视图
在 views 目录下创建一个名为 Login.vue 的视图组件,其中 el-* 的元素为 ElementUI 组件
<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 type="text" placeholder="请输入用户名" v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" placeholder="请输入密码" v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('form')">登录</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: 'blur'
}]
}
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
sessionStorage.setItem('isLogin','true');
this.$store.dispatch("asyncUpdateUser",{name:this.form.name});
this.$router.push({name:'Main',params:{name:this.form.name}});
} else {
this.$message({
message: '用户名或密码错误',
type: 'warning'
});
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>
4、路由配置文件
在 router 目录下创建一个名为 index.js 的 vue-router 路由配置文件
import Vue from 'vue'
import Router from 'vue-router'
import Login from '../views/Login'
import Main from '../views/Main'
import MemberList from '../views/Member/MemberList'
import MemberLevel from '../views/Member/MemberLevel'
import NotFound from '../views/NotFound'
Vue.use(Router);
export default new Router({
mode:'history',
routes:[
{
// 登录页
path:'/login',
name:'Login',
component:Login
},
{
// 首页
path:'/main',
name:'Main',
component:Main,
children:[
{
// 会员列表
path:'/member/list/',
name:'MemberList',
component:MemberList
},
{
// 会员等级
path:'/member/level/:id',
name:'MemberLevel',
component:MemberLevel,
props:true
}
]
},
{
path:'/goMain',
redirect:'/main'
},
{
path:'*',
component:NotFound
}
]
})
5、 测试运行
npm run dev
三、创建嵌套视图组件
在elm官网中,可以快速生代码
1、创建嵌套vue
在src/views/Member创建*.vue (有几个嵌套创建几个vue)
1.用户信息组件
在 views/members 目录下创建一个名为 MemberLevel.vue 的视图组件;该组件在当前章节无任何作用,主要用于 展示嵌套效果;
<template>
<div>
会员等级 ID={{id}}
</div>
</template>
<script>
export default {
props: ['id'],
name: 'MemberLevel',
beforeRouteEnter: (to, from, next) => {
console.log("进入会员等级页面");
next(vm => {
vm.getData();
});
},
beforeRouteLeave: (to, from, next) => {
console.log("离开会员等级页面");
next();
},
methods: {
getData: function() {
this.axios({
method: 'get',
url: 'http://localhost:8080/data.json',
}).then(function(repos) {
console.log(repos);
}).catch(function(error) {
console.log(error);
});
}
}
}
</script>
<style>
</style>
2.用户列表组件
在 views/members 目录下创建一个名为 MemberList.vue 的视图组件;该组件无任何作用,主要用于展示嵌套效 果;
<template>
<div>
会员列表
</div>
</template>
<script>
export default{
name:'MemberList'
}
</script>
<style>
</style>
2、添加路由
{
// 首页
path:'/main',
name:'Main',
component:Main,
children:[
{
// 会员列表
path:'/member/list/',
name:'MemberList',
component:MemberList
},
{
// 会员等级
path:'/member/level/:id',
name:'MemberLevel',
component:MemberLevel,
props:true
}
]
},
更多推荐
所有评论(0)