如何使用 vite + vue3 建立一個新專案？

vite 是最近越來越流行的建立前端專案的手腳架，為什麼他會這麼流行呢？

1. 快速的開發環境
2. 即時重整
3. 模組化開發
4. 支援多種框架：vue、react…
5. TypeScript 支援

結論：使用 Vite 可以帶來更快的開發速度、更好的性能，並提供了靈活的配置選項，使其成為一個吸引人的選擇。

當然安裝這些套件還要視每個人的需求來選擇，例如：一頁式網站可能就不需要安裝 router；形象網站不打 api 就不需要安裝 axios 等等。

建立 vite + vue 專案

根據官網的說明，建立vite專案的指令：

$ yarn create vite

然後跟著指令選擇我們要建立的框架：vue

新手如果對 js 的資料型態還不熟悉的話，請選擇 javascript 才不會挫折重重；不過建議最終我們都還是要朝向 Typescript 的撰寫編碼，程式碼才會越來越優秀喔！

由於 vite 可以建立多種框架，vue、react、preact…等，所以你要快速的指定要建立的某種框架也可以：

$ yarn create vite my-project --template vue 

專案建立完成他會提醒你接下來的步驟：

進入專案，安裝依賴套件，啟動專案

$ cd my-project
$ yarn
$ yarn dev 

啟動之後會給你一個預覽網址

用瀏覽器打開網址就可以看到網頁囉！

設定 vite.config.js

vite.config.js 可以定義的東西很多，那我們新專案建立的時候，先設定別名就好。

建立專案後，vite.config.js 會在你的專案資料夾的根目錄。

為什麼要設定別名？

因為我們通常在程式中引入檔案都是用「相對路徑」

假設以下是我的資料夾結構：

--components
  |--layout
     |--TheHeader.vue
--views
  |--dashboard
     |--HomeView.vue

如果今天我要在HomeView.vue裡面引用TheHeader.vue的話，沒有設定別名時候，我的寫法會是這樣：

import Header from "../../components/layout/TheHeader.vue";

如果我今天設定了某路徑別名叫做@，寫法就會變成類似這樣：

import Header from "@/components/layout/TheHeader.vue";

這樣的寫法的好處就是：

1. 我不用寫一長串../../../這種很醜的路徑，不用去記說我現在正在撰寫的檔案位於多深層的資料夾，不管多深，我就是只要寫@（我取的別名）就好了。
2. 我正在撰寫的文件如果改動位置，假設多了一層資料夾，我也不用去新增一層../引用路徑。

新增alias別名

我把src/這層指定一個別名叫做@

import { fileURLToPath, URL } from "node:url"; // 這個直接引入就可以囉，不用額外安裝
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
// 新增下面這個resolve物件
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

安裝 ui 框架

vue3 的 ui 框架有滿多都發展得很成熟了，像是Vuetify、Element Plus、Ant Design Vue…等。

我今天示範安裝的框架是 Ant Design Vue （以下簡稱 antdv）

$ yarn add ant-design-vue@4.x 

安裝好後，可以看到原本的main.js是有先幫你引入他自己的style.css：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

createApp(App).mount('#app')

因為我們要使用的是 antdv 的樣式，所以要

1. 在main.js啟用 antdv，
2. 引入 antdv 的 css
3. 刪掉styles.css

import { createApp } from "vue";
import App from "./App.vue";

import Antd from "ant-design-vue";
import "ant-design-vue/dist/reset.css";

const app = createApp(App);
app.use(Antd);

app.mount("#app");

如果antdv 預設的樣式想要修改的話，可以在App.vue統一修改

<template>
<a-config-provider
    :theme="{
      components: {
        Button: {
          colorPrimary: '#fed45c',
          colorTextLightSolid: '#333',
          colorPrimaryHover: '#ffde40',
          colorPrimaryActive: '#ecba2d',
        },
        Menu: {
          colorItemTextSelected: '#333',
          colorItemBgSelected: '#fffbe6',
        },
      },
    }"
  >
   //...
  </a-config-provider>
</template>

安裝 pinia

安裝的步驟都可以在官網找到，

或是參考我之前的教學文章《vue3 使用 pinia 狀態管理新手教學》

$ yarn add pinia

註冊套件

import { createPinia } from 'pinia';


// ...
app.use(createPinia()); 

建立 store

import { defineStore } from 'pinia';
 export const useUserStore = defineStore('user', {
   state: () => ({
     user: null,
   }),
   getters: {
     isAuth: (state) => state.user !== null,
     getToken: (state) => state.user?.token || '',
   },
   actions: {
     setUser(user) {
       this.user = user;
     },
     logout() {
       this.user = null;
     },
   },
 });