vite出了这么长时间，我还没入手呢，还在用vue-cli系列，现在赶紧练练手首先

开始

初始化项目 pnpm create vite

项目结构

看起和vue-cli差不多的结构，不过如何index.html没放到public里面，跑一下需要执行一下pnpm install 下载依赖，嗯嗯，运行时编译确实快很多

css工程化

Vite 本身对 CSS 各种预处理器语言Sass/Scss、Less和Stylus做了内置支持，不过需要我们下载对应的预处理工具库，习惯使用sass，下载sass：pnpm install sass -D，这里不用node-sass和sass-loader真的好，两个版本问题是真的难搞

搞个hello，world

<template>
   <h1 class="title">hello word</h1>
</template>

<style lang="scss" scoped>
$theme-color: red;
.title{
  color:$theme-color;
  display: flex;
  transform: translate3d(200px,200px,200px);
}
</style>

发现vite没有做浏览器的兼用：

要下载postcss插件我这里使用autoprefixer,Vite 配置文件中已经提供了 PostCSS 的配置入口:

// vite.configt.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import autoprefixer from "autoprefixer"
// https://vitejs.dev/config/
export default defineConfig({
  css:{
    postcss:{
      plugins:[autoprefixer({
        overrideBrowserslist: ["> 1%", "last 2 versions"]
     
      })]
    }
  },
  plugins: [vue()],
})

关于Browserslist配置可以查看github.com/browserslis… 和browsersl.ist/

搞定...

postcss 还是很强大的，vue的scoped属性的效果主要通过PostCSS实现的，通过动态添加一个属性，给CSS选择器额外添加一个对应的属性选择器，除了这些postcss还能将 px 转换为 rem ： postcss-pxtorem 等等

CSS Modules 在 Vite 也是自带的，Vite 会对后缀带有.module的样式文件自动应用，css modules能将 CSS 类名处理成哈希值，这样就可以避免同名的情况下样式污染的问题，注意的是同一份.module样式文件在不同的vue文件引用是生成同一个哈希类名的，虽然使用scoped 也减少 CSS 样式冲突，但是全局样式同名的话也会影响到样式。

ESLint+Prettier规范化

vite 不像vue-cli可以在项目初始化选择ESLint做规范化工具,需要手动下载eslint

pnpm i eslint -D

npx eslint --init

这我选择的配置完成后生成.eslintrc.cjs 再下载Prettier，在代码格式化这一块Prettier很好用，eslint+prettier组合做代码规范化很好用。 pnpm i prettier -D

集成eslint pnpm i eslint-config-prettier eslint-plugin-prettier -D

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended",
        "prettier", //++
        "plugin:prettier/recommended" //++
    ],
    "overrides": [
    ],
    "parser": "vue-eslint-parser", // 换成这个解释器解析vue文件
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module",
        "parser": "@typescript-eslint/parser",
    },
    "plugins": [
        "vue",
        "@typescript-eslint",
        "prettier"
    ],
    "rules": {
        "prettier/prettier": "error",
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
};

prettier配置 .prettierrc.js

module.exports = {
    printWidth: 160, 
    tabWidth: 2, 
    useTabs: false, 
    singleQuote: true,
    semi: true, 
    trailingComma: "none", 
    bracketSpacing: true 
  };

// 配置一下package.json,执行自动修复，也可以下载一个vscode eslint+prettier插件来配合

"scripts": {
    "lint:script": "eslint --ext .js,.vue,.ts, --fix --quiet ./src"
  },

注意prettier和eslint的冲突配置，不然会报错

现在要把eslint集成到vite，然编译运行的时候知道报错 pnpm i vite-plugin-eslint -D

import eslint from  "vite-plugin-eslint"
export default defineConfig({
 ...
  plugins: [
    eslint({
    include: ["src/**/*.js", "src/**/*.ts", "src/**/*.vue","src/*.vue"],
    exclude: ["./node_modules/**"],
    cache: false
  }),...],
...
})

vite4+vue3+ts入手

开始

css工程化

ESLint+Prettier规范化