前言
还是写点相关指南吧，万一有问题可以参照着看一看....当然，有bug另说
基本简介
这个模板里内置了axios，element-plus，vue-router，vuex，nprogress。所以如果需要使用这些内容就不需要引入了，其中element-plus使用了自动引入所以在使用的时候和全局组件一样，直接用即可。
src文件夹说明
|- api --所有的请求分模块的写在这个文件夹里
|- assets --静态资源
|- components --全局组件
|- icons --图标文件
|- layout --layout组件
|- less --样式文件，可以单独写在组件里也可以写在这个文件夹里
--用css的语法写less文件不会有任何问题
|- mock --mock模拟数据写在这里
|- router --vue-router相关
|- utils --全局方法放在这里
|- views --路由组件文件夹
|- app.vue --额..放那里就行的文件
|- main.js --入口文件
|- permission.js --登录权限文件，其本质是一个全局路由守卫
|- 配置文件 --其余的文件几乎不用关心
icon使用
如果你需要新添加一个图标，只需要把新添加的svg文件添加到的@/icons/svg文件夹里就行了。
我们可以在项目的任何地方使用<svg-icon icon-class='***'></svg-icon>来使用icon。
ajax请求
axios进一步封装在了@/utils/request。如果你要发送某个请求，请在@/api文件夹下新建js文件，然后仿照user.js的形式书写请求。不建议直接修改或使用@/utils/request
less
在@/less/variables.less文件夹里，是一些基本的样式，你可以通过修改这些来改变layout的样式。也非常建议你把样式中的变量都写在这里。
utils
在@/utils里封装了一些常用方法，比如防抖节流、标准化时间、标准化日期、提取url中的参数等。当你有一些函数方法不止一个组件会使用到时，你就可以写在这里。
components
推荐把所以可复用的组件写在@/components里
vue相关
这里讲一下如何添加一个新的页面。
1.vue-router
首先，把你要添加的路由写在@/router/index.js里，你需要判断你的页面属于哪种页面，如果是需要权限的那就写在asyncRoutes数组，否则写在routes数组里。
{
path:路由路径||必须
name:名称||必须
redirect: 重定向||可选
component: 使用哪个组件作为页面||必须
hidden: 这个页面是否显示在sidebar
meta:{ title: '测试', icon: 'rili'，roles: ['customer']}
页面相关的信息||可选
title对于页面标题，
icon是标题旁边的图标，
roles是权限，admin为管理员，customer为普通用户
children:[ 子路由参数与前面基本一致
{
name:'xczc',
path:'dashboard',
component:() => import('@/views/profile/index'),
meta:{ title: '测试首页'}
},
{
name:'sssss',
path:'sssss',
component:() => import('@/views/dashboard/index'),
meta:{ title: 'hhhh'}
},
]
},
2.views
在views文件夹下面创建相应的组件，然后写对应的页面和功能。
3.vuex
如果你需要用到vuex（很多时候是用不到的），那么你只需要仿照@store/modules下的文件写相关代码，然后直接使用即可。
举个栗子
我们需要一个借书页面，那么首先我们在@/views文件夹下面创建borrow文件夹，这是一个需要用户权限的路由，所以我们在@/router里的asyncRoutes数组里添加
{
path: '/borrw',
component: Layout,
redirect: '/borrow/index',
name: 'borrow',
meta: {
title: 'borrow',
icon: 'borrow',
roles: ['customer'] // you can set roles in root nav
},
children: [
{
path: 'index',
component: () => import('@/views/borrow/index'),
name: 'borrowpage',
meta: {
title: 'Borrow Page',
roles: ['customer']
}
},
]
},
就可以添加borrow页面了。你想要测试页面功能，点击右上角的login in|customer就能以用户视角登录
