add: unocss

.gitignore

@@ -7,6 +7,7 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 package-lock.json
+pnpm-lock.yaml
 
 node_modules
 .DS_Store

README.md

@@ -8,7 +8,7 @@ Vue.js 是基于 JavaScript 构建用户界面的库。该模板使用 Vite 来
 
 ## 自定义配置
 
-请参阅 [[Vite配置参考](https://vitejs.dev/config/).
+请参阅 [[Vite配置参考]](https://vitejs.dev/config/).
 
 ## 项目设置
 

package.json

@@ -7,11 +7,13 @@
     "preview": "vite preview --port 4173"
   },
   "dependencies": {
+    "@unocss/reset": "^0.54.0",
     "guess": "^1.0.2",
     "vue": "^3.3.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",
+    "unocss": "^0.54.0",
     "vite": "^4.3.9"
   }
 }

src/App.vue

@@ -76,20 +76,20 @@ async function playChess(item, row, col) {
 </script>
 
 <template>
-  <div class="content flex-start">
-    <p class="flex-between mr-6px">
-      <label for="size" class="space-nowrap">棋盘大小：</label>
+  <div p-6px box-border flex justify-start>
+    <p mr-6px flex justify-between>
+      <label for="size" whitespace-nowrap>棋盘大小：</label>
       <input v-model="size" id="size" type="number">
     </p>
-    <p class="flex-between mr-6px">
-      <label for="win_size" class="space-nowrap">胜利棋数：</label>
+    <p mr-6px flex justify-between>
+      <label for="win_size" whitespace-nowrap>胜利棋数：</label>
       <input v-model="win_size" id="win_size" type="number" min="3" max="8">
     </p>
-    <button @click="confirm" class="space-nowrap mr-6px px-6px">重新开始</button>
-    <button @click="back" class="space-nowrap px-6px">返回上一步</button>
+    <button @click="confirm" whitespace-nowrap mr-6px px-6px>重新开始</button>
+    <button @click="back" whitespace-nowrap px-6px>返回上一步</button>
   </div>
-  <div class="content border-top content-lattice">
-    <p class="row" v-for="(lattice, r_i) in lattices" :key="r_i">
+  <div p-6px box-border flex flex-col items-center border="t t-solid #999">
+    <p flex flex-row v-for="(lattice, r_i) in lattices" :key="r_i">
     <p class="col" :class="records_obj[`${r_i}_${c_i}`]" v-for="(item, c_i) in lattice" :key="`${r_i}-${c_i}`"
       @click="playChess(item, r_i, c_i)">
     </p>

src/assets/main.css

@@ -16,50 +16,10 @@ body,
   font-weight: normal;
 }
 
-.content {
-  padding: 6px;
-  box-sizing: border-box;
-}
-
-.flex-between {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.flex-start {
-  display: flex;
-  justify-content: start;
-  align-items: center;
-}
-
-.mr-6px {
-  margin-right: 6px;
-}
-.px-6px{
-  padding-left: 6px;
-  padding-right: 6px;
-}
-
 input {
   width: 60px;
 }
 
-.border-top {
-  border-top: 1px solid #999;
-}
-
-.content-lattice {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.row {
-  display: flex;
-  flex-direction: row;
-}
-
 .col {
   width: 20px;
   height: 20px;
@@ -122,8 +82,4 @@ input {
 .isWin::after {
   background-color: red;
   border-color: var(--p-win-border-color);
-}
-
-.space-nowrap {
-  white-space: nowrap;
 }
\ No newline at end of file

src/components/RandomTree.vue

 <template>
-    <canvas class="canvas" width="400" height="300" ref="canvas"></canvas>
+    <canvas absolute right-10px bottom-10px pointer-events-none opacity-40 class="canvas" width="400" height="300"
+        ref="canvas"></canvas>
 </template>
 
 <script setup>
@@ -69,14 +70,3 @@ function drawBranch(ctx, v0, thick, len, dir) {
     drawBranch(ctx, v1, thick * 0.8, len * 0.8, dir - Math.random() * 46);
 }
 </script>
-
-<style>
-.canvas {
-    position: absolute;
-    right: 10px;
-    bottom: 10px;
-    pointer-events: none;
-    opacity: 0.4;
-}
-
-</style>
\ No newline at end of file

src/main.js

 import { createApp } from 'vue'
 import App from './App.vue'
+import '@unocss/reset/normalize.css'
+import 'virtual:uno.css'
 
 import './assets/main.css'
 

uno.config.js

+// uno.config.js
+import {
+  defineConfig, presetAttributify, presetIcons,
+  presetTypography, presetUno,
+  transformerDirectives, transformerVariantGroup
+} from 'unocss'
+
+export default defineConfig({
+  presets: [
+    presetUno(),
+    presetAttributify(),
+    presetIcons(),
+    presetTypography(),
+  ],
+  transformers: [
+    transformerDirectives(),
+    transformerVariantGroup(),
+  ],
+})
\ No newline at end of file

vite.config.js

 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import UnoCSS from 'unocss/vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), UnoCSS(),],
   server: {
     host: true
   },