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

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

 

創建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"],
};

記得在vscodesetting.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這種奇怪的錯誤,我也不是很確定原因,有厲害的大大可以留言告訴我XD

$ 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>

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。