第二周——3 前端项目骨架搭建

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的端口号:

前端中：

整个前端请求流程：

1. 调用$store.dispatch(“Login”),分派给store.js中的action中的Login()做
2. Login()调用api/login中的login()做。注意因为login是一个函数，所以import的时候要加花括号，如：import {login} from '@/api/login'
   login()再调用utils/request