perf(projects): 修改了unocss配置，添加naiveUI

build/plugins/unocss.ts

@@ -1,6 +1,3 @@
 import Unocss from 'unocss/vite'; // https://github.com/unocss/unocss
-import { presetUno, presetAttributify, presetIcons } from 'unocss';
 
-export default Unocss({
-  presets: [presetUno(), presetAttributify(), presetIcons()],
-});
+export default Unocss();

package.json

@@ -48,6 +48,7 @@
     "eslint-plugin-vue": "^9.3.0",
     "husky": "^8.0.0",
     "lint-staged": "^13.0.3",
+    "naive-ui": "^2.32.1",
     "prettier": "^2.7.1",
     "rollup-plugin-visualizer": "^5.7.1",
     "typescript": "^4.6.4",

src/layouts/BasicLayout/index.vue

@@ -1,14 +1,14 @@
 <template>
-  <div>layout-page</div>
-  route:
-  <br />
-  <router-link to="/test1">Go to test1</router-link>
-  |
-  <router-link to="/test2">Go to test2</router-link>
-  |
-  <router-link to="/test3">Go to test3</router-link>
-  <br />
-  <router-link to="/login">Go to login</router-link>
+  <div text-3xl text-center>layout-page</div>
+  <div text-center>
+    <router-link to="/test1">Go to test1</router-link>
+    |
+    <router-link to="/test2">Go to test2</router-link>
+    |
+    <router-link to="/test3">Go to test3</router-link>
+    |
+    <router-link to="/login" c-gray>Go to login</router-link>
+  </div>
   <router-view></router-view>
 </template>
 

src/styles/css/index.css

@@ -1 +1,7 @@
-@import './reset.css';
+@import './reset.css';
+
+html,
+body,
+#app {
+  height: 100%;
+}

src/views/login/index.vue

@@ -1,10 +1,10 @@
 <template>
-  <div style="text-align: center">
-    <h1>{{ msg }}</h1>
-    <span>
+  <div text-center flex-col-center wh-full>
+    <h1 font="bold" text-5xl>{{ msg }}</h1>
+    <div m-10>
       Already configured: vue3、vite3、unocss、eslint、prettier、ts、tsx、conventional、husk、lint-staged、vue-router
-    </span>
-    <div><router-link to="/">Go to layout</router-link></div>
+    </div>
+    <div c-lightBlue><router-link to="/">Go to layout</router-link></div>
   </div>
 </template>
 

src/views/test/test1.vue

@@ -1,6 +1,5 @@
 <template>
-  <div text-center bg-green-500 rounded c-rose>I prove that you have made the jump test1.</div>
-  <div text-center c-yellow>Uno css</div>
+  <div text-center c-blue>I prove that you have made the jump test1.</div>
 </template>
 
 <script setup lang="ts">

src/views/test/test2.vue

@@ -1,10 +1,5 @@
 <template>
-  <div style="text-align: center">I prove that you have made the jump test2.</div>
-  <button
-    class="py-2 px-4 font-semibold rounded-lg shadow-md text-white bg-green-500 hover:bg-green-700 border-none cursor-pointer"
-  >
-    Click me
-  </button>
+  <div text-center c-yellow>I prove that you have made the jump test2.</div>
 </template>
 
 <script setup lang="ts">

src/views/test/test3.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="text-align: center">I prove that you have made the jump test3.</div>
+  <div text-center c-red>I prove that you have made the jump test3.</div>
 </template>
 
 <script setup lang="ts">

tsconfig.json

@@ -15,7 +15,8 @@
     "paths": {
       "~/*": ["./*"],
       "@/*": ["./src/*"]
-    }
+    },
+    "types": ["naive-ui/volar"]
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
 }

unocss.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig, presetUno, presetAttributify, presetIcons } from 'unocss'; // https://github.com/unocss/unocss
+export default defineConfig({
+  presets: [presetUno(), presetAttributify(), presetIcons()],
+  shortcuts: {
+    'wh-full': 'w-full h-full',
+    'flex-center': 'flex justify-center items-center',
+    'flex-col-center': 'flex-center flex-col',
+  },
+});