MUKI AI Summary
想練習 TypeScript，使用 Vue3、Vite、TypeScript、TailwindCSS 和 ESLint 建立新專案。首先，安裝 Vite 與 TypeScript，確認在瀏覽器輸入 https://localhost:5173 出現畫面。接著，安裝 TailwindCSS，修改 tailwind.config.cjs 和 style.css，確保樣式生效。
安裝 ESLint 及相關插件，設定 .eslintrc.cjs 和 vite.config.ts，確保程式碼格式檢查正常運行。最後，安裝 standard 規範，並將模板上傳至 GitHub，方便他人使用。...
最近想要練習 TypeScript，聽說程式寫得愈複雜，要回查資料就愈方便
以下取自朋友的超～簡略分享：
前兩天看人別人的專案，沒有用 typescript，突然覺得自己好像不會寫 code 了。
一直想辦法找這個東西裡面有什麼、在哪裡被定義、在哪裡被用到，才知道我省下了多少時間。
因此，來用用 VUE 作者推薦的 Vite 吧！
安裝 Vite 與 TypeScript
$ npm create vite@latest 專案名稱 -- --template vue-ts $ cd 專案名稱 $ npm install $ npm run dev
網址列輸入 https://localhost:5173，出現以下畫面表示安裝完成
安裝 TailwindCSS
$ npm install -D tailwindcss postcss autoprefixer $ npx tailwindcss init -p
打開 tailwind.config.cjs，在 content 裡新增設定
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}打開 src/style.css，新增 tailwindCSS 語法
@tailwind base; @tailwind components; @tailwind utilities;
到 HelloWorld.vue 輸入以下語法，如果文字變大，也有出現底線，表示安裝成功。恭喜你，可以開心地使用 TailWindCSS 啦
<h1 class="text-3xl font-bold underline"> Hello world! </h1>
安裝 ESLint
- eslint：最主要的依賴包，一定要裝。
- eslint-plugin-vue：Vue.js 的官方 ESlint 插件，可以檢查 Vue 的程式碼
- vite-plugin-eslint：給 Vite 用的
- @vue/eslint-config-typescript：用於 Vue 的 eslint config typescript
- @typescript-esliint/eslint-plugin：可以替 TypeScript 提供 lint 規則的插件
- @typescript-eslint/parser：TypeScript 的 eslint 解析器
$ npm i -D eslint eslint-plugin-vue vite-plugin-eslint @vue/eslint-config-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser
新增 .eslintrc.cjs
module.exports = {
root: true,
env: {
node: true,
es2021: true
},
extends: [
"eslint:recommended",
"@vue/typescript/recommended",
"plugin:vue/vue3-essential",
],
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 2020,
},
rules: {
// 這邊可以自訂規則
},
}載入 vite-plugin-eslint 模組
打開 vite.config.ts 載入 vite-plugin-eslint 模組，並將 cache 設為 false，就可以在儲存時自動檢查調整你的格式
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslintPlugin from "vite-plugin-eslint" // 新增這行
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
eslintPlugin({ cache: false }) // 新增這行
]
})
安裝 standard 規範
- @vue/eslint-config-standard：在 Vue 裡面使用 standard 規範
$ npm install -D @vue/eslint-config-standard
修改 .eslintrc.cjs
extends: [ 'eslint:recommended', '@vue/typescript/recommended', 'plugin:vue/vue3-essential', '@vue/standard' // 新增這行 ],
直接套用模板
我有將這個 template 上傳到 Github，有興趣的朋友可以直接使用
GitHub - mukiwu/vue3-vite-typescript-tailwind-eslint
Contribute to mukiwu/vue3-vite-typescript-tailwind-eslint development by creating an account on GitHub.
https://github.com/mukiwu/vue3-vite-typescript-tailwind-eslint
24