项目展示

登录

首页

列表

深色侧边栏

暗黑主题

移动端

关于

为什么我要写这个项目呢，后台业务在项目中是很常见的，而市面上的后台框架其实都很好，但是很多时候感觉封装的很深，所以是想要自己搭建一个框架方便后面自己使用，也可以通过这种方式分享下经验和心得，目前的话这个项目不是一个赶工的项目，预计会持续更新产出。

技术栈

此项目涉及的技术栈主要有

1. Vue3
2. Element Plus
3. Pinia
4. Unocss
5. Axios
6. TypeScript

├── public                   # 不参与编译的资源文件├── build                    # 构建时的一些插件配置├── src                      # 主程序目录│   ├── api                     # api请求│   ├── assets                  # 资源文件│   │   ├── svg                     # svg图标│   │   └── images                  # 图片资源│   ├── components              # 全局公共组件│   ├── config                  # 主题相关配置│   ├── directives              # 自定义指令│   ├── hooks                   # hooks│   ├── layout                  # 页面结构组件│   ├── locales                 # 国际化│   ├── plugins                 # 加载插件与静态│   ├── router                  # 路由目录│   ├── store                   # pinia 配置│   ├── style                   # 样式目录│   ├── utils                   # 工具类│   ├── views                   # 页面│   ├── APP.vue                  # App.vue│   └── main.ts                 # main.ts├── types                   # 全局类型├── .editorconfig           # 代码规范├── .prettierrc.js          # 代码规范├── .eslintrc               # 代码规范├── tsconfig.json           # ts配置├── uno.config.ts           # unocss配置├── commitlint.config.js    # 提交信息├── vite.config.ts      # vite配置

初始化配置

初始化项目

jspnpm create vite vite-democd vite-demopnpm installpnpm dev

editorconfig

• 在项目根目录下新建一个 .editorconfig 文件，主要作用为控制编辑器行为（需要安装EditorConfig for VS Code插件）

root = true[*] # 表示所有文件适用charset = utf-8 # 设置文件字符集为 utf-8indent_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 = offtrim_trailing_whitespace = false

prettier

• 在项目根目录下新建一个 .prettierrc.js 文件，主要作用为格式化代码
• pnpm i prettier -D

module.exports = {  singleQuote: true,  printWidth: 100,  tabWidth: 2,  useTabs: false,  semi: true,  trailingComma: 'none',  endOfLine: 'auto'}

ESLint

• 在项目根目录下新建一个 .eslintrc.js 文件，主要作用为修复代码格式错误（需要安装ESLint插件）
• pnpm i eslint eslint-config-prettier eslint-define-config eslint-plugin-prettier eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/eslint-config-typescript -D

module.exports = {  root: true,  env: {    node: true  },  parser: 'vue-eslint-parser',  parserOptions: {    parser: '@typescript-eslint/parser',    ecmaVersion: 2018,    sourceType: 'module',    jsxPragma: 'React',    ecmaFeatures: {      jsx: true    }  },  extends: [    'plugin:vue/vue3-recommended',    'plugin:@typescript-eslint/recommended',    'plugin:prettier/recommended',    'eslint-config-prettier'  ],  rules: {    'space-before-function-paren': 'off',    '@typescript-eslint/ban-ts-ignore': 'off',    '@typescript-eslint/explicit-function-return-type': 'off',    '@typescript-eslint/no-explicit-any': 'off',    '@typescript-eslint/no-var-requires': 'off',    '@typescript-eslint/no-empty-function': 'off',    '@typescript-eslint/no-use-before-define': 'off',    '@typescript-eslint/ban-ts-comment': 'off',    '@typescript-eslint/ban-types': 'off',    '@typescript-eslint/no-non-null-assertion': 'off',    '@typescript-eslint/explicit-module-boundary-types': 'off',    '@typescript-eslint/no-unused-vars': [      'error',      {        argsIgnorePattern: '^_',        varsIgnorePattern: '^_'      }    ],    'no-use-before-define': 'off',    'no-unused-vars': [      'error',      {        argsIgnorePattern: '^_',        varsIgnorePattern: '^_'      }    ],    'vue/comment-directive': 'off',    'vue/script-setup-uses-vars': 'error',    'vue/multi-word-component-names': 'off',    'vue/custom-event-name-casing': 'off',    'vue/attributes-order': 'off',    'vue/one-component-per-file': 'off',    'vue/html-closing-bracket-newline': 'off',    'vue/max-attributes-per-line': 'off',    'vue/multiline-html-element-content-newline': 'off',    'vue/singleline-html-element-content-newline': 'off',    'vue/attribute-hyphenation': 'off',    'vue/require-default-prop': 'off',    'vue/html-self-closing': [      'error',      {        html: {          void: 'always',          normal: 'never',          component: 'always'        },        svg: 'always',        math: 'always'      }    ]  }}

ts

• 在项目根目录下新建一个 tsconfig.json 文件

{	"compilerOptions": {		"baseUrl": ".",    "module": "ESNext",		"target": "ESNext",		"lib": ["DOM", "ESNext"],		"strict": true,		"esModuleInterop": true,		"allowSyntheticDefaultImports": true,		"jsx": "preserve",		"moduleResolution": "node",		"isolatedModules": true,		"resolveJsonModule": true,		"noUnusedLocals": true,		"strictNullChecks": true,		"forceConsistentCasingInFileNames": true,		"paths": {			"@/*": ["./src/*"]		},		"types": ["vite/client", "node"]	},	"include": [		"src/**/*.ts",		"src/**/*.d.ts",		"src/**/*.tsx",		"src/**/*.vue",		"types/**/*.d.ts",		"types/**/*.ts",		"build/**/*.ts",		"build/**/*.d.ts",		"mock/**/*.ts",		"vite.config.ts"	],	"exclude": ["node_modules", "dist"]}

husky

主要作用在于提交代码前为我们做一些事情，如格式化、检查提交规范等（需要先初始化git）

• 1.pnpm install -D husky
• 2.npx husky-init 在.husky/pre-commit下加入下面的代码

#!/usr/bin/env sh. "$(dirname -- "$(dirname -- "$0")")/_/husky.sh"// 对应的script脚本为"lint": "eslint \"{src,mock,build}/**/*.{vue,ts,tsx}\" --fix"pnpm lint

commitlint

• 主要作用为提交代码时的规范名称检查
• 在项目根目录下新建一个 commitlint.config.js 文件
• pnpm install -D @commitlint/config-conventional @commitlint/cli
• npx husky add .husky/commit-msg 'npx --no -- commitlint --edit '

module.exports = {  extends: ['@commitlint/config-conventional'],  rules: {    'body-leading-blank': [2, 'always'],    'footer-leading-blank': [1, 'always'],    'header-max-length': [2, 'always', 108],    'subject-empty': [2, 'never'],    'type-empty': [2, 'never'],    'subject-case': [0],    'type-enum': [      2,      'always',      [        'feat', // 新功能        'fix', // 修复bug        'perf', // 性能优化        'style', // 修改代码格式，不影响代码逻辑        'docs', // 修改文档        'test', // 修改测试用例        'refactor', // 代码重构        'build', // 构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）        'ci', // 持续集成        'chore', // 其它提交        'revert', // 代码回滚        'types', // ts        'wip' // 功能开发中      ]    ]  }}

约束包管理器

• 在package.json里新增scripts脚本"preinstall": "npx only-allow pnpm"，作用项目里只能使用pnpm

好了，初期的一些工程化我们就做好了，后面的后面再说吧~

作者：小心海一拳打爆提瓦特
链接：
https://juejin.cn/post/7281185552811917375