一. 该项目的结构原理
├── App.vue //入口
├── api // 各种接口
├── assets // 图片等资源
├── components // 各种公共组件,非公共组件在各自view下维护
├── icons //svg icon
├── main.js //入口
├── permission.js //认证入口
├── router // 路由表
├── store // 存储
├── styles // 各种样式
├── utils // 公共工具,非公共工具,在各自view下维护
└── views // 各种layout
本质就是App.vue作为入口文件,其它所有页面都是通过router-view渲染在这上面。
第一个级别:app.vue 用来做展示,login和404,layout这些页面,默认就是以App.vue作为底。
第二个级别:layout上的mainapp.vue用来做展示,通过嵌套路由更换layout的app-main上的视图
login.vue
{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
},
main.js
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
App.vue
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
是我们的主组件,所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件
layout
layout 这个template 是一个组合组件,包含了AppMain和Navar,sidebar, 这三个都是自定义组件,
在export的components中声明之后, template中就可以直接用标签引入,比如Appmain对应</app-main>
<template>
<div :class="classObj" class="app-wrapper">
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
<sidebar class="sidebar-container" />
<div class="main-container">
<div :class="{'fixed-header':fixedHeader}">
<navbar />
</div>
<app-main />
</div>
</div>
</template>
<script>
import { Navbar, Sidebar, AppMain } from './components'
import ResizeMixin from './mixin/ResizeHandler'
export default {
name: 'Layout',
components: {
Navbar,
Sidebar,
AppMain
}
}
</script>
自定义组件
比如AppMain
<template>
<section class="app-main">
<transition name="fade-transform" mode="out-in">
<router-view :key="key" />
</transition>
</section>
</template>
<script>
export default {
name: 'AppMain',
computed: {
key() {
return this.$route.path
}
}
}
</script>
router-view
router-view和路由嵌套有关
嵌套路由, component: () => import('@/views/form/index'), from这个组件会被渲染在Layout的router-view中,虽然layout中没有直接写出来的router-view,但是app-main本质也是一个template会被替换到layout页面中,所以会被渲染在这个app-main的router-view中。
{
path: '/form',
component: Layout,
children: [
{
path: 'index',
name: 'Form',
component: () => import('@/views/form/index'),
meta: { title: 'Form', icon: 'form' }
}
]
},
二. 改造使用
1. 使用版本目前是git上的最新版本,该版本基于vue-cli 4.0
2. 登录页面login/index.vue 注释掉登录判断模块,这里直接返回true。不然每次去mock取出来判断,后面我们会将mock替换成真实地址
handleLogin() {
return true
// this.$refs.loginForm.validate(valid => {
// if (valid) {
// this.loading = true
// this.$store.dispatch('user/login', this.loginForm).then(() => {
// this.$router.push({ path: this.redirect || '/' })
// this.loading = false
// }).catch(() => {
// this.loading = false
// })
// } else {
// console.log('error submit!!')
// return false
// }
// })
}
3.将mock替换成自己的java后端
vue.config.js
proxy作为一个代理转发,开发环境中可以直接在vue中配置,生产环境还是
[process.env.] 这个是匹配到的url,都转发给target, 然后pathrewrite这里是替换成新的路径
比如: http://localhost:9258/dev-api/test 这里就替换成 http://localhost:8081/test
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
//proxy为新增的内容
proxy: {
// change xxx-api/login => mock/login
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: `http://localhost:8081`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
},
before: require('./mock/mock-server.js')
},
request.js 要将response的处理注释掉或者替换成自己的,不然会被拦截到
response => {
const res = response.data
return res
// // if the custom code is not 20000, it is judged as an error.
// if (res.code !== 20000) {
// Message({
// message: res.message || 'Error',
// type: 'error',
// duration: 5 * 1000
// })
// // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
// if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// // to re-login
// MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
// confirmButtonText: 'Re-Login',
// cancelButtonText: 'Cancel',
// type: 'warning'
// }).then(() => {
// store.dispatch('user/resetToken').then(() => {
// location.reload()
// })
// })
// }
// return Promise.reject(new Error(res.message || 'Error'))
// } else {
// return res
// }
},
暂时没必要对permession.js下手,除非要自己定义权限控制
三. 增加一个新页面
src/view 下面新增页面
src/api 下面新增axios的请求
router 增加对应url路由