前端框架搭建——从零到一搭建一个高颜值Vue3后台管理系统(一)

站长

2023年09月26日 11:18 · 阅读数 11

话不多说，先看项目地址：Element-Admin

项目展示

首页

前端框架搭建——从零到一搭建一个高颜值Vue3后台管理系统(一)

列表

前端框架搭建——从零到一搭建一个高颜值Vue3后台管理系统(一)

深色侧边栏

前端框架搭建——从零到一搭建一个高颜值Vue3后台管理系统(一)

暗黑主题

前端框架搭建——从零到一搭建一个高颜值Vue3后台管理系统(一)

移动端

前端框架搭建——从零到一搭建一个高颜值Vue3后台管理系统(一)

关于

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

技术栈

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

Vue3
Element Plus
Pinia
Unocss
Axios
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配置

初始化配置

初始化项目

pnpm create vite vite-demo
cd vite-demo
pnpm install
pnpm dev

editorconfig

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

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

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 -- "$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

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

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

前端框架搭建——从零到一搭建一个高颜值Vue3后台管理系统(一)

项目展示

登录

首页

列表

深色侧边栏

暗黑主题

移动端

关于

技术栈

初始化配置

初始化项目

editorconfig

prettier

ESLint

ts

husky

commitlint

约束包管理器