(1). 官网
(2). 创建项目
lixin-macbook:Desktop lixin$ vue-init webpack vue-elementui
? Project name vue-elementui
? Project description A Vue.js project
? Author xxxx@126.com
? Vue build standalone
? Install vue-router? No //自己安装路由
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
mended) npm
(3). 安装模块
# 安装axios
lixin-macbook:vue-elementui lixin$ cnpm install axios --save
# vue-router
lixin-macbook:vue-elementui lixin$ cnpm install vue-router --save
# element-ui
lixin-macbook:vue-elementui lixin$ cnpm install element-ui --save
# saas加载器(最新版本8.X好像有问题)
lixin-macbook:vue-elementui lixin$ npm install sass-loader@7.3.1 node-sass@4.14.1 --save-dev
(4). axios与Vue整合
main.js
// 导入axios
import axios from 'axios'
// 声明使用axios
Vue.prototype.axios=axios;
config/index.js(配置反向代理)
proxyTable: {
"/devApi" : {
target:'http://localhost:9090',
pathRewrite:{
'^/devApi':''
},
changeOrigin:true,
secure : false
}
}
UserModify.vue
getData:function(id){
let url = "http://localhost:8080/devApi/user/" + id ;
this.axios({
method : "GET",
url : url
}).then((res)=>{
if(res.status == 200){
this.from = res.data;
}
}).catch((err)=>{
console.log(err);
});
}
(5). ElementUI与Vue整合
main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
new Vue({
el: '#app',
router,
// 改成:render: h => h(App)
render: h => h(App)
})
App.vue
<template>
<div id="app">
<!-- 配置路由组件 -->
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
</style>
Login.vue
<template>
<div>
<!-- ref:相当于ID model:v-bind:model="from" -->
<el-form ref="form" :model="form" :rules="rules" class="login-box">
<h3 class="login-title">欢迎登录</h3>
<el-form-item label="用户名:" prop="userName">
<el-input placeholder="请输入用户名" v-model="form.userName"></el-input>
</el-form-item>
<el-form-item label="密码:" prop="password">
<el-input placeholder="请输入密码" v-model="form.password" show-password>></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('form');">登录</el-button>
<el-button @click="onCancel('form');">取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name : "Login",
data() {
return {
form: {
userName : '',
password : '',
},
rules: {
// 这里的名称要与prop定义要相同
userName: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
}
}
},
methods : {
onSubmit(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
// 跳转到首页:/main
// this.$router.push("/main");
// 跳转到首页,并传递参数:name:Main是router/index.js中指定的Name.
this.$router.push({name:'Main',params:{ userName : this.form.userName } });
} else {
// 发送警告消息.
this.$message({message: '请输入用户名或者密码',type: 'warning'});
return false;
}
});
},
onCancel(formName){
this.$refs[formName].resetFields();
}
}
}
</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>
Main.vue
<template>
<div>
<el-container>
<!-- <el-aside>：侧边栏容器开始 -->
<el-aside width="200px">
<el-menu :default-openeds="['1']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-setting"></i>用户管理</template>
<el-menu-item-group>
<el-menu-item index="1-1">
<router-link to="/user/add">添加用户</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<!-- <router-link to="/user/modify/1">修改用户</router-link> -->
<router-link :to="{name:'UserModify',params:{id:2}}">修改用户</router-link>
</el-menu-item>
<el-menu-item index="1-4">
<router-link to="/user/list">查看用户列表</router-link>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>角色管理</template>
<el-menu-item-group>
<el-menu-item index="1-1">添加角色</el-menu-item>
<el-menu-item index="1-2">修改角色</el-menu-item>
<el-menu-item index="1-3">删除角色</el-menu-item>
<el-menu-item index="1-4">查看角色列表</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<!-- <el-aside>：侧边栏容器结束 -->
<!-- 创建新的容器开始 -->
<el-container>
<!-- <el-header>:顶栏容器开始 -->
<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>
<router-link to="/logout">退出登录</router-link>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span></span>
</el-header>
<!-- <el-header>:顶栏容器结束 -->
<!-- <el-main>：主要区域容器开始 -->
<el-main>
<router-view/>
</el-main>
<!-- <el-main>：主要区域容器结束 -->
</el-container>
<!-- 创建新的容器结束 -->
</el-container>
</div>
</template>
<script>
export default {
props : ['userName'] ,
name : "Main",
data() {
return {
}// end return
}
}
</script>
<style lang="scss" scoped>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 30px;
}
.el-aside {
color: #333;
}
</style>
