关于vite: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";