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