router 管理组件 在index.vue
api 管理 接口，获取后暴露出来 $http
store vuex 统一管理数据状态 user 和 menu $store.state.user.info
app.vue 为主业渲染
login.vue 为注册页渲染

logoin

webpack 配置

var path = require('path')
var webpack = require('webpack')module.exports = {entry:{'main': './src/main.js','login': './src/login.js'},output: {path: path.resolve(__dirname, './dist'),publicPath: '/dist/',filename: '[name].js'},

进来打包的
和打包出去的, to dir
/dist
npm run build

logo.vue with element

logo.js import element-ui

import Vue from 'vue'
import resource from 'vue-resource'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import login from './login.vue'Vue.use(resource)
Vue.use(ElementUI);new Vue({el: '#app',render: h => h(login)
})

字体格式的配置
weppack ttf

{test: /\.(png|jpg|gif|svg|ttf|woff)$/,loader: 'file-loader',options: {name: '[name].[ext]?[hash]'}}

<template><div id=""><div style="width: 500px;margin: 0 auto;padding-top:200px"><el-form ref="form" :model="login" label-width="80px"><el-form-item label="账号"><el-input v-model="login.user"></el-input></el-form-item><el-form-item label="密码"><el-input v-model="login.pass"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">登录</el-button></el-form-item></el-form></div></div>
</template><script>import {http,login} from './api/api.js'export default {data() {return {login: {user: '',pass: ''}}},methods: {//登录事件onSubmit() {//最简单的一个验证if(this.login.user ==''){this.$message.error('请输入账号');}else if(this.login.pass ==''){this.$message.error('请输入密码');}else{//登录的ajaxthis.$http.post(http+login,{username:this.login.user,password:this.login.pass},{emulateJSON:true}).then((data)=>{console.log(data)if(data.data.msg == '用户名或密码错误'){this.$message.error('用户名或密码错误');}else if(data.data.msg == '成功'){localStorage.token = data.data.data.tokenlocation.href = './'}},(err)=>{this.$message.error('登录失败');})}}}}
</script><style>*{margin: 0;padding: 0;}html,body{width: 100%;height: 100%;}body{background: url(./assets/1.jpg);background-size: 100% auto;}
</style>

登录交互

element

alert 提示使用

交互逻辑

输入为空
输入错误
输入校验正确
token 正确
跳转到首页开始

methods: {//登录事件onSubmit() {//最简单的一个验证if(this.login.user ==''){this.$message.error('请输入账号');}else if(this.login.pass ==''){this.$message.error('请输入密码');}else{//登录的ajaxthis.$http.post(http+login,{username:this.login.user,password:this.login.pass},{emulateJSON:true}).then((data)=>{console.log(data)if(data.data.msg == '用户名或密码错误'){this.$message.error('用户名或密码错误');}else if(data.data.msg == '成功'){localStorage.token = data.data.data.tokenlocation.href = './'}},(err)=>{this.$message.error('登录失败');})}}}}

登录的插件 ajax

vue-resource 记录 package.json 记录使用的插件

api.js 统一管理 接口

判断用户登录状态

main,js 全局

import Vue from 'vue'
import resource from 'vue-resource'
import echarts from 'echarts'
import store from './store/index.js'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router/router.js'
import App from './App.vue'//把echarts 添加到vue实例中
Vue.prototype.$echarts = echartsVue.use(resource)
Vue.use(ElementUI);//判断有没有登录//拦截器
Vue.http.interceptors.push((request, next) => {//设置token请求头if(localStorage.token) {//设置token请求头Vue.http.headers.common['Authorization'] = localStorage.token} else {location.href = './login.html'}next((response)=>{if(response.status == 401){location.href = './login.html'}return response})
})new Vue({el: '#app',store,router,render: h => h(App)
})

根据后端接口请求到的token

container 布局容器

<template><div id="app"><el-container><el-aside style="width: auto;"><!--导航--><el-menu :default-active="$route.path" class="el-menu-vertical-demo" text-color="#fff" :collapse="isCollapse" v-if="$store.state.menu.menu && $store.state.user.info" router><el-menu-item index="/"><i class="el-icon-location"></i><span slot="title">首页</span></el-menu-item><el-submenu v-for="i in $store.state.menu.menu" :key="i.uid" :index="i.path"><template slot="title"><i :class="icontype[i.id]"></i><span slot="title">{{i.name}}</span><!--{{i.name}}{{i.path}}--></template><el-menu-item v-for="a in i.children" :key="a.uid" :index="a.path" :disabled="$store.state.user.info.permissions.indexOf(a.path) == -1"><i :class="icontype[a.id]"></i><span slot="title">{{a.name}}</span></el-menu-item></el-submenu></el-menu><!--导航结束--></el-aside><el-main v-if="$store.state.user.info&&$store.state.user.menulist"><div style="height: 50px;line-height: 50px;background:#ccc;"><el-row type="flex" class="row-bg" justify="center"><el-col :span="12"><div><el-radio-group v-model="isCollapse" style="margin-bottom: 20px;padding-top:5px;padding-left:10px"><el-radio-button :label="false">展开</el-radio-button><el-radio-button :label="true">收起</el-radio-button></el-radio-group></div></el-col><el-col :span="12"><div style="text-align: right;padding-right: 40px;">当前账号：<router-link to="/info" style="color: deepskyblue;">{{$store.state.user.info.profile.name}}	</router-link></div></el-col></el-row></div><div style="padding: 20px;background:rgba(0,0,0,0.3);min-height:600px;position: relative;"><router-view></router-view></div></el-main></el-container></div>
</template>

用于布局的容器组件，方便快速搭建页面的基本结构：

：外层容器。当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列。

：顶栏容器。

：侧边栏容器。

：主要区域容器。

：底栏容器。

navigation data load

app.vue

<script>import { http, listForRouter, info,menulist} from './api/api.js'export default {name: 'app',data() {return {isCollapse: false,icontype: {1: 'el-icon-setting',2: 'el-icon-tickets',4: 'el-icon-user',12: 'el-icon-s-custom',21: 'el-icon-s-check',17: 'el-icon-menu',22: 'el-icon-collection',41: 'el-icon-s-order',46: 'el-icon-document-add',42: 'el-icon-document',45: 'el-icon-folder-opened'}}},mounted() {this.getmenu()this.getinfo()this.getlist()},methods: {//获取操作功能信息getlist(){this.$http.get(http + menulist).then((data) => {var data = data.data.datavar json = {}//循环父级for(var i=0;i<data.length;i++){var child = data[i].children//循环子级for(var a=0;a<child.length;a++){this.$set(json,child[a].url,child[a].children)}}//存储到vuex 中this.$store.commit('setmenulist',json)}, (err) => {this.$message.error(err.data.message);})},//获取导航getmenu() {this.$http.get(http + listForRouter).then((data) => {//修改导航状态树this.$store.commit('setmenu', data.data.data)}, (err) => {this.$message.error(err.data.message);})},//获取当前账号信息getinfo() {this.$http.get(http + info).then((data) => {//修改账号状态树this.$store.commit('setinfo', data.data.data)}, (err) => {this.$message.error(err.data.message);})}}}
</script>

vuex管理

main.js store

import Vue from 'vue'
import resource from 'vue-resource'
import echarts from 'echarts'
import store from './store/index.js'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router/router.js'
import App from './App.vue'//把echarts 添加到vue实例中
Vue.prototype.$echarts = echartsVue.use(resource)
Vue.use(ElementUI);//判断有没有登录//拦截器
Vue.http.interceptors.push((request, next) => {//设置token请求头if(localStorage.token) {//设置token请求头Vue.http.headers.common['Authorization'] = localStorage.token} else {location.href = './login.html'}next((response)=>{if(response.status == 401){location.href = './login.html'}return response})
})new Vue({el: '#app',store,router,render: h => h(App)
})

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

export default {state:{menu:''},mutations:{//修改导航setmenu(state,data){state.menu = data}}
}

menu.js

//获取导航getmenu() {this.$http.get(http + listForRouter).then((data) => {//修改导航状态树this.$store.commit('setmenu', data.data.data)}, (err) => {this.$message.error(err.data.message);})},

导航icon

先console 每个栏目名的 id 给对应id 绑定 icon

<el-submenu v-for="i in $store.state.menu.menu" :key="i.uid" :index="i.path"><template slot="title"><i :class="icontype[i.id]"></i><span slot="title">{{i.name}}</span><!--{{i.name}}{{i.path}}--></template><el-menu-item v-for="a in i.children" :key="a.uid" :index="a.path" :disabled="$store.state.user.info.permissions.indexOf(a.path) == -1"><i :class="icontype[a.id]"></i><span slot="title">{{a.name}}</span></el-menu-item></el-submenu>

账号权限

//获取当前账号信息getinfo() {this.$http.get(http + info).then((data) => {//修改账号状态树this.$store.commit('setinfo', data.data.data)}, (err) => {this.$message.error(err.data.message);})}

api,js 获取后端接口

创建 user.js

export default {state:{info:'',menulist:''},mutations:{//修改当前账号信息setinfo(state,data){state.info = data},//设置功能权限setmenulist(state,data){state.menulist = data}}
}

disabled

<template><div id="app"><el-container><el-aside style="width: auto;"><!--导航--><el-menu :default-active="$route.path" class="el-menu-vertical-demo" text-color="#fff" :collapse="isCollapse" v-if="$store.state.menu.menu && $store.state.user.info" router><el-menu-item index="/"><i class="el-icon-location"></i><span slot="title">首页</span></el-menu-item><el-submenu v-for="i in $store.state.menu.menu" :key="i.uid" :index="i.path"><template slot="title"><i :class="icontype[i.id]"></i><span slot="title">{{i.name}}</span><!--{{i.name}}{{i.path}}--></template><el-menu-item v-for="a in i.children" :key="a.uid" :index="a.path" :disabled="$store.state.user.info.permissions.indexOf(a.path) == -1"><i :class="icontype[a.id]"></i><span slot="title">{{a.name}}</span></el-menu-item></el-submenu></el-menu><!--导航结束--></el-aside><el-main v-if="$store.state.user.info&&$store.state.user.menulist"><div style="height: 50px;line-height: 50px;background:#ccc;"><el-row type="flex" class="row-bg" justify="center"><el-col :span="12"><div><el-radio-group v-model="isCollapse" style="margin-bottom: 20px;padding-top:5px;padding-left:10px"><el-radio-button :label="false">展开</el-radio-button><el-radio-button :label="true">收起</el-radio-button></el-radio-group></div></el-col><el-col :span="12"><div style="text-align: right;padding-right: 40px;">当前账号：<router-link to="/info" style="color: deepskyblue;">{{$store.state.user.info.profile.name}}	</router-link></div></el-col></el-row></div><div style="padding: 20px;background:rgba(0,0,0,0.3);min-height:600px;position: relative;"><router-view></router-view></div></el-main></el-container></div>
</template>