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