# vue3ts_cms **Repository Path**: ginvip/vue3ts_cms ## Basic Information - **Project Name**: vue3ts_cms - **Description**: vue3+ts+pinia开发后台管理系统 - **Primary Language**: TypeScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-02-20 - **Last Updated**: 2024-02-21 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # vue3ts_cms项目笔记 This template should help get you started developing with Vue 3 in Vite. ## Project Setup ```sh npm init vue@latest npm install npm run dev npm run build npm run lint ``` ## env.d.ts文件中添加vue文件声明 ``` /// declare module "*.vue" { import {DefineComponent} from 'vue' const component: DefineComponent export default component } ``` ## 代码规范配置 ### 集成editorconfig配置 EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。 ``` # http://editorconfig.org root = true [*] # 表示所有文件适用 charset = utf-8 # 设置文件字符集为 utf-8 indent_style = space # 缩进风格(tab | space) indent_size = 2 # 缩进大小 end_of_line = lf # 控制换行类型(lf | cr | crlf) trim_trailing_whitespace = true # 去除行尾的任意空白字符 insert_final_newline = true # 始终在文件末尾插入一个新行 [*.md] # 表示仅 md 文件适用以下规则 max_line_length = off trim_trailing_whitespace = false ``` 将以上代码保存到根目录下的 .editorconfig 文件中,但要真正生效,VSCode需要安装一个插件:EditorConfig for VS Code ### prettier格式化工具 Prettier 是一款强大的代码格式化工具,支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言,基本上前端能用到的文件格式它都可以搞定,是当下最流行的代码格式化工具。 1.安装prettier ``` npm install prettier -D ``` 2.配置.prettierrc文件: - useTabs:使用tab缩进还是空格缩进,选择false; - tabWidth:tab是空格的情况下,是几个空格,选择2个; - printWidth:当行字符的长度,推荐80,也有人喜欢100或者120; - singleQuote:使用单引号还是双引号,选择true,使用单引号; - trailingComma:在多行输入的尾逗号是否添加,设置为 `none`,比如对象类型的最后一个属性后面是否加一个,; - semi:语句末尾是否要加分号,默认值true,选择false表示不加; ``` { "useTabs": false, "tabWidth": 2, "printWidth": 80, "singleQuote": true, "trailingComma": "none", "semi": false } ``` 3.创建.prettierignore忽略文件 ``` /dist/* .local .output.js /node_modules/** **/*.svg **/*.sh /public/* ``` 4.VSCode需要安装prettier的插件 5.VSCod中的配置 - settings =>format on save => 勾选上 - settings => editor default format => 选择 prettier 6.测试prettier是否生效 * 测试一:在代码中保存代码; * 测试二:配置一次性修改的命令; 在package.json中配置一个scripts: ``` "prettier": "prettier --write ." ``` ### 使用ESLint检测 1.在前面创建项目的时候,我们就选择了ESLint,所以Vue会默认帮助我们配置需要的ESLint环境。 2.VSCode需要安装ESLint插件 3.解决eslint和prettier冲突的问题: 安装插件:(vue在创建项目时,如果选择prettier,那么这两个插件会自动安装) ``` npm install eslint-plugin-prettier eslint-config-prettier -D ``` 添加prettier插件: ``` extends: [ "plugin:vue/vue3-essential", "eslint:recommended", "@vue/typescript/recommended", "@vue/prettier", "@vue/prettier/@typescript-eslint", 'plugin:prettier/recommended' ], ``` 4.VSCode中eslint的配置 ``` "eslint.lintTask.enable": true, "eslint.alwaysShowStatus": true, "eslint.validate": [ "javascript", "javascriptreact", "typescript", "typescriptreact" ], "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, ``` ## CSS样式 CSS样式重置: ``` npm install normalize.css npm install less -D ``` main.ts文件中引入 normalize.css: ``` import 'normalize.css' import '@/assets/css/index.less' ``` ## 隐式any的问题 默认不允许有隐式的any,会飘红。要么显式地指定为 any 类型,要么在tsconfig.app.json文件中关闭检测 ``` "noImplicitAny": false ``` ## Elment-Plus ``` https://element-plus.org/zh-CN/guide/design.html ``` ## 动态路由 根据登录用户的权限,动态添加路由而不是一次性注册所有路由。不同的用户不同的菜单权限。 而动态路由一般都有两种方案: 1. 基于角色(role)的动态路由管理 ``` // 示例伪代码 const roles = [ "superadmin": [所有的路由] => router.main.childrent "admin": [部分路由] => router.admin.children "service": [少部分路由] => router.service.children "manager": [] => xxxx ] ``` 弊端:每增加一个角色,都要增加key/value,需要重新发版 2. 基于菜单的动态路由管理 ``` // 本项目采用此方式实现动态路由管理 "userMenus" => 动态展示菜单 ``` 使用第三方工具: ``` npm install coderwhy -g coderwhy add3page_setup department -d src/views/main/system/department # add3:表示生成vue3路由;默认生成vue2路由 # department 路由名,后面的路径会在对应的目录生成vue文件,同时在router目录下生成 router/main/system/department 对应的路由文件 # 命令中的路由名及文件名根据从服务器获取到的数据而定 coderwhy add3page_setup menu -d src/views/main/system/menu coderwhy add3page_setup user -d src/views/main/system/user coderwhy add3page_setup role -d src/views/main/system/role coderwhy add3page_setup category -d src/views/main/product/category coderwhy add3page_setup goods -d src/views/main/product/goods coderwhy add3page_setup chat -d src/views/main/story/chat coderwhy add3page_setup list -d src/views/main/story/list coderwhy add3page_setup overview -d src/views/main/analysis/overview coderwhy add3page_setup dashboard -d src/views/main/analysis/dashboard ``` ## pinia数据持久化 ``` https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/ ```