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