vue3项目工程化-一一网

前言:

大家好，我是迷，从去年开始对vue3相关的生态升级一直很感兴趣，学习了vue3,vite,ts等等，前前后后看了很多资料，一直想着把这些技术融合使用一下，前不久独立搭建了一个后台管理系统，现分享一下搭建项目的过程和心得，第一次写文章, 写的不好，多体谅，欢迎大家讨论和分享。

有北京招web前端的麻烦私信一下我，谢谢。

1.npm init @vitejs/app admin

2.选择 vue

3.选择 TypeScript

editorconfig:
1. 根目录下新建 .editorconfig 文件,内容如下
2. vscode 下载 EditorConfig for VS Code 插件
prettier:
1. npm i prettier -D
2. 根目录下新建 .prettierrc 文件,内容如下
3. vscode 下载 Prettier – Code formatter 插件
eslint:
1. npm i eslint -D
2. npx eslint –init 然后根据实际情况选择,规则建议选择Airbnb,可根据需求添加vue3相关规则
3. vscode 下载 ESLint 插件
4. 在 src 下新建 .vscode 文件夹，文件夹内容如下(vscode可直接新建.开头的文件夹)
解决prettier和eslint冲突:
1. npm i eslint-plugin-prettier eslint-config-prettier -D
2. 更改 .eslintrc.js

commitizen
1. npm install commitizen -D
2. npx commitizen init cz-customizable -D –save-exact
3. 根目录下新建 .cz-config.js 文件,内容如下
commitlint
1. npm i @commitlint/config-conventional @commitlint/cli -D
2. 根目录下新建 commitlint.config.js 文件,内容如下
3. npx husky add .husky/commit-msg “npx –no-install commitlint –edit $1”
4. 集成commit命令

npm i element-plus -S sass -D
样式配置: 在 src 下新建 style 文件夹，文件夹内容如下
element-plus按需加载,请使用 vite-plugin-style-import 或 vite-plugin-imp
vite打包的时候会自动tree shaking组件，多余的样式在gzip(vite-plugin-compress)之后就小了,可根据自己情况来选择按需或全量导入

主题定制:

注意事项: 引入 scss 的时候~会导致 vite 报错，解决方法在vite.config.ts 配置。(—————坑——————)

variables.scss: vite.config.ts 全局注入，可在组件 style 里面直接使用

variables.module.scss: 命名需要 module 关键字，要不:export 导出为空。(—————坑——————)

拆分 variables.module.scss 和 variables.scss,是因为同时引入一个文件,vite 会报错，所以想到了这个方法做拆分。(—————坑——————)

3.定义: 在 src 下新建 api 文件夹，内容如下

刚开始从iconPark下载的svg，代码里面注入了颜色,导致自己在使用时改变颜色一直不生效,一度很自闭,后来发现了，然后从iconFont下载的就没啥问题了。(—————坑——————)

补充说明：(——————坑——————)

封装面包屑导航的时候建议过滤error这种情况
顶端布局面包屑左对齐，个人信息右对齐的时候使用了justify-content: space-between,死活无法两端对齐,一度很自闭，都准备改成浮动处理,后来发现是因为el-row默认添加了::before和::after。
内容区域做溢出滚动效果,父盒子用上了height:calc(100% – 60px),套了el-scrollbar，页面内容溢出可以滚动但是看不到滚动条,但是给固定的height:600px;就可以显示滚动条,当时准备用js获取可视高度减去顶栏高度的做法，但是觉得吧,css能解决的问题就不要js解决，显得不够优雅，然后我想到视口,用height:calc(100vh – 60px)解决了。