Vite 基本環境配置

Jason Zeng
4 min readAug 15, 2021

--

為何要使用 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.jspostcss.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')

--

--

Jason Zeng
Jason Zeng

No responses yet