vite

撰文動機 因為我是忘忘人所以做個筆記😀 安裝步驟 用 Vite 建立新專案 安裝 Vue Router & Pinia 安裝 Element plus 加載套件 開始實作 用 Vite 建立新專案 npm create vite@latest 接下來按照步驟建立專案就好 專案名稱 選擇框架 是否使用 Type Script Done 安裝 Vue Router & Pinia 請自己按需要增減 npm install pinia vue-router@4 --save 安裝 Element plus npm install element-plus --save 加載套件 建立 vue router 檔案 import {createRouter, createWebHistory} from 'vue-router' import HelloWorld from '@/components/HelloWorld.vue'; export const router = createRouter({ history: createWebHistory(), routes: [ {path: '/', component: HelloWorld}, ], }); 安裝完之後進到 main....

目的 在以前的版本中曾經使用過以 @ 代替 ./src 的語法，但是在新的版本突然不支援了，於是去查了一下該如何加到專案中。 方法 需要在兩個檔案中建立 alias，分別是 tsconfig.json 和 vite.config.ts。 // tsconfig.json { "compilerOptions": { "target": "ES2020", "useDefineForClassFields": true, // 省略... // 重點 "paths": { "@/*": [ "./src/*" ] } // 重點 } } // vite.config.ts export default defineConfig({ plugins: [vue()], // 重點 resolve: { alias: { '@': '/src' } } // 重點 }) 如何 import // ts file import {router} from "@/router.ts"; // component import App from '@/App....