vite建立vue專案的vite.config.js設定

vite來勢洶洶，漸漸發展成不再只是專屬於 vue 可以使用的腳手架打包工具，現在還支援 react 等流行框架。（有沒有一種要取代 webpack 的感覺？ＸＤ）

 

創建vue3專案

$ yarn create @vitejs/app my-project --template vue

$ cd my-project
$ yarn
$ yarn dev

這樣就可以跑起來一個 vue3 的 vite base 的專案囉！

 

 

設定vite.config.js

建立專案後，vite 會自動幫你產生一個vite.config.js檔案在根目錄，裡面預設的內容會先幫你載入 vue 的 plugin。

import vue from "@vitejs/plugin-vue";

/**
 * @type {import('vite').UserConfig}
 */
export default {
  plugins: [vue()]
};

 

加入alias

這邊有一個雷，就是他改版了（參考這裡）。

alias key原本需要寫兩個斜線/@/改成只要一個斜線/@。

import vue from "@vitejs/plugin-vue";
import path from "path";

/**
 * @type {import('vite').UserConfig}
 */
export default {
  plugins: [vue()],
  alias: {
    "/@": path.resolve(__dirname, "src"),
  },
};

這樣你在頁面中就可以直接這樣引入檔案：

import Header from "/@/components/Header/index.vue";

 

讓所有頁面中都可以使用 scss 變數

import path from "path";
const pathSrc = path.resolve(__dirname, "src");

export default {
  //...
  css: {
    preprocessorOptions: {
      scss: { additionalData: `@import "${pathSrc}/scss/variables";` },
    },
  },
};

 

加入Eslint

安裝相關套件

$ yarn add eslint eslint-config-prettier eslint-plugin-vue -D

新增.eslintrc.js檔案在根目錄

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/vue3-strongly-recommended",
    "eslint:recommended",
    "prettier",
    "prettier/vue",
  ],
  plugins: ["vue"],
};

記得在vscode的setting.json把自動檢查打開。

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
}

 

加入Stylelint

安裝套件：

• stylelint：你要用就是要裝，沒什麼好解釋的。
• stylelint-config-standard：官方標準的規範，必須。
• stylelint-config-recess-order：會有一些特定的順序，建議安裝，才不會有人margin放上面，有人padding又放下面。
• stylelint-config-prettier：如果你有使用prettier的話，可能他的樣式會跟stylelint有衝突，安裝這個可以解決它。
• stylelint-scss：應該很少人在寫純的css了吧，安裝自己使用的預處理器。

$ yarn add stylelint stylelint-config-standard stylelint-config-recess-order stylelint-config-prettier stylelint-scss -D

新增一個stylelint.config.js檔案在根目錄

module.exports = {
  extends: [
    "stylelint-config-standard",
    "stylelint-config-recess-order",
    "stylelint-config-prettier",
  ],
  plugins: ["stylelint-scss"],
};

想要儲存的時候，自動校驗＋修改，vscode要安裝外掛stylelint，並且setting.json加入設定：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "stylelint.enable": true,
}

 

Router

安裝套件，記住是要安裝下面這種，不要自己yarn add vue-router喔！

不然會出現createWebHistory is not a function這種奇怪的錯誤，我也不是很確定原因，有厲害的大大可以留言告訴我ＸＤ

$ yarn add vue-router@next

新增router/index.js

import { createWebHistory, createRouter } from "vue-router";

const routes = [
  {
    path: "/",
    name: "Home",
    component: () => import("/@/views/Home.vue"),
  },
  {
    path: "/about",
    name: "About",
    component: () => import("/@/views/About.vue"),
  },
];

export default createRouter({
  history: createWebHistory(),
  routes,
});

在main.js引用

import { createApp } from "vue";
import App from "/@/App.vue";
import Router from "/@/router";

createApp(App).use(Router).mount("#app");

把router-view放到你要顯示的區塊裡。

<template>
  <Header />
  <router-view />
</template>

<script>
import Header from "/@/components/Header/index.vue";
export default {
  name: "App",
  components: {
    Header,
  },
};
</script>