大事件管理系统（vue3）compositionAPI/pinia/pinia持久化处理/Element Plus/pnpm包管理器/Eslint+prettier/husky(Git hooks)

后台数据管理系统 - 项目架构设计

在线演示：https://fe-bigevent-web.itheima.net/login

接口文档: https://apifox.com/apidoc/shared-26c67aee-0233-4d23-aab7-08448fdf95ff/api-93850835

接口根路径： http://big-event-vue-api-t.itheima.net

本项目的技术栈 本项目技术栈基于 ES6、vue3、pinia、vue-router 、vite 、axios 和 element-plus

pnpm 包管理器 - 创建项目

一些优势：比同类工具快 2倍 左右、节省磁盘空间… https://www.pnpm.cn/

安装方式：

npm install -g pnpm
1

创建项目：

pnpm create vue
1

1.创建项目

pnpm create vue
1

2.进入项目目录
3.安装依赖
4.启动项目

ESLint & prettier 配置代码风格

Eslint擅长校验错误，prettier擅长格式化，提高代码美观度
环境同步：

1. 安装了插件 ESlint，开启保存自动修复
2. 禁用了插件 Prettier，并关闭保存自动格式化

// ESlint插件 + Vscode配置 实现自动格式化修复
"editor.codeActionsOnSave": {
    "source.fixAll": true
},
"editor.formatOnSave": false,
1
2
3
4
5

配置文件 .eslintrc.cjs

1. prettier 风格配置 https://prettier.io

   1. 单引号

   2. 不使用分号

   3. 每行宽度至多80字符

   4. 不加对象|数组最后逗号

   5. 换行符号不限制（win mac 不一致）

2. vue组件名称多单词组成（忽略index.vue）

3. props解构（关闭）

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier/skip-formatting'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    //prettier专注于代码的美观度，（格式化工具）
    //禁用格式化插件prettier，format on save 关闭
    //安装EsLint插件，并配置保存时自动修复
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true, // 单引号
        semi: false, // 无分号
        printWidth: 80, // 每行宽度至多80字符
        trailingComma: 'none', // 不加对象|数组最后逗号
        endOfLine: 'auto' // 换行符号不限制（win mac 不一致）
      }
    ],
    //Eslint关注于规范,不符合规范会报错
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index'] // vue组件名称多单词组成（忽略index.vue）
      }
    ],
    'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验，props解构会丢失响应式
    // 
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/空白诗007/article/detail/768316