如何开始vue3+vite+ts项目

vue3+vite+ts项目配置

搭建项目架构

使用vite创建项目

npm init vite@latest
​
√ Select a framework: » vue
√ Select a variant: » vue-ts

调整目录结构

.
├── public                  # 不需要打包的静态资源
│   └── favicon.ico
├── src
│   ├── api                 # 后台 API 接口封装
│   ├── assets              # 需要打包的静态资源
│   ├── components          # 公共组件
│   ├── composables         # 通用的组合式 API
│   ├── layout              # 页面布局模板
│   ├── plugins             # 插件
│   ├── router              # 路由
│   ├── store               # Vuex 存储
│   ├── styles              # 样式
│     └── index.scss        # 全局通用样式
│   ├── utils               # 工具模块
│   ├── views               # 路由页面
│   ├── App.vue             # 根组件
│   ├── main.ts             # 入口模块
│   ├── shims-vue.d.ts      # 补充 .vue 模块类型声明
│   └── vite-env.d.ts       # 补充 vite 类型声明
├── .gitignore
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── tsconfig.json
└── vite.config.ts

代码规范和 ESLint

安装EsLint

npm i eslint --save-dev

初始化EsLint配置

npx eslint --init
​
? How would you like to use ESLint? ...
  To check syntax only
  To check syntax and find problems
> To check syntax, find problems, and enforce code style
​
? What type of modules does your project use? ...
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these
  
 ? Which framework does your project use? ...
  React
> Vue.js
  None of these
  
? Does your project use TypeScript? » No / Yes
  
? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
  Node
​
? How would you like to define a style for your project? ...
> Use a popular style guide
  Answer questions about your style
  Inspect your JavaScript file(s)
  
? Which style guide do you want to follow? ...
  Airbnb: https://github.com/airbnb/javascript
> Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google
  XO: https://github.com/xojs/eslint-config-xo
  
 ? What format do you want your config file to be in? ...
> JavaScript
  YAML
  JSON

npm script配置

"scripts": {
  "lint": "eslint src/**/*.{js,jsx,vue,ts,tsx} --fix",
}

执行npm run lint

vue-eslint-plugin插件

lib/configs/ vue3规则

.eslintrc.js

extends: [
    'plugin:vue/vue3-strongly-recommended',
    'standard'
],

setting.json

"eslint.run": "onSave"

• 卸载vetur

• 安装eslint

• 安装volar

• 配置（格式化手动配置）

  • setting-->扩展--> eslint-->Format: Enable启用

编辑器集成

• 禁用 Vetur
• 安装 eslint 插件
• 安装 volar 插件

使用dbaeumer.vscode-eslint （打开新窗口）微软官方提供的扩展。

您必须配置eslint.validate扩展的选项来检查.vue文件，因为扩展默认只针对*.js或*.jsx文件。

示例 .vscode/settings.json：

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ]
}

如果您使用该 Vetur 插件，请设置 "vetur.validation.template": false 为避免默认 Vetur 模板验证。查看vetur 文档 （打开新窗口）了解更多信息

配置commit钩子

husky 提供执行git 钩子

git commit hook

npx mrm@2 lint-staged
​
// package.json
"lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "npm run lint",
      "git add"
   ]
}

在开发和构建的时候进行验证

github.com/vitejs/awes…

github.com/gxmari007/v…

npm install vite-plugin-eslint --save-dev
​
// vite.config.js
​
import eslintPlugin from 'vite-plugin-eslint';
​
plugins: [
    vue(),
    eslintPlugin({
      cache: false
    })
],

git commit 规范

www.ruanyifeng.com/blog/2016/0…

zjdoc-gitguide.readthedocs.io/zh_CN/lates…

• build：对构建系统或者外部依赖项进行了修改
• ci：对CI配置文件或脚本进行了修改
• docs：对文档进行了修改
• feat：增加新的特征
• fix：修复bug
• pref：提高性能的代码更改
• refactor：既不是修复bug也不是添加特征的代码重构
• style：不影响代码含义的修改，比如空格、格式化、缺失的分号等
• test：增加确实的测试或者矫正已存在的测试

工具

commitlint.js.org/#/

# For Windows
npm install --save-dev @commitlint/config-conventional @commitlint/cli
​
# Configure commitlint to use conventional config
// 新建 commitlint.config.js
module.exports = {extends: ['@commitlint/config-conventional']}
​
// 新建 commit-msg
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'
或
npx husky add .husky/commit-msg ' '
npx --no -- commitlint --edit "$1"  // 粘进文件

生成change log

Vite 中的 TS 环境说明

• vue-tsc 和 tsc

• • tsc 只能验证 ts 代码类型
  • vue-tsc 可以验证 ts + Vue Template 中的类型（基于 Volar）

  渲染函数和 JSX/TSX

• 什么是渲染函数：渲染函数

• 在渲染函数中使用 JSX：在渲染函数中使用 JSX

• 在 Vite 中提供 jsx/tsx 支持：@vitejs/plugin-vue-jsx

• Vue 中的 JSX 语法：Babel Plugin JSX for Vue 3.0

• 编辑器中的 ESLint 需要配置 "eslint.validate": ["typescriptreact"] 才能验证和格式化 .tsx 文件。

若有收获，就点个赞吧

css: {
  loaderOptions: {
    // 给 sass-loader 传递选项
    sass: {
      // @/ 是 src/ 的别名
      // 所以这里假设你有 `src/variables.sass` 这个文件
      // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
      additionalData: `@import "@/styles/variables.scss"`
    },
    // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
    // 因为 `scss` 语法在内部也是由 sass-loader 处理的
    // 但是在配置 `prependData` 选项的时候
    // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
    // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
    scss: {
      additionalData: `@import "~@/variables.scss";`
    },
    // 给 less-loader 传递 Less.js 相关选项
    less: {
      // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
      // `primary` is global variables fields name
      globalVars: {
        primary: '#fff'
      }
    }
  }
}