这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天
项目配置
当前nuxt基本配置：
eslint
prettier
element-plus
项目的安装，略，这个在官网中就能找到。另外bing也能搜索到安装方法。
需要注意的是安装的是nuxt2还是nuxt3.我们队使用的是nuxt3.本文也是基于nuxt3的
中文文档连接：Nuxt中文站 - 易懂的Web框架 Nuxt3文档
项目需要多人合作，由于每个人的代码风格或者编辑器的设置不一样。所以使用eslint和prettier进行代码规范。这里也能bing搜索到相关的方法。每个队伍的代码风格也不一样，这里就不放设置代码了。
element-plus安装
使用了nuxt官网提供的插件 Element-plus Module · Nuxt
很方便的自动导入功能，有按需导入，不需要在每个.vue代码中手动import了。
使用
npm i @element-plus/nuxt -D
//或者
yarn add @element-plus/nuxt
进行安装。
安装后需要在nuxt.config.ts中加入
export default defineNuxtConfig({
modules: ['@element-plus/nuxt'],
})
还有一些功能选项参考Element-plus Module · Nuxt
接下来是我在开发中遇到的问题
问题
问题1 路由跳转
任务分配后，每个人都几乎都分到了需要画的UI组件。为了使提交合并的时候组件不会挤在一起。我使用了路由守卫的功能。
根据nuxt文档给出的目录结构，需要在主目录创建一个middleware文件夹，在该文件夹下面创建一个routerMonitor.global.ts文件。
文件内容如下
// 路由守卫， 实现重定向 https://nuxt.com.cn/docs/guide/directory-structure/middleware#format
export default defineNuxtRouteMiddleware(to => {
if (to.fullPath === '/') {
// 重定向
return navigateTo('/xxx')
}
})
由于我只需要一个路由跳转，于是就只写了一个navigateTo方法跳转到http://xxxx.xx.xxx/xxx。这样nuxt会将默认页面跳转到/home中。于是就能够在home.vue文件中进行内容编写了。
这里的home文件被放到了pages文件夹中。
另外： 还有abortNavigation()是终止导航 相关的信息能够在文档中看到。middleware/ · Nuxt Directory Structure
问题2 elemnet的memuCSS修改
使用element-plus画出简单的UI页面不难。但是对于萌新的我来说。CSS的修改还是踩了坑。
刚开始修改的时候使用的是标签名进行修改，有部分生效了，还有一部分一直不生效。
在页面中我使用的是
<style lang="less" scoped>的方法。样式只会在当前页面生效。
后面无奈使用了devtools工具检查页面的CSS。然后筛选页面中的CSS进行修改。修改成功了。这些都算不上多难的问题。
最坑爹的是伪类。element-ui中的menu标签的:focus和:hover会对所选的item进行一个蓝色背景的填充。这个很简单就找出来了。
消除过后，还有一条底边框线蓝色的找了很久。它既不是actived也不是其他东西。纯纯折磨。
后面发现他是一个叫
.el-menu--horizontal>.el-menu-item.is-active下的border-bottom,也许是我经验不足。没有马上找到。现在想起来似乎好像也就那么回事。
还有一点，也是找了很久。一个transition使得底边框线点击事件后还在。
在.el-menu.item中将transition设置为none。就能消除这个效果。
结尾
本文主要记录一下在开发项目中遇到的问题以及自己是如何解决的。虽然细微但是我觉得对我来说仍然是有需要注意到的点。
引用参考：
