html整合vue elementui,Vue 整合 element-ui

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 前方施工