vite 开箱使用及特点

vite 几个特点：

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

快速构建
npm create vite-app project-name
npm i
npm run dev

可以看到生成的目录非常简洁

index.html变化是入口文件导入方式

这样main.js中就可以使用ES6 Module方式组织代码

vite中可以直接导入.css文件，样式将影响导入的页面，最终会被打包到style.css。image.png

eslint 的使用
借助eslint规范项目代码，通过prettier做代码格式化。
首先在项目安装依赖，

配置eslint规则 .eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "prettier/prettier": [
      "warn",
      {
        // singleQuote: none,
        // semi: false,
        trailingComma: "es5",
      },
    ],
  },
};

如果有必要还可以配置prettier.config.js修改prettier的默认格式化规则

module.exports = {
  printWidth: 80, // 每行代码长度（默认80）
  tabWidth: 2, // 每个tab相当于多少个空格（默认2）
  useTabs: false, // 是否使用tab进行缩进（默认false）
  singleQuote: false, // 使用单引号（默认false）
  semi: true, // 声明结尾使用分号(默认true)
  trailingComma: 'es5', // 多行使用拖尾逗号（默认none）
  bracketSpacing: true, // 对象字面量的大括号间使用空格（默认true）
  jsxBracketSameLine: false, // 多行JSX中的>放置在最后一行的结尾，而不是另起一行（默认false）
  arrowParens: "avoid", // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid）
};

配置别名
给src/components定义别名，vite.config.js
const path = require("path");

module.exports = {
  alias: {
    // 路径映射必须以/开头和结尾
    "/comps/": path.resolve(__dirname, "src/components"),
  },
};

使用此别名

import CourseAdd from "/comps/CourseAdd.vue";
import Comp from "/comps/Comp.vue";