uni-ui 整合

package.json

@@ -57,6 +57,7 @@
     "@dcloudio/uni-mp-weixin": "3.0.0-4020920240930001",
     "@dcloudio/uni-mp-xhs": "3.0.0-4020920240930001",
     "@dcloudio/uni-quickapp-webview": "3.0.0-4020920240930001",
+    "@dcloudio/uni-ui": "^1.5.6",
     "vue": "^3.4.21",
     "vue-i18n": "^9.1.9"
   },
@@ -67,6 +68,8 @@
     "@dcloudio/uni-stacktracey": "3.0.0-4020920240930001",
     "@dcloudio/vite-plugin-uni": "3.0.0-4020920240930001",
     "@vue/runtime-core": "^3.4.21",
+    "sass": "^1.79.5",
+    "sass-loader": "10.1.1",
     "vite": "5.2.8"
   }
 }

src/pages.json

@@ -1,4 +1,11 @@
 {
+	"easycom": {
+		"autoscan": true,
+		"custom": {
+			// uni-ui 规则如下配置
+			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
+		}
+	},
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 		{
 			"path": "pages/index/index",

src/pages/my-info/my-info.vue

@@ -2,8 +2,9 @@
 	<view>
 		页面内容
 	</view>
-
-  <button @click="toTestPage">进入测试页面</button>
+  <view class="warp">
+    <button class="button" type="primary" @click="toTestPage">进入测试页面</button>
+  </view>
 </template>
 
 <script setup>
@@ -16,5 +17,10 @@ function toTestPage(){
 </script>
 
 <style>
-
+.warp {
+  padding: 5rpx;
+}
+.button {
+  margin-bottom: 10px;
+}
 </style>

src/pages/test-page/test-page.vue

@@ -2,6 +2,13 @@
   <view>
     测试
   </view>
+  <uni-badge text="1"></uni-badge>
+  <uni-badge text="2" type="success"></uni-badge>
+  <uni-badge text="3" type="primary" :inverted="true"></uni-badge>
+  <uni-card>
+    <text>这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text>
+  </uni-card>
+
   <button @tap="back">返回上一页</button>
 </template>
 

vite.config.js

@@ -2,6 +2,9 @@ import { defineConfig } from 'vite'
 import uni from '@dcloudio/vite-plugin-uni'
 // https://vitejs.dev/config/
 export default defineConfig({
+  build:{
+
+  },
   plugins: [
     uni(),
   ],