element-ui 安装
npm i element-ui -S
安装 css 之类的相关的依赖
npm install sass-loader@7.3.1 node-sass --save-dev
引入使用
标红色的部分是引入的代码. 在项目的 main.js 里面
//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*/
newVue({
el:\'#app\',
router,
components: {App},
template:\'\',
render: h=>h(App)
})
简单的登录页面实现以及校验功能
主要是使用 element-ui 的form 组件功能的验证以及一些消息提示
欢迎登录
登录
exportdefault{
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) {this.$router.push("/main")
}else{this.$message({
message:\'用户名或者密码未填\',
type:\'warning\'});return false;
}
});
},
}
}
.login-box{width:350px;margin:150px auto;border:1px solid #DCDFE6;padding:20px;border-radius:5px;box-shadow:0 0 30px #DCDFE6;
}.login-title{text-align:center;
}
展示效果
校验失败的提示效果, 成功后就自动跳转到 /main 页面, 即首页页面的组件
首页简单实现布局以及相关子路由
布局
基于官方的示例, 实现一个简单的左侧导航栏, 右侧内容展示, 头部展示一个title 的一个布局
相关代码
main.vue
main 组件还是用 element-ui 的相关方法来拼
羊驼产品
羊驼型号
羊驼列表
羊驼园区
园区分布
园区列表
用户中心
退出登录
admin
exportdefault{
name:"Main"}
.el-header{background-color:#B3C0D1;color:#333;line-height:60px;
}.el-aside{color:#333;
}
index.js 的路由
/main 下的子路由用 children 来作为关键字传入
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 MemberType from"../views/Member/MemberType";
Vue.use(Router)
exportdefault newRouter({
routes: [
{
path:\'/login\',
name:\'Login\',
component: Login
},
{
path:\'/main\',
name:\'Main\',
component: Main,
children: [
{
path:\'/member/list\',
name: \'MemberList\',
component: MemberList
},
{
path: \'/member/type\',
name: \'MemberType\',
component: MemberType
}
]
},
]
})
--------------------orz 前方施工