Vue3中前臺前端解決方案速記

Webpack VS Vite：
Webpack預設構建整個應用；穩妥
Vite只構建必須構建的內容；以原生ESM方式提供原始碼，讓瀏覽器構建；快

用Vite建立一個專案：
npm i -g vite@2.8.5
npm init vite@latest

在區域網內執行專案：
package.json
"scripts": {
"dev": "vite --host",

在Vite專案中安裝tailwindcss：

1. npm i -D tailwindcss@3.0.23 postcss@8.4.8 autoprefixer@10.4.
2. npx tailwindcss init -p 建立tailwind.config.js
3. 新增tailwindcss應用範圍：
   module.exports = {
   // Tailwind 應用範圍
   content: ['./index.html', './src/**/*.{vue,js}'],
   theme: {
   extend: {}
   },
   plugins: []
   }
4. 在src/styles/index.scss中匯入tailwind基礎指令元件，並在src/main.js引入：
   @tailwind base;
   @tailwind components;
   @tailwind utilities;
5. 安裝scss：
   npm i -D sass@1.45.0