如何用Vite快速搭建一个vue3项目

Vue3
留言

vite 一个由 vue 作者尤雨溪开发的 web 开发工具，它具有以下特点：

  1. 快速的冷启动
  2. 即时的模块热更新
  3. 真正的按需编译

至于为什么选择 vite，官网上介绍的很详细，可点击查看为什么选择 vite，这里主要介绍一下如何用 vite 搭建一个包含前端开发常用配置的前端项目

初始化项目

查看vite 官网可知
yarn create @vitejs/app
这里选择 vue 框架，再选择 vue-ts 模板，然后根据提示操作即可

初始化项目也可以采用快捷方式，在命令中写好项目名称和模板
yarn create @vitejs/app project-name --template vue-ts

安装 eslint 及相关 plugin

yarn add eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-simple-import-sort -D

解释说明下相关 plugin:

eslint-plugin-vue

Vue.js 的官方 ESLint 插件

@typescript-eslint/parser

ESLint 的解析器，用于解析 typescript，从而检查和规范 Typescript 代码

@typescript-eslint/eslint-plugin

ESLint 插件，包含了各类定义好的检测 Typescript 代码的规范

eslint-plugin-simple-import-sort

自动排序 import 的插件

新建.eslintrc.js 文件

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  //定义eslint依赖的插件
  plugins: ["@typescript-eslint", "prettier", "simple-import-sort"],
  //定义文件继承的代码规范
  extends: ["plugin:vue/vue3-recommended", "plugin:prettier/recommended"],
  parserOptions: {
    //解析ts文件
    parser: "@typescript-eslint/parser",
    sourceType: "module",
    ecmaVersion: 2020,
    ecmaFeatures: {
      tsx: true // 允许解析TSX
    }
  },
  rules: {
    "prettier/prettier": "error",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/interface-name-prefix": "off",
    "@typescript-eslint/no-empty-function": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/no-var-requires": "off",
    "@typescript-eslint/camelcase": "off",
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "vue/html-self-closing": [
      "error",
      {
        html: {
          component: "always",
          normal: "always",
          void: "any"
        },
        math: "always",
        svg: "always"
      }
    ],
    "vue/require-default-prop": "off",
    "vue/no-v-html": "off",
    "sort-imports": "off",
    "import/order": "off",
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error"
  },
  overrides: [
    {
      files: ["**/__tests__/*.{j,t}s?(x)", "**/tests/unit/**/*.spec.{j,t}s?(x)"],
      env: {
        jest: true
      }
    }
  ]
};

安装 prettier 用于代码格式化

yarn add prettier eslint-config-prettier eslint-plugin-prettier -D

eslint-config-prettier

解决 ESLint 中的样式规范和 prettier 中样式规范的冲突，以 prettier 的样式规范为准，使 ESLint 中的样式规范自动失效

eslint-plugin-prettier

将 prettier 作为 ESLint 规范来使用

新建.prettierrc 文件

{
  "printWidth": 120,
  "proseWrap": "preserve",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": false,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "rangeStart": 0,
  "endOfLine": "lf",
  "insertPragma": false,
  "requirePragma": false,
  "useTabs": true
}

如果想在保存时编辑器自动规范代码还需要在 vscode 的配置文件中添加
"editor.formatOnSave": true

安装 stylelint 规范 style

yarn add stylelint stylelint-prettier stylelint-config-prettier stylelint-config-recess-order -D

新建.stylelintrc.js

module.exports = {
  defaultSeverity: "error",
  plugins: ["stylelint-prettier"],
  extends: ["stylelint-prettier/recommended", "stylelint-config-recess-order"],
  rules: {}
};

安装 commit-message 用于规范 git message

yarn add @commitlint/cli @commitlint/config-conventional -D
新建.commitlintrc.js 文件

module.exports = {
  extends: ["@commitlint/config-conventional"],
  rules: {
    "type-enum": [
      2,
      "always",
      [
        "release",
        "wip",
        "build",
        "chore",
        "ci",
        "docs",
        "feat",
        "fix",
        "perf",
        "refactor",
        "revert",
        "style",
        "test",
        "merge"]
    ]
  }
};

安装 ls-lint 用于规范文件夹命名

yarn add @ls-lint/ls-lint -D
新建.ls-lint.yml 文件

# 文件名及文件夹名命名规则
ls:
  src/components/*:
    .dir: PascalCase # 组件文件夹名命名模式
  src/views:
    .dir: camelCase | snake_case
  src/store:
    .dir: camelCase | kebab-case
  src/router:
    .dir: camelCase | kebab-case | regex:^__.+$
  src:
    .ts: camelCase
    .d.ts: camelCase | kebab-case
ignore:
  - .git
  - node_modules

安装 husky 和 lint-staged

用于对要提交的文件代码检查及格式化
yarn add husky lint-staged -D
修改 package.json

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS"
    }
  },
  "lint-staged": {
    "*.{vue,ts,js,scss}": [
      "prettier --write",
      "git add"
    ]
  }

配置项目运行任务

在 vscode 中选择终端->配置默认生成任务即可在.vscode 文件夹下生成 tasks.json 文件，内容如下：

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "dev",
      "problemMatcher": [],
      "label": "npm: dev",
      "detail": "vite",
      "group": {
        "kind": "build",
        "isDefault": true // 设置成默认任务
      }
    }
  ]
}

运行默认任务的快捷键是 ctrl+shift+b，这样每次开发时不用在命令行输入命令 yarn dev，直接按快捷键就行

配置项目中需要的 vscode 扩展

在项目根目录中的.vscode 文件夹下新建 extensions.json 文件
将下面内容填写到 extensions.json 文件中

{
  "recommendations": [
    "shenjiaolong.vue-helper",
    "octref.vetur",
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "stylelint.vscode-stylelint"
  ]
}

如果参与该项目的开发者 vscode 中没有安装所列插件，则会在右下角提示是否安装