vite使用

css module写法：

<template>
  <a :class="$style.link">aaa</a>
</template>
<style module>
.avatar {
  width: 200px;
  height: 200px;
  background-image: url(@/assets/kf.jpg);
  background-size: contain;
}
</style>

template中的a连接最终会被编译为：

aaa

Vue + Vite技术栈中使用less和sass：

<template>
  <h2>less</h2>
  <h3>sass</h3>
</template>
<style scoped lang="less">
@color: red;
h2 {
  color: @color;
}
</style>
<style scoped lang="scss">
$color: orange;
h3 {
  color: $color;
}
</style>

支持ts

为了让Vite识别vue文件，需要添加src/shims-vue.d.ts文件：

declare module '*.vue' {
    import { DefineComponent } from 'vue';
    const component: DefineComponent<{}, {}, any>;
    export default component;
}

为了让vscode编辑器不报错，需要添加src/vite-env.d.ts文件：

/// <reference types="vite/client"/>

这个三斜杠后面的内容表示编译器在编译时引入哪些文件

支持eslint

package.json中配置eslint相关的规则：

{
  "name": "13.vite",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "lint": "eslint --ext .ts,vue src/** --no-error-on-unmatched-pattern --quiet",
    "lint:fix": "eslint --ext .ts,vue src/** --no-error-on-unmatched-pattern --quiet --fix",

配置上述eslint脚本之后，执行npm run lint就会宰控制台中打印出错误信息，执行npm run lint:fix就会将这些错误修复

\

prettier整合到eslint里面：

.eslintrc文件中主要修改了extends和rules：

module.exports = {
  root: true, //eslintrc是可以继承的，顶级就是根配置项
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    "plugin:vue/vue3-recommended",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint",
  ],
  parserOptions: {
    ecmaVersion: 2021,
  },
  rules: {
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": "off",
    "prettier/prettier": ["error", { endOfLine: "auto" }], //换行 window \r\n linux \n mac \r
  },
};

使用githooks：

npm i husky lint-staged @commitlint/cli @commitlint/config-conventional --save-dev

\