# cms-portal **Repository Path**: yuyingqianduan/cms-portal ## Basic Information - **Project Name**: cms-portal - **Description**: vite5+ts+vue3+pinia 架构自定义搭建的中台模板 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-06-01 - **Last Updated**: 2024-06-02 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 从零到一搭建vue3.0+element-plus中台模板项目 必备 html css js 基础 ## 前置知识 - [Vue3](https://cn.vuejs.org/guide/introduction.html) - [Vue-Router](https://router.vuejs.org/zh/introduction.html) - [Pinia](https://pinia.vuejs.org/zh/introduction.html) - [pinia-plugin-persistedstate持久化插件](https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/) - [Axios](https://www.axios-http.cn/docs/intro) - [Element-Plus]Phttps://element-plus.org/zh-CN/guide/design.html) - [nprogress进度条插件](https://github.com/rstacruz/nprogress?tab=readme-ov-file) - [TypeScript官方文档](https://www.tslang.cn/docs/home.html) ## reset.css 样式重置方案 - 这里引用一个开源项目：[minireset.css](https://github.com/jgthms/minireset.css/blob/master/minireset.css) ### 安装依赖 浏览器是不能直接识别 Vue，TS，Sass这些语言的 需要工具转换成 html css js vite工具即可做这些事情 ```bash pnpm install -D vite @vitejs/plugin-vue @vitejs/plugin-vue-jsx pnpm install -D @types/node @types/nprogress vue-tsc ``` - vite：项目构建工具 - @vitejs/plugin-vue：使vite能够编译vue组件 - @vitejs/plugin-vue-jsx：使vite能够编译jsx组件 - @types/node：node类型包，使ts支持node - @types/nprogress：nprogress的类型支持 - vue-tsc：vue文件的类型检查工具 ## 环境变量和打包命令配置 - .env # 所有情况下都会加载 - .env.local # 所有情况下都会加载，但会被 git 忽略 - .env.[mode] # 只在指定模式下加载 - .env.[mode].local # 只在指定模式下加载，但会被 git 忽略 根目录下创建对应的 .env文件，并配置环境变量 ```ts 配置 interface ImportMetaEnv { readonly VITE_APP_TITLE: string // 更多环境变量... } interface ImportMeta { readonly env: ImportMetaEnv } ``` ## 配置 StyleLint - tylelint 是一个强大、先进的 CSS 代码检查器（linter），可以帮助你规避 CSS 代码中的错误并保持一致的编码风格。 - 你可能会想：WTF😓，怎么有有一个配置编码风格的，不是已经有Prettier了么。StyleLint，是专用于规范样式代码的工具，可以做到一些Prettier做不到的功能，有了它能让我们的样式代码（CSS/Less/Scss）更加美观，比如说对CSS样式代码进行顺序规定。 - 但是 StyleLint 与 Prettier 也有配置冲突，所以我们也要将 StyleLint 中与 Prettier 冲突的配置关闭。 ### 安装依赖 ```bash pnpm install -D stylelint stylelint-config-standard pnpm install -D stylelint-config-prettier stylelint-config-html stylelint-order stylelint-less postcss-html postcss-less stylelint-config-standard-vue ``` - stylelint-config-standard：StyleLint 推荐配置 - stylelint-config-prettier：关闭与 prettier 冲突的配置 - stylelint-config-standard-vue：StyleLint Vue 项目推荐配置 - postcss-html postcss-less：支持检查 less 与 html - stylelint-order：支持 css 样式排序 ## 配置代码提交规范 ``` **提交信息的类型一般有如下规范**（可根据团队习惯进行更改）： - feat : 增加一个新特性 - fix : 修复一个 bug - perf : 更改代码以提高性能 - build : 更改构建系统和外部依赖项（如将 gulp 改为 webpack，更新某个 npm 包） - ci : 对 CI 配置文件和脚本的更改 - docs : 仅仅修改文档说明 - refactor : 代码重构时使用 - style : 不影响代码含义的改动，例如去掉空格、改变缩进、增删分号 - test : 增加新的测试功能或更改原有的测试模块 - temp: 临时的提交 - 警报级别 - 0 无提示 disable - 1 警告 warning - 2 错误 error - 是否启用 - always 启用 - never 禁用 - 规则对应的值：查看官方文档进行配置 ```shell # 相关依赖 pnpm install -D @commitlint/cli @commitlint/config-conventional pnpm install -D husky pnpm install -D lint-staged # 初始化 Hysky 的命 package.json "prepare": "husky install" "lint:lint-staged": "lint-staged", pnpm run prepare # husky 配置一个 pre-commit 钩子 npx husky add .husky/pre-commit "npm run lint:lint-staged" # 配置 commit-msg 钩子 运行 commitlint npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1" ```