前言
大多时候是在别人搭建好的项目上开发需求,突然要自己从新项目搭建开始,纯纯赶鸭子上架,参考一些项目,试着搭建的,记录一下历程,主要怕忘了。有些地方本该贴上代码截图更好,但是我此刻手头没有启动代码,所以重在分享一个思路历程吧,某个环节的具体实现可以上网搜下。
技术选择
首先要确定我们用哪些技术、组件库等等,这里我搭建的选择是:Vue3、Typescript、Vite、Element Plus、Axios、scss、Echart。
过程
创建项目
在命令行窗口执行以下命令可以创建基础项目,自己自定义选择,如果执行命令报错,检查下node版本是否过低,升级到18+再试。
npm create vue@latest
安装三方插件
接下来要安装一些必须的插件:UI组件库、http请求库、css样式库
Element Plus安装和使用
安装命令如下,安装完要在main.ts中引入才能使用,别忘记还要引入它的样式文件。
npm install element-plus --save
Axios安装和使用
调接口我用的比较多的就是axios了。安装完成后,一般会封装一个request.ts文件,用来编写请求拦截器和响应拦截器以及接口请求地址。再把要用的接口封装到一个或多个单独的文件api.ts里,api.ts会引用request.ts ,为每一个接口定义一个方法并导出,页面上用的时候就可以直接调用api.ts里的方法了,这样通过api.ts统一管理我们用的接口就很好。
axios请求拦截器:通过可以统一为接口请求添加token等一些请求头
axios响应拦截器:拦截错误码401 500 404等统一给出提示或跳转处理,优化用户体验。
npm install axios
scss安装和使用
样式库一般用的也比较多,scss、less都行,可以方便我们写嵌套样式,所以装上一个。
npm install -D sass sass-loader
其余的插件
到这里就是看自己需不需要用的插件了,没有也行。推荐几个吧。
unplugin-vue-router安装和使用
这个是可以自动生成路由的,一般我们新建一个页面就要去route目录下定义一条路由配置,这个插件只要你在src\pages目录下新建的vue组件,它可以按照层级自动生成路由配置。比如src\pages\login.vue 直接能通过/login访问这个页面,不用手动去定义这个/login的路由。
npm i -D unplugin-vue-router
Echart安装和使用
如果项目里需要画图表,那就装上吧。
在要用的页面import导入才能用哦,而且重点是显示图表的div一定要设置height和width才能生效。我记得我主页好像也有一篇用echart的文章。Vue2项目引用echart插件_npm install echarts --save-CSDN博客
npm install echarts --save
Layout布局
要用的插件装完,就开始布局整体页面结构了,页面、菜单、路由这三个是相关联的,我感觉这里还是有点讲究的,我做的是一个管理系统,所以顶部导航栏、侧边菜单栏以及底部这部分就是公用的,通过route的配置,我们可以实现每个页面都继承这部分公共的内容。
就上面这个效果来布局,首先新建一个layout.vue组件,它的内容就是上面的布局代码,这个要自己写,我用的是elementplus里的el-container布局容器划分结构的,当前页面的那个区域我们只需要定义一个<router-view>标签,它会根据当前访问的路由动态渲染出对应的页面,往下我们看看路由怎么个配置法。
我们定义根路由/指向这个layout.vue组件,然后所有基于这个layout布局的页面的路由都定义在根路由/的children子路由里,这样就可以实现我们访问某个页面的路由,这个布局结构依然在的。
权限设置
权限系统在前端项目里也是必须的,我总结了三种权限,从我以往接触的项目经验里。
路由权限
路由权限例如我们访问了一个不存在的路由,会页面空白,一般会定义一些通用的异常页面,比如404页面,出现这种情况我们就默认跳转到/404页面了。
在路由拦截器router.beforeEach()里,可以对一些路由进行拦截,加入特定的逻辑。
未登录的话跳转登录页面等等
无权限的话跳转无权限页面等等
菜单权限
菜单就是我上图的侧边栏的Sidebar区域的数据,一般用户角色不同看到的菜单项是不一样的,需要前端和后端配合完成这个权限的设置。
我的方法是:菜单点击是要跳转对应的路由的,所以菜单项跟路由表是相对应的,默认我们遍历路由表的配置,显示所有的菜单,然后根据接口返回的当前用户角色的菜单列表进行比对,没返回的就隐藏掉。
1. 路由表渲染菜单项,通过meta属性配置菜单名称、icon等
2. 要跟后台为每个菜单约定一个唯一标识,例如后台返回菜单id是user, 前端user路由可以在meta属性里配置一个id:user,这样比对的时候就是查找前端菜单list里id为user的接口是否返回,没有返回说明这个菜单没有权限查看,需要隐藏。
3. Sidebar一般用el-menu组件实现菜单
菜单的层级根据路由表是否有children属性,如果有那这个菜单就要渲染成下拉菜单。嵌套路由这里涉及递归组件调用了。我们需要封装一个sidebar组件。(参考开源项目RuoYi-Vue3)
按钮权限
如果页面上的一些操作按钮也针对不同用户角色开放,那就跟后台约定操作按钮的权限标识id,前端缓存(localstorage)接口返回的当前所有的权限id list,在页面上判断指定的id是否存在,存在则表示需要显示该按钮。
总结
参考了很多的项目的框架思路,最终输出了上面的方案,也是我才学会的一种,才在初步搭建的阶段,还有很多需要完善的。若依开源框架挺全面的,可以下载代码RuoYi-Vue3的代码看看,附上链接。