# micro-app-project **Repository Path**: panfu/micro-app-project ## Basic Information - **Project Name**: micro-app-project - **Description**: 基于Vue.js 3.x系列 +TS+pinia+MicroApp Micro+element-plus的网站UI解决方案。后台基础框架！使用eslint(编码规范)+prettier(格式)统一代码风格+Stylelint+commitlint+ husky 管理规范，基于micro-app搭建的微前端项目，VUE3.x为基础基座 - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 2 - **Forks**: 2 - **Created**: 2024-03-12 - **Last Updated**: 2025-01-16 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # vue-app This template should help get you started developing with Vue 3 in Vite. node.js(20.11.1) ## Recommended IDE Setup [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur). VSCode配置 需要安装的插件：Chiness | ESLint | EditoConfig | Prettier | Styleint | Vetur | Volar | gi-commit-plugin | ```sh { "explorer.confirmDelete": false, "editor.formatOnSave": true, // #每次保存的时候自动格式化 "editor.codeActionsOnSave": {}, "vetur.validation.script": false, "noImplicitAny": false //any类型的报错，真的很烦的 } ``` ## Type Support for `.vue` Imports in TS TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types. ## Customize configuration See [Vite Configuration Reference](https://vitejs.dev/config/). ## Project Setup ```sh npm install ``` ### Compile and Hot-Reload for Development ```sh npm run dev ``` ### Type-Check, Compile and Minify for Production ```sh npm run build ``` ### Lint with [ESLint](https://eslint.org/) ```sh npm run lint ``` ### vuepress静态网站生成器-文档启动 [vuepress](https://eslint.org/) Vue 驱动的静态网站生成器 ```sh npm run docs:dev ``` ## 项目基础配置 ### vue项目使用eslint(编码规范) [ESLint](https://eslint.org/) 需要注意的是，各依赖包之间的版本有一定的关联，版本有误，启动或者修复时会报错提示，因此可以选择如下各版本： - 1.项目根目录新建.eslintrc.cjs文件，.eslintignore文件，.prettierrc.json文件，.prettierignore文件 ```sh npm run lint ``` ### prettier(格式)统一代码风格 [prettier](https://www.prettier.cn/) prettier(格式化)统一代码风格，具有自动格式化功能 ```sh npm run format ``` ### Stylelint [Stylelint](https://stylelint.bootcss.com/) Stylelint 是一个强大、先进的 CSS 代码检查器（linter），可以帮助你规避 CSS 代码中的错误并保持一致的编码风格。1.让Stylelint 处理项目中的所有 CSS 文件： ```sh npm run css ``` ### commitlint [commitlint](https://commitlint.js.org/) + husky [husky](https://typicode.github.io/husky/) Commitlint 是一个用于检查提交消息格式的库。它可以帮助团队遵循一致的提交消息规范。 husky自动检测提交消息、代码，并在提交或推送时运行 ```sh npm run commitlint ``` git:pre-commit提交规范及commit-message校验 注：需在.husky目录增加pre-commit和commit-message，并在package.json中配置husky 1、提交代码时输入： 验证配置准确度 2、提交格式（注意冒号后面有空格）必须英文的冒号 ```sh git commit -m "feat: 新增配置信息" git commit -m "提交页面备注 绕过eslint检查" --no-verify ``` ### MicroApp 微前端配置 [MicroApp](https://micro-zoe.github.io/micro-app/) 微前端-应用程序入口配置 ```sh // main.js import microApp from '@micro-zoe/micro-app' microApp.start() ``` ### 环境变量 vue3+vite 必须使用VITE开头的配置信息，否则无法获取 如果不想使用VITE开头，自己修改就在vite.config.ts文件中添加envPrefix:"APP*" //APP* 为自定义开头名 ```sh // vite.config.ts export default defineConfig({ plugins: [vue(), vueJsx()], envPrefix:"APP_" // APP_ 为自定义开头名 }) ``` 在vite中使用环境变理 imporit.meta.env 使用imporit.meta.env.VITE_BASE_API获取环境变 ```sh imporit.meta.env.VITE_BASE_API ``` - 有四种环境变量，如下所示： ``` MODE，用来指明现在所处于的模式，一般通过它进行不同环境的区分，比如 dev、test、pre、prd 等等，默认为：“development” BASE_URL，用来请求静态资源初始的 url PROD，用来判断当前环境是否是正式环境 DEV，用来与 PROD 相反的环境 SSR，用来判断是否是服务端渲染的环境 ``` 使用 --mode pro 进行设置 ```sh //package.json "scripts": { "serve": "vite", //未指定默认取.env中的配置 "dev": "vite --mode dev", // 取 .env.dev文件中的配置 "pro": "vite --mode pro", // 取 .env.pro文件中的配置 "build": "vue-tsc --noEmit && vite build", //未指定默认取.env中的配置 "build:dev": "vue-tsc --noEmit && vite build --mode dev", // build的时候取dev的配置 "build:pro": "vue-tsc --noEmit && vite build --mode pro", // build的时候取pro的配置 "preview": "vite preview" } ``` 环境变量使用教程 [教程地址](https://blog.51cto.com/echohye/6149993) ### ESLint 禁止检验 - 1.在代码顶部添加一行注释,ESLint 在校验的时候就会跳过后面的代码 // eslint-disable - 2.可以再注释后面加入详细的规则，这样就能避开指定的校验规则 // eslint-disable no-new - 3.ESLint忽略指定文件夹办法 在项目根目录建立.eslintignore文件，填上文件夹名就行 ```sh /*eslint-disable*/ /*eslint-disable no-new*/ ``` ## 目录结构 ```bash ├── cypress # 自动化测试 ├── docs # vuepress驱动的静态网站生成器 │ ├─zh # 中文文档 ├── public # 静态资源文件夹，其中的文件会直接复制到构建输出目录中，无需经过编译处理 └─favicon.ico # 网站图标 ├── src # 业务页面文件存放的目录 │ ├─assets # 静态资源目录，包含图片、字体等未经过webpack编译的文件，可使用import导入并在构建时进行处理 │ ├─components # 组件目录，按照功能或类别划分存放单文件组件（.vue文件） └─Common.vue # 公共组件目 └─Layout.vue # 布局组件目录 └── ... # 其他分类组件目录 │ ├─router # 路由配置目录 └─index.ts # 路由配置目录，主要包含index.TS路由文件，用于配置应用程序的路由规则 │ └─stores # pinia 状态管理目录，用于集中管理组件状态和数据流 └─counter.vue │ └─views # 页面组件目录，根据功能模块划分不同页面组件 └─AboutView.vue │ └─App.vue # 应用程序根组件，整个应用的入口点，通常包含路由视图和其他全局共享组件 │ └─main.ts # 应用程序入口脚本，用于初始化Vue实例、引入并配置路由、状态管理等核心模块 ├─.commitlint.config.js # git提效验文件 ├─.eslintrc.cjs # eslintr检查规则配置 ├─.stylelintrc.json # CSS样式检查规则配置 ├─.gitignore # 配置git提交过滤文件 ├─prettierrc # 文件格式化 ├─manifest.json # 配置应用名称、appid、logo、版本等打包信息， ├─auto-imports.d.ts ├─cypress.config.ts ├─env.d.ts # 在src目录下env.d.ts中添加以下代码，可以在在代码中获取用户自定义环境变量的 TypeScript 智能提示 ├─commitlint.config.ts # git提交规则的配置 ├─index.html ├─index.html ├─package.json # 项目及工具的依赖配置文件 ├─README.md # 说明 ├─tsconfig.app.json # 配置为前端 Vue 应用提供了一套合理的默认 TypeScript 编译设置，通过继承、文件包含/排除规则和编译器选项来优化开发和构建过程。 ├─tsconfig.json # TypeScript 项目的核心配置文件，用于指定编译选项、包含的源文件、排除的文件等信息 ├─tsconfig.node.json # 针对 Node.js 应用程序进行更细粒度的 TypeScript 编译设置 ├─vite.config.ts # Vite 构建工具的配置文件，用于定制Vite的构建行为（如果使用Vite构建系统） ├─vitest.config.ts # Vite 测试构建工具的配置文件 ``` ## 技术选型 | 技术 | 说明 | 官网 | | ---------------- | ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | --- | | Vue | 前端框架 | [https://vuejs.org/](https://vuejs.org/) | | Vue-router | 路由框架 | [https://router.vuejs.org/](https://router.vuejs.org/) | | pinia | 全局状态管理框架 | [https://pinia.vuejs.org//](https://pinia.vuejs.org//) | | Element-plus | 前端UI框架 | [https://element.eleme.io/](https://element.eleme.io/) | | Axios | 前端HTTP框架 | [https://github.com/axios/axios](https://github.com/axios/axios) | | v-charts | 基于Echarts的图表框架 | [https://v-charts.js.org/](https://v-charts.js.org/) | | nprogress | 进度条控件 | [https://github.com/rstacruz/nprogress](https://github.com/rstacruz/nprogress) | | vue-i18n | 多语言处理 | [http://kazupon.github.io/vue-i18n/](http://kazupon.github.io/vue-i18n/) | | vue-puzzle-vcode | 滑动验证 | [https://github.com/javaLuo/vue-puzzle-vcode](https://github.com/javaLuo/vue-puzzle-vcode) | | vuedraggable | 可拖拽组件 | [https://github.com/SortableJS/Vue.Draggable](https://github.com/SortableJS/Vue.Draggable) | vu | | wangeditor | 富文本编辑器 | [https://www.wangeditor.com/](https://www.wangeditor.com/) | | VueTreeselect | 多选树形控件 | [https://www.vue-treeselect.cn/](https://www.vue-treeselect.cn/) | | vitepress | 驱动的静态网站生成器 | [https://vitepress.dev/](https://vitepress.dev/) | | eslint | eslint 规则检测工具 | [http://eslint.cn/docs/rules/](http://eslint.cn/docs/rules/) | | prettier | prettier 代码格式化工具 | [https://www.prettier.cn/](https://www.prettier.cn/) | | hotkeys | hotkeys 设置快捷键键盘热键 | [https://unpkg.com/hotkeys-js@3.4.3/doc/index.html](https://www.prettier.cn/) | | lodash | lodash 一致性、模块化、高性能的实用工具库 | [https://www.lodashjs.com/](https://www.lodashjs.com/) | | vue-grid-layout | vue-grid-layout 栅格布局系统 | [https://jbaysolutions.github.io/vue-grid-layout/zh/](https://jbaysolutions.github.io/vue-grid-layout/zh/) | | vueflow | vueflow 流程图 | [https://vueflow.dev/](https://vueflow.dev/) | | test-utils | 单元测试实用工具 | [https://test-utils.vuejs.org/installation/](https://test-utils.vuejs.org/installation/) | | jest | JavaScript 测试框架 | [https://jestjs.io/zh-Hans/](https://jestjs.io/zh-Hans/) | | | vue-flow | 对图、节点、连线进行细致的控制 | [https://github.com/bcakmakoglu/vue-flow](https://github.com/bcakmakoglu/vue-flow) [VUE-flow官网](https://vueflow.dev/guide/) |