unocss

README.md

@@ -2,4 +2,9 @@
 
 > 一个项目模板 
 
-## use pnpm
+## use pnpm
+
+```bash
+pnpm i
+pnpm run dev
+```

package.json

@@ -21,6 +21,7 @@
     "eslint": "^8.50.0",
     "less": "^4.2.0",
     "typescript": "^5.0.2",
+    "unocss": "^0.56.1",
     "vite": "^4.4.5",
     "vue-tsc": "^1.8.5"
   }

src/main.ts

@@ -2,5 +2,6 @@ import { createApp } from 'vue'
 import './style.less'
 import App from './App.vue'
 import { router } from '@/router'
+import 'virtual:uno.css'
 
 createApp(App).use(router).mount('#app')

src/views/home.vue

@@ -3,7 +3,9 @@
 
 <template>
   <div class="view-con">
-    <h1>home</h1>
+    <h1 class="bg-white font-italic">
+      home
+    </h1>
   </div>
 </template>
 

tsconfig.json

@@ -1,31 +1,26 @@
 {
   "compilerOptions": {
     "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "jsx": "preserve",
     "useDefineForClassFields": true,
     "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "types": ["node"],
-    "skipLibCheck": true,
-
-    /* Bundler mode */
     "moduleResolution": "node",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "types": ["node"],
     // "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
-    "isolatedModules": true,
     "noEmit": true,
-    "jsx": "preserve",
-
-    /* Linting */
+    "isolatedModules": true,
     "strict": true,
+    "noFallthroughCasesInSwitch": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-
-    "paths": {
-      "@/*": ["./src/*"]
-    }
+    "skipLibCheck": true
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
-  "exclude": ["tsconfig.json", "tsconfig.node.json", "node_modules"],
   "references": [{ "path": "./tsconfig.node.json" }],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "exclude": ["tsconfig.json", "tsconfig.node.json", "node_modules"]
 }

unocss.config.ts

@@ -0,0 +1,6 @@
+// uno.config.ts
+import { defineConfig } from 'unocss'
+
+export default defineConfig({
+  // ...UnoCSS options
+})

vite.config.ts

@@ -1,14 +1,14 @@
+import { resolve } from 'node:path'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import {resolve} from 'path'
-
+import UnoCSS from 'unocss/vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [UnoCSS(), vue()],
   resolve: {
     alias: {
-      '@': resolve(__dirname, 'src')
-    }
-  }
+      '@': resolve(__dirname, 'src'),
+    },
+  },
 })