项目
博客
文档
归档
资源链接
关于我
项目
博客
文档
归档
资源链接
关于我
关于Vue和Python相关的资料文档
2025-01-05
·
·
原创
·
·
本文共 2,499个字，预计阅读需要 9分钟。
## Vue 小滴课堂： 新版Vue3.4+ElementPlus全家桶开发视频项目实战 地址： https://xdclass.net/videoDetailsPage?id=98 小弟课堂：新版Python/Web开发Django5.X框架+Vue3+Mysql全栈项目实战 地址：https://xdclass.net/videoDetailsPage?id=104 yike博客：项目实战-vue3+TS+nodejs+mySql个人博客项目开发-后台管理 视频地址：https://www.bilibili.com/video/BV1VnHqe6EuT 项目地址：https://git.virtualagent.cn/Front_Resources/yike b站：Vue3+TypeScript后台管理系统项目实战教程 视频地址：https://www.bilibili.com/video/BV11vCzYeE5h 笔记源码：夸克：文件/A开发视频/前端/Vue3+TypeScript后台管理系统项目笔记源码 夸克：Vue3+ElementPlus+Koa2 全栈开发后台系统 项目：manager-fe-master、manager-server-master b站：vue3+ts 工程化配置 视频地址：https://www.bilibili.com/video/BV1si421o7Xo b站：Vue3+Vite4+Pinia+ElementPlus从0-1 web项目搭建 视频地址：https://www.bilibili.com/video/BV1Hz4y1j7Mw 笔记文档：https://gitee.com/zhengqingya/java-developer-document 项目源码：https://gitee.com/zhengqingya/smallboot 夸克：Vue3实战商城后台管理系统开发 (源码) 地址：https://git.virtualagent.cn/Front_Resources/shop-admin elementplus，windicss，tailwind b站： Vue3项目-后台课程管理系统 地址：https://git.virtualagent.cn/Front_Resources/edu-vue3 水哥澎湃： Vue3+Pinia +TS ## Python (✔) ginger：Python Flask高级编程之RESTFul API前后端分离精讲 地址： https://git.virtualagent.cn/Py_Projects/ginger 参考：项目架构 (✔) mumunote：慕课网 地址：https://git.virtualagent.cn/Py_Projects/mumunote 参考：页面封装 (✔) 项目：wzd-py-app-platform、wzd_data_script 地址： https://git.virtualagent.cn/WangZhida_Project/wzd-py-app-platform 地址：https://git.virtualagent.cn/WangZhida_Project/wzd_data_script 参考：架构、爬虫，逆向js、瑞数5 # Vue3+ElementPlus+Koa2 全栈开发后台系统文档 ## 介绍 ### 内容 菜单按钮权限、JWT认证、审批流、常规CRUD、模块化/组件化 架构设计、编程技巧、日志规范、数据库读写 ### 技术栈 Vite2.0、ElementPlus、VueCli4.5、Koa2/Mongo4.4、Vue3全家桶 核心技术：架构设计、Vite2.0、Vue3全家桶、Koa2、log4js、Mongo4.4、axios封装、模块/组件化、JWT、递归菜单、菜单权限、审批流、开发脚手架、LowCode、.... ### 系统模块 用户登录、系统首页、用户管理、菜单管理、角色管理、部门管理、休假申请、待我审批 ### 开发流程 - 需求：需求调研、需求分析、策划、需求文档设计（概要设计、详细设计）、原型设计、需求宣讲、评审：交互评审、测试用例评审、技术评审 - 开发：开发&测试排期、接口文档设计、接口评审、代码开发、前后端联调、冒烟测试 - 测试：CodeReview、Bug修复、需求调整、功能调整&优化、UI审查 - 上线：预发布验证、灰度测试、前后端checklist - 事故：版本回退、Bug修复、验证、上线 - 回顾：事故复盘、问题总结、数据概览 开发流程 - 需求：需求调研、需求设计、需求评审、用例评审 - 开发：接口设计、接口评审、前后端开发、CR、自测 - 测试：Bug修复、功能优化、需求调整、遗漏功能开发 - 上线：预发验证、灰度测试、checklist、权限配置、版本回退 - 回顾：事故复盘、问题总结、数据总览 权限：RBAC (Role-Based Access Control): 用户、角色、权限 审批流： 角色、场景、节点、环节、必要信息、通知、操作 #### 学后收获 学会使用Vue3全家桶开发后台系统 学会前后端项目架构搭建 学会组件化、模块化开发、工具函数封装 学会JWT认证方案、审批流业务、后台日志规范 学会Koa2+Mongo技术栈开发 环境配置、数据Mock、接口联调... ## 前端框架设计 ### 项目初始化&目录规范 Node环境安装：官方文档：http://nodejs.cn/ > 安装版本必须大于12.0，建议直接安装最新稳定版本 #### 全局安装vue脚手架 安装方式： ```shell npm install @vue/cli -g manager-fe # or cnpm instal1 @vue/cli -g manager-fe # or yarn global add @vue/cli manager-fe ``` > install可以简写为i, cnpm i @vue/cli -g 官方文档：https://cli.vuejs.org/zh/guide/ 如果你安装的是旧版本的vue-cli，需要提前卸载，`npm uninstal1 vue-cli -g` 或 `yarn global remove vue-c1i`，然后从新安装@vue/cli vue --version，目前4.x以上版本支持创建Vue3项目 版本升级： ```shell npm update -g @vue/cli # 或者 yarn global upgrade --latest @vue/cli ``` 创建项目：`vue ceate manager-fe` #### 通过vite创建项目 官方文档：https://cn.vitejs.dev/ 创建项目： ```shell yarn create vite manager-fe --template vue ``` #### 安装项目所需插件 ```shell # 安装项目生产依赖 yarn add vue-router@next vuex@next element-plus axios -S #安装项目开发依赖 yarn add sass -D ``` element-plus文档: https://element-plus.org/zh-CN/component/overview.html VSCode安装插件: Eslint、Vetur、TypesScript、Prettier # vue3+ts 工程化配置文档 视频地址：https://www.bilibili.com/video/BV1si421o7Xo ### 01.创建官方脚手架vue-ts项目 安装vscode插件： Auto Close Tag，Auto Import，Auto Rename Tag，Chinese Language Pack for Vi，ESLint， JavaScript code snippets，Path Intellisense， Prettier-code formatter，Stylelint，Turbo Console Log，Vue-Official，vue VSCode Snippets 项目安装：`pnpm create vue@latest` ```sh > pnpm create vue@latest √ 请输入项目名称： ... vue-ts-demo2 √ 是否使用 TypeScript 语法？ ... 否 / 是 √ 是否启用 JSX 支持？ ... 否 / 是 √ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是 √ 是否引入 Pinia 用于状态管理？ ... 否 / 是 √ 是否引入 Vitest 用于单元测试？ ... 否 / 是 √ 是否要引入一款端到端（End to End）测试工具？ » 不需要 √ 是否引入 ESLint 用于代码质量检测？ » 是，并同时引入 Oxlint 以加快检测（试验阶段） √ 是否引入 Prettier 用于代码格式化？ ... 否 / 是 ``` 进行项目，使用vscode打开项目： ```sh cd vue-ts-demo2 code . ``` package.json配置文件说明 ``` "lint": "eslint . --fix", 格式化，eslint，代码质量检查 "format": "prettier --write src/" 格式化，prettier，代码风格检查 ``` Vue DevTools使用： ``` "vite-plugin-vue-devtools": "^7.5.4" ``` 启动项目：`yearn dev` 点击中下的圆圈，Toggle Component Inspector,然后点击页面的任何地方，都可以使vscode中跳转到该标签位置，非常方便测试调试使用 文件目录说明 `eslint.config.js` 与`eslintrc.cjs`: `ESLint配置文件的两种不同格式` `.prettierrc.json`: prettier配置文件 `env.d.ts`： 全局声明文件 `tsconfig.app.json`: 掌管src中的声明，写代码的部分配置，管整个项目 `tsconfig.node.json`: 外面写配置的部分声明。管整个配置项的 `vite.config.ts`： 全局vite的配置文件 ``` export default defineConfig({ plugins: [ vue(), vueJsx(), vueDevTools(), //使用vueDevTools ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) /@别名配置 }, }, } ``` ### 02.eslint+prettier+airbnb 安装vscode插件：ESLint， Prettier-code formatter - eslint：https://eslint.nodejs.cn/ 代码质量检查插件 - prettierhttps://www.prettier.cn/代码风格格式化插件 安装依赖包 `yarn add eslint-config-airbnb-base eslint-import-resolver-typescript -D` ``` eslint-config-airbnb-base airbnb规范 eslint-import-resolver-typescript 解决@别名识别问题 eslint-plugin-import 如果是npm yarn需要安装 ``` - eslint-config-airbnb-base: https://github.com/airbnb/javascript?tab=readme-ov-file#table-of-contents airbnb规范 - eslint-import-resolver-typescript: https://www.npmjs.com/package/eslint-import-resolver-typescript 帮助解析tsconfig.json 里面的@等别名 根目录下新建规则配置文件eslintrc.cjs ```javascript /*eslint-env node */ require('@rushstack/eslint-patch/modern-module-resolution') module.exports = { root: true, extends: [ 'plugin:vue/vue3-essential', 'eslint:recommended', 'airbnb-base', '@vue/eslint-config-typescript', '@vue/eslint-config-prettier/skip-formatting', ], parserOptions: { ecmaVersion: 'latest', }, settings: { 'import/resolver': { typescript: { //eslint-import-resolver-typescript插件解决@别名问题 project: './tsconfig.*.json', }, }, }, rules: { //对后缀的检测 'import/extensions': [ 'error', 'ignorePackages', { js: 'never', jsx: 'never', ts: 'never', tsx: 'never' }, ], }, } ``` ### 03 eslint-importorder ### 05.husky+lint-staged+commitlint代码提交检查 ### 01.新版本eslint9,prettier,stylelint,husky,commit,vue3基础框架配置 #### 全新版本vue3基础配置less is more 由于vite脚手架要禁止*.cjs和eslint版本升级废弃rc配置文件，故重新搭建。 核心采用antfu大神预设配置替代prettier和eslint设置，保留stylelint原因是暂时antfu不支持。 ##### 前置条件 ###### node版本 node最好>20，因为eslint9的需要，本次项目node为20.15.1 ###### 包管理器 包管理器暂时采用yarn（或者npm）后续有机会换pnpm ###### vscode插件 vscode插件：eslint prettier stylelint unocss vue-official postcss ###### vscode配置 生成.vscode/settings.json修改为 ```json { "typescript.tsdk":"./node_modules/typescript/lib", // "npm.packageManager":"pnpm", // "editor.formatonSave":true, "editor.tabSize":2, "editor.defaultFormatter":"esbenp.prettier-vscode", //保存文件缓慢时，可以考虑开启以下3行配置。 "vue.server.maxo1dspacesize":4096, "vue.server.hybridMode":true, "typescript.tsserver.maxTsServerMemory":4096, "files.eol":"\n", "editor.guides.bracketPairs":true, "editor.bracketPairColorization.enabled":true, "vue.inlayHints.missingProps":true, "vue.autoInsert.dotValue":true, "explorer.copyRelativePathSeparator":"/", "search.exclude":{ "**/node_modules":true, "**/*.1og":true, "**/*.log*":true, "**/bower_components":true, "**/dist":true, "**/elehukouben":true, "**/.git":true, "**/.gitignore":true, "**/.svn":true, "**/.DS_Store":true, "**/.idea":true, "**/.vscode":false, "**/yarn.lock":true, "**/tmp":true, "out":true, "dist":true, "node modules":true, "CHANGELOG.md":true, "examples":true, "res":true, "screenshots":true, "yarn-error.log":true, "**/.yarn":true }, "files.exclude":{ "**/.cache":true, "**/.editorconfig":true, "**/.eslintcache":true, "**/bower_components":true, "**/.idea":true, "**/tmp":true, "**/.git":true, "**/.svn":true, "**/CVS":true, "**/.hg":true, "**/.DS_Store":true }, "files.watcherExclude":{ "**/.git/objects/**":true, "**/.git/subtree-cache/**":true, "**/.vscode/**":true, "**/node_modules/**":true, "**/tmp/**":true, "**/bower_components/**":true, "**/dist/**":true, "**/yarn.lock":true }, "eslint.useFlatConfig":true, "stylelint.enable":true, "stylelint.validate":["css","less","postcss","scss","vue","sass"], "path-intellisense.mappings":{ "@/":"${workspaceRoot}/src" }, "i18n-ally.localesPaths":["src/locales/lang"], "i18n-ally.keystyle":"nested", "i18n-ally.sortKeys":true, "i18n-ally.namespace":true, "i18n-ally.pathMatcher":"{locale}/{namespaces}.{ext}", "i18n-ally.enabledParsers":["json"], "i18n-ally.sourceLanguage":"en", "i18n-ally.displayLanguage":"zh-CN", "i18n-ally.enabledFrameworks":["vue","react"], // Disable the default formatter,use eslint instead "prettier.enable":false, "editor.formatOnSave":false, //Auto fixI "editor.codeActionsOnSave":{ "source.fixAll.eslint":"explicit", "source.organizeImports":"never", "source.fixAll.stylelint":"explicit" }, //Silent the stylistic rules in you IDE,but still auto fix them "eslint.rules.customizations":[ {"rule":"style/*","severity":"off","fixable":true }, {"rule":"format/*","severity":"off","fixable":true }, {"rule":"*-indent","severity":"off","fixable":true }, {"rule":"*-spacing","severity":"off","fixable":true }, {"rule":"*-spaces","severity":"off","fixable":true}, {"rule":"*-order","severity":"off","fixable":true}, {"rule":"*-dangle","severity":"off","fixable":true }, {"rule":"*-newline","severity":"off","fixable":true }, {"rule":"*quotes","severity":"off","fixable":true }, {"rule":"*semi","severity":"off","fixable":true} ], "css.validate":false, "less.validate":false, "scss.validate":false, //Enable eslint for all supported languages "eslint.validate":[ "javascript", "javascriptreact", "typescript", "typescriptreact", "vue", "html", "markdown", "json", "jsonc", "yaml", "toml", "xml", "gql", "graphql", "astro", "css", "less", "acss", "pcss", "postcss" ] } ``` 核心点 ```json // prettier关闭，保存格式化关闭 "prettier.enable":false, "editor.formatOnSave":false, //Auto fixI 保持使用eslint和stylelint操作，引入不需要 "editor.codeActionsOnSave":{ "source.fixAll.eslint":"explicit", "source.organizeImports":"never", "source.fixAll.stylelint":"explicit" }, ``` 创建项目: `yarn create vue` ``` √ 请输入项目名称： ... vue-test-demo2 √ 是否使用 TypeScript 语法？ ... 否 / 是 √ 是否启用 JSX 支持？ ... 否 / 是 √ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是 √ 是否引入 Pinia 用于状态管理？ ... 否 / 是 √ 是否引入 Vitest 用于单元测试？ ... 否 / 是 √ 是否要引入一款端到端（End to End）测试工具？ » 不需要 √ 是否引入 ESLint 用于代码质量检测？ » 否 ``` 进入项目安装依赖：`cd vue-test-demo2 & yarn ` ，vscode打开：`code .` ###### prettier【不采用】 依赖包: "prettier":"^3.3.3", 安装: `yarn add prettier-D` 配置文件: prettier.config.mjs ``` /**@type{import('prettier').config}*/ export default{ $schema:'https://json.schemastore.org/prettierrc'， semi:false, tabwidth:2, singleQuote:true, printWidth:100, trailingComma:'es5' } ``` ###### eslint【不采用】 使用9x版本扁平化设计 1.脚手架快速安装,然后yarn安装相关依赖包`yarn create@eslint/config` 2.修改eslint.config.js为eslint.config.mjs保持统一 安装: 额外安装: `yarn add eslint-define-config eslint-plugin-import -D` 配置文件`eslint.config.mjs` ``` ``` ##### styleLint 【采用】 less和sass推荐只选一个 依赖包 - "less": "^4.2.0", - "postcss": "^8.4.41", - "postcss-html": "^1.7.0", - "postcss-less": "^6.0.0", - "postcsS-scss":"^4.0.9", - "sass": "^1.77.8", - "stylelint": "^16.8.2", - "stylelint-config-recess-order":"^5.1.0", - "stylelint-config-standard":"^36.0.1", 安装 ```sh #选择sass 可以选择不安装包含less相关 反之亦然 yarn add less sass postcss postcss-html postcss-less postcss-scss sass stylelint stylelint-config-recess-order stylelint-config-standard -D ``` 配置文件: stylelint.config.mjs ```json /** @type{import('stylelint').Config}*/ export default{ //stylelint-config-standard 基础配置 //stylelint-config-recess-order 样式顺序 extends: ['stylelint-config-standard','stylelint-config-recess-order'], //不同文件类型用不同解析器 overrides:[ { files:['**/*.(css|html|vue)'], customSyntax:'postcss-html', }, //选less可以注释scss { files: ['*.less','**/*.less'], customSyntax:'postcss-less', }, //选sass可以注释上面的less { files:['*.scss','**/*.scss'], customSyntax:'postcss-scss', rule:{ 'scss/percent-placeholder-pattern':null, 'scss/at-mixin-pattern':null, }, }, ], rules:{ //'prettier/prettier':true, 'media-feature-range-notation':null, 'selector-not-notation':null, 'import-notation':null, 'function-no-unknown':null, 'selector-class-pattern':null, 'selector-pseudo-class-no-unknown':[ true, { ignorePseudoClasses:['global','deep'], }, ], 'selector-pseudo-element-no-unknown':[ true, { ignorePseudoElements:['v-deep',':deep'], }, ], 'at-rule-no-unknown':[ true, { ignoreAtRules:[ 'tailwind', 'apply', 'variants', 'responsive', 'screen', 'function', 'if', 'each', 'include', 'mixin', 'extend', 'use', ] }, ], 'no-empty-source':null, 'named-grid-areas-no-invalid':null, 'no-descending-specificity':null, 'font-family-no-missing-generic-family-keyword':null, 'rule-empty-line-before':[ 'always', { ignore:['after-comment','first-nested'], }, ], 'unit-no-unknown':[true,{ignoreUnits:['rpx']}], 'order/order':[ [ 'dollar-variables', 'custom-properties', 'at-rules', 'declarations', { type:'at-rule', name:'supports', }, { type:'at-rule', name:'media', }, 'rules', ], {severity:'error'}, ], }, ignoreFiles:['**/*.js','**/*.jsx','**/*.tsx','**/*.ts'], } ``` ##### antfu 组合prettier&eslint 【采用】 配置网站:https://github.com/antfu/eslint-config/tree/feat/support-eslint-9?tab=readme-ov-file 先选一个unocss免得后续再去安装unocss的@unocss/eslint-plugin 命令行界面（CLI） 安装空格选择回车下一步： `npx @antfu/eslint-config@latest` 配置文件`eslint.config.js` ```json import antfu from '@antfu/eslint-config' export default antfu({ //使用prettier格式化css html等 formatters: true, //unocss 检测&格式化 暂时注释 等配置了unocss再开放为true // unocss: true, // vue的eslint配置 vue:true, // 保存删除未引入的代码 // isInEditor:false, // 9x版本 忽略文件这种配置方式 废弃掉eslintignore ignores:[ '*.sh', 'node_modules', '*.md', '*.woff', '*.ttf', '.idea', '/public', '/docs', '.husky', '.local', '/bin', 'Dockerfile' ] }) ``` - package.json ``` { "scripts":{ //... "lint": "eslint .", "lint:fix": "eslint . --fix" } } ``` 再安装以来：`yarn` ### 路由配置 路由基础配置官网：https://router.vuejs.org/zh/ router/index.ts路由配置 ``` import type {App} from'vue' import {createRouter，createwebHistory} from'vue-router' import type { RouteRecordRaw } from 'vue-router' //定义路由规则 const routes:RouteRecordRaw[]=[ { path:'/', redirect:'/home' }, { path:'/home', component:：() =>import（'@/views/home/index.vue') }, { path:'/about'， component:()=>import('@/views/about/index.vue') } ] //创建路由实例 const router=createRouter({ history:createwebHistory(), routes }) ``` ### 配置scss 安装 styles/index.scss全局配置 ``` // .... @use './variables.scss' as *; @use './mixin.scss' as *； ``` main.ts全局引l入 ``` // 全局样式引入 import '@/styles/index.scss' ``` vite.config.ts全局注入样式变量和mixin ``` //https://vitejs.dev/config/ export default defineVonfig({ // ... css: { preprocessorOptions: { //全局样式变量预注入 scss: { additionalData: ` @use "./src/styles/variables.scss" as *; @use "./src/styles/mixin.scss" as *;`, javascriptEnabled: true } } } }) ``` #### unocss使用 vscode安装unocss或to unocss插件 官网https://unocss.dev/guide/ 安装 ``` pnpm i unocss @iconify-json/ep @unocss/preset-rem-to-px @unocss/transformer-directives -D ``` unocss核心库 - @iconify-json/ep 是ElementPlus的图标库https://icones.js.org/网站里面找 - @unocss/preset-rem-to-px 把unocss自带的rem转为px - @unocss/transformer-directives 可以使用@apply @screen theme函数 - icon官网https://unocss.dev/presets/icons - 博客 https://blog.csdn.net/qq_42618566/article/details/135680388 vite.config.ts配置 ```javascript // unocss vite插件配置 import UnoCSS from 'unocss/vite' //https://vitejs.dev/config/ export default defineConfig({ //... plugins:[ //.. UnoCSS(), ], }) ``` 根目录新建uno.config.ts ```typescript //预设rem转px import presetRemToPx from '@unocss/preset-rem-to-px' // transformerDirectives可以使用@apply @screen theme函数 import transformerDirective from'@unocss/transformer-directives' import { defineConfig, presetAttributify, presetUno, transformerVariantGroup, presetIcons } from 'unocss' export default defineConfig({ presets:[ presetAttributify(), presetUno(), //现在mt-1会转换为margin-top：1px presetRemToPx({ baseFontSize:4 }), //自动引入图标配置 presetIcons({ scale: 1.2, warn: true }) ], transformers:[transformerVariantGroup(),transformerDirective()], //自定义配置项 rules: [ /**以下官网规则可自定义转换*/ /*例如m-1转换为margin:0.25rem*/ // [/^m-(\d+)$/,（[,d]）=>（{margin:${d / 4}rem})], // [/^p-(\d+)$/,match =>（{padding:${match[1]/ 4}rem})], ], // 自定义属性一个属性可以对应多个unocss类值 shortcuts:[ { // 垂直水平居中 'flex-center':'flex items-center justify-center', // 放在最后 'flex-end':'flex items-center justify-end', // 垂直居中 'flex-middle':'flex items-center', // 分开两边 'flex-between':'flex items-center justify-between', //竖着居中 'flex-col-center':'flex flex-col justify-center' } ] }) ``` main.ts全局配置 ```typescript // eslint-disable-next-1ine import/no-unresolved import 'virtual:uno.css' //uno.css ``` 使用 i前缀-ep图库名：lock图标名称 ```vue <template> <div w100 h100 bg-red></div> </template> ``` #### mock 官网：https://github.com/vbenjs/vite-plugin-mock/tree/v2.9.1 安装：`pnpm i vite-plugin-mock@2.9.6 mockjs -D` mock配置项目：build/plugin/mock/index.ts ```typescript import {viteMockServe} from 'vite-plugin-mock' export const useMock=(）=>{ return viteMockserve({ mockPath:"mock",//指向mock下的文件 ignore：/^_/，//忽略下划线开头的文件 watchFiles：true，//监听文件内容变更 默认true localEnabled: true, prodEnabled: true, logger：true，//默认true //injectCode相对路径是相对于src/main.ts // injectcode:` // import { setupProdMockServer } from '../mock/utils/_mockProdServer' // setupProdMockServer();`,` // injectFile把injectCode自动注入src/main.ts里面 不用手写注入代码 // injectFile: resolve('src/main.ts'), }), } ``` 配置根目录下mock文件里面的ts都是会自动被插件读取为mock接口