Vite 基本環境配置

為何要使用 Vite ?

Vite 是透過 esbuild 轉譯成瀏覽器上的 ESM，不需要 Babel，
因為省下打包的時間，所以 Vite 才會如此快速!!

基本環境建置

起手

npm init @vitejs/app [專案名]

用 @ 取代 src 路徑，在 vite.config.js 加入 alias

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";
export default defineConfig({
   base: '/pigMap/dist/',//gh-pages 設定路徑
   plugins: [vue()],
   resolve: {
     alias: {'@/': `${path.resolve(__dirname, 'src')}/`}}
})

加入 router

router 設定可以參照 Vue 的文件

npm add vue-router@next

新增 router/index.js

import { createRouter, createWebHashHistory } from 'vue-router';
import Home from '@/components/HelloWorld.vue';
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'frontDesk',
    component: () => import('@/components/About.vue'),
  }
];
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});
export default router;

在 main.js 引用

import { createApp } from 'vue'
import App from './App.vue'
import router from './router';
const app=createApp(App)
app.use(router)
app.mount('#app')

引入 Tailwind css

安装 Tailwind CSS

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

創建配置文件

在根目錄下創建 tailwind.config.js 和 postcss.config.js 文件:

npx tailwindcss init -p
// tailwind.config.js
module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

導入Tailwind CSS

在 ./src/index.css文件中添加如下内容

/* ./src/index.css */
/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;

在 ./src/main.js 中配置

import { createApp } from 'vue'
import App from './App.vue'
import router from './router';
import './index.css'
const app=createApp(App)
app.use(router)
app.mount('#app')