1.使用vue ui创建项目
勾选router和啥?忘了
启动看一下啊
然后在idea中打开就可以了
2.安装element-ui
cnpm install element-ui --save
然后我们打开项目src目录下的main.js,引入element-ui依赖。
import Element from 'element-ui'
import "element-ui/lib/theme-chalk/index.css"
Vue.use(Element)
3.为项目配置run npm的快捷设置
脚本应该时serve
4.安装axios
安装命令:cnpm install axios --save
然后同样我们在main.js中全局引入axios。
import axios from 'axios'
Vue.prototype.$axios = axios //
5. //TODO 安装normalize.css
https://www.cnblogs.com/wangchangli/p/11414092.html
试了一下normalize导致vue中的样式失效。
6.页面路由
有关动态加载菜单://TODO
有关路由中的hidden:
https://segmentfault.com/q/1010000010569568
https://segmentfault.com/a/1190000009506097#articleHeader10
(1)嵌套路由
a.嵌套路由的作用:
继承父路由的组件:在父路由对应的组件中,子路由需要填充的地方加上<router-view></router-view>
b.嵌套路由的使用:
如下:父路由user/index.vue
<template>
<div>
hello
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "index"
}
</script>
<style scoped>
</style>
子路由:
user/login/index
<template>
<div>
user/login
</div>
</template>
<script>
export default {
name: "login"
}
</script>
<style scoped>
</style>
router/index.js中
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/user', //报销系统主页
component: () => import('@/views/user/index'),
children: [
{
path: 'login',
component: () => import('@/views/user/login/index')
}
]
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
测试:
/user
user/ogin
7.//TODO路由权限拦截
8.//TODO 动态路由添加
https://www.jb51.net/article/142955.htm
9. 在src中创建api文件夹,存放前端向后端发请求的
//todo
10.登录页面编写:
(1)直接复用mall项目的login
a.需要添加的依赖:
b.额外添加的:
style:全局css
在main.js中加入:import '@/styles/index.scss' // global css
添加一些util
svg图标的添加以及不显示的解决方法:
vue-cli4项目中使用svg图标
调用了:
$store.dispatch(Login)
最终会分发给
store/index.js中的action
import时候遇到的坑:
要加{}
https://blog.csdn.net/u013675978/article/details/103901237
配置前后端api的端口号:
前端中:
整个前端请求流程:
- 调用$store.dispatch(“Login”),分派给store.js中的action中的Login()做
- Login()调用api/login中的login()做。注意因为login是一个函数,所以import的时候要加花括号,如:
import {login} from '@/api/login'
login()再调用utils/request