Vue.js
vue3项目工程化__Vue.js
发布于 3 年前 作者 banyungong 1249 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

前言:

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

其他:

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

项目相关:

编码工具: vscode + volar(script+setup+ts)

项目地址: admin(github访问慢?)

主要技术: vue3 + typescript + vite + element-plus + sass + axios + vue-router + pinia(pinia,vuex5)

其他技术: echarts + wangeditor + xlsx

代码规范: editorConfig + prettier + eslint

代码校验和提交规范: husky + lint-staged + commitizen + commitlint

生成更新日志: conventional-changelog-cli

项目目录:

image.png

项目搭建:

1.项目基础

1.npm init @vitejs/app admin

2.选择 vue

3.选择 TypeScript

2.集成 editorconfig + prettier + eslint

  • editorconfig:

    1. 根目录下新建 .editorconfig 文件,内容如下

      image.png

    2. vscode 下载 EditorConfig for VS Code 插件

  • prettier:

    1. npm i prettier -D

    2. 根目录下新建 .prettierrc 文件,内容如下

      image.png

    3. vscode 下载 Prettier - Code formatter 插件

  • eslint:

    1. npm i eslint -D

    2. npx eslint --init 然后根据实际情况选择,规则建议选择Airbnb,可根据需求添加vue3相关规则

    3. vscode 下载 ESLint 插件

    4. 在 src 下新建 .vscode 文件夹，文件夹内容如下(vscode可直接新建.开头的文件夹)

      image.png

  • 解决prettier和eslint冲突:

    1. npm i eslint-plugin-prettier eslint-config-prettier -D

    2. 更改 .eslintrc.js

      image.png

3.集成 husky 和 lint-staged

  1. git init

  2. npx husky-init && npm install ( powershell 使用 and 代替 && )

  3. npm i lint-staged -D

  4. 更改配置

    image.png

    image.png

4.集成 commitizen + commitlint

  1. commitizen

    1. npm install commitizen -D

    2. npx commitizen init cz-customizable -D --save-exact

    3. 根目录下新建 .cz-config.js 文件,内容如下

    code2.png

  2. commitlint

    1. npm i @commitlint/config-conventional @commitlint/cli -D

    2. 根目录下新建 commitlint.config.js 文件,内容如下

      image.png

    3. npx husky add .husky/commit-msg “npx --no-install commitlint --edit $1”

      image.png

    4. 集成commit命令

      image.png

5.集成 conventional-changelog-cli

  1. npm i conventional-changelog-cli -D

  2. 根目录下新建 CHANGELOG.md

  3. 配置package.json

    image.png

6.集成 element-plus + sass

  1. npm i element-plus -S sass -D

  2. 样式配置: 在 src 下新建 style 文件夹，文件夹内容如下

    image.png

  3. element-plus按需加载,请使用 vite-plugin-style-import 或 vite-plugin-imp

  4. vite打包的时候会自动tree shaking组件，多余的样式在gzip(vite-plugin-compress)之后就小了,可根据自己情况来选择按需或全量导入

主题定制:

image.png

image.png

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

image.png

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

image.png

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

image.png

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

7.vite.config.ts,tsconfig.json,env配置

  • vite.config.ts:

code3.png

  • tsconfig.ts: 页面导入模块报错，请注意paths那块添加对应的配置(—————坑——————)

    code4.png

  • 环境变量: 根目录新建 .env.development && .env.development 文件

    image.png

    image.png

8.集成 axios

  1. npm i axios -S

  2. 封装配置: 在 src 下新建 utils 文件夹，内容如下

    image.png

    封装内容如下：

    code.png

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

image.png

code1.png

9.封装 svg

  1. npm i vite-plugin-svg-icons -D

  2. src下新建components > svg > svg.vue

code4.png

image.png

image.png

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

10.封装 layout

  1. src下新建layout文件夹,内容如下

image.png

  1. 具体的组件封装可以去看代码, 有什么疑问可以评论区咨询

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

  • 封装面包屑导航的时候建议过滤error这种情况

  • 顶端布局面包屑左对齐，个人信息右对齐的时候使用了justify-content: space-between,死活无法两端对齐,一度很自闭，都准备改成浮动处理,后来发现是因为el-row默认添加了::before和::after。

  • 内容区域做溢出滚动效果,父盒子用上了height:calc(100% - 60px),套了el-scrollbar，页面内容溢出可以滚动但是看不到滚动条,但是给固定的height:600px;就可以显示滚动条,当时准备用js获取可视高度减去顶栏高度的做法，但是觉得吧,css能解决的问题就不要js解决，显得不够优雅，然后我想到视口,用height:calc(100vh - 60px)解决了。

11.集成 vue-router 和 pinia

  1. npm i vue-router pinia@next -S

12.权限路由

整体思路: 把路由拆分为基础路由,通配路由,权限路由,初始注入基础路由,登陆以后通过用户的个人信息拿到菜单id,过滤生成对应的用户路由，然后合并通配路由，注入到router。

需要注意的是通配路由需要放在最后面，要不导致页面被劫持(——————坑——————)

  1. src下新建 utils > auth.ts

code.png

  1. src下新建 router > index.ts && routes.ts

code4.png

code.png

  1. src下新建 views,内容如下

image.png

  1. src下新建 permission.ts,引入到main.js,内容如下

code.png

5.src下新建 store > store.ts

code.png

13.gzip

  1. npm i vite-plugin-compression -D

  2. 文档

image.png

14.其他技术

15.命名规范

  • 代码要加注释说明

  • vue文件引入要带上后缀.vue，js以及ts文件不带后缀，区分组件和方法

  • css命名遵循中划线,依次向下嵌套

  • js命名遵循驼峰

  • 定义的变量要有意义，不要使用拼音首字母

  • 组件引入使用大写方式，使用的时候中划线双标签

  • api,views等文件夹命名相互对应,且按模块整理

  • 组件的文件名需要使用有意义的命名，不要使用index(script setup下文件名会当作组件name使用)

  • 路由命名使用唯一值，且与文件名对应,路由跳转尽量使用name

  • 待补充

16.探讨问题

  • script + setup 语法糖

    1. eslint报错:no-unused-vars

      image.png

    在rules里配置no-unused-vars感觉不太优雅, 目前采用的注释方法

    1. 使用useRouter(),有时候会报错,提示需要在setup里使用

    image.png

    目前是直接引入router

17.学习交流

有好的学习交流群麻烦私信一下我,谢谢。

版权声明：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 作者: 迷呀迷 原文链接：https://juejin.im/post/6963048999922171917

回到顶部