zi-admin 1.前端项目构建和代码规范

好的规范可以让项目更稳健，一定角度来说可以让代码更加的健壮，开发过程也会舒适很多

项目创建

pnpm create vue@latest

配置eslint和prettier

• prettier

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "arrowParens": "always",
  "bracketSameLine": true,
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxSingleQuote": false,
  "printWidth": 180,
  "proseWrap": "never",
  "quoteProps": "preserve",
  "requirePragma": false,
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "useTabs": false,
  "vueIndentScriptAndStyle": false,
  "singleAttributePerLine": false
}

• eslint

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

module.exports = {
  root: true,
  'extends': ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/eslint-config-typescript', '@vue/eslint-config-prettier/skip-formatting'],
  parserOptions: {
    ecmaVersion: 'latest',
  },
  rules: {
    'vue/no-v-html': 'off',
    'vue/no-unused-vars': 'off',
    'vue/no-setup-props-reactivity-loss': 'off',
    'vue/no-deprecated-slot-attribute': 'off',
    'vue/no-deprecated-slot-scope-attribute': 'off',
    'vue/no-deprecated-data-object-declaration': 'off',
  },
}

编辑器优化配置：\.vscode\settings.json

{
  // eslint
  "editor.codeActionsOnSave": {
    "source.fixAll": "never",
    "source.fixAll.eslint": "always"
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 路径映射 --
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src",
    "~": "${workspaceRoot}/src",
    "public": "${workspaceRoot}/src/public"
  },
  //是否开启文件成组
  "explorer.fileNesting.enabled": true,
  //文件组是否默认展开
  "explorer.fileNesting.expand": false,
  //文件成组规则
  "explorer.fileNesting.patterns": {
    "tsconfig.json": "*.json, *.config.js, *.config.ts,*.cjs",
    "README.md": ".git*, .eslint*, .prettier*, .stylelint*, commitlint*, .editorconfig,LICENSE,pnpm*,.npm*"
  },
  "intelephense.files.exclude": [
    "**/.git/**",
    "**/.svn/**",
    "**/.hg/**",
    "**/CVS/**",
    "**/.DS_Store/**",
    "**/node_modules/**",
    "**/bower_components/**",
    "**/vendor/**/{Tests,tests}/**",
    "**/.history/**",
    "**/vendor/**/vendor/**",
    "**/dist/**"
  ],
  "files.exclude": {
    "*.code-workspace": true,
    "**/dist": true,
    "**/node_modules": true,
    "**/public/js/app.js": true,
    "**/unpackage": true,
    "**/vendor.js": true,
    ".github": true,
    ".vscode": true
  },
  "files.watcherExclude": {
    "**/dist/**": true,
    "**/node_modules/**": true,
    "**/node_modules/*/**": false,
    "**/vendor/**": true
  },
  "search.exclude": {
    "*.code-workspace": true,
    "**/dist": true,
    "**/vendor": true,
    "**/node_modules": true
  }
}

git

初始化git

• 在整个项目根目录添加.gitignore文件

HELP.md
target/
!.mvn/wrapper/maven-wrapper.jar
!**/src/main/**
!**/src/test/**

### STS ###
.classpath
.factorypath
.project
.settings
.springBeans
.sts4-cache

### IntelliJ IDEA ###
.idea
*.iws
*.iml
*.ipr

### web ###
**/dist
**/node_modules
**/.vscode

• 初始化git init

commitizen

让git提交更规范：pnpm add commitizen cz-conventional-changelog -D

安装完成后在package.json添加一行脚本"commit": "git-cz"及一个配置选项:

"config": {
    "commitizen": {
      "path": "cz-conventional-changelog"
    }
 },

sass

• 安装：pnpm i sass

• 在vite.config.ts中添加配置全局样式文件

// scss 全局变量的配置
  css: {
    preprocessorOptions: {
      scss: {
        javascriptEnabled: true,
        additionalData: '@import "@/styles/_variables.scss";',
      },
    },
  },

• 在main.ts中导入main.scss

配置vite

开发服务器和预览服务器

// 开发服务器配置
  server: {
    host: '0.0.0.0',
    port: 8080,
    open: true,
  },
  // 预览服务器配置
  preview: {
    host: '0.0.0.0',
    port: 5050,
    open: true,
  },

如果IDE提示:找不到模块“./App.vue”或其相应的类型声明。，则在env.d.ts中添加：

declare module '*.vue' {
  import type { DefineComponent } from 'vue'

  const vueComponent: DefineComponent<{}, {}, any>

  export default vueComponent
}