添加uview-plusUI框架及其API

App.vue

@@ -12,6 +12,6 @@
 	}
 </script>
 
-<style>
+<style lang="scss">
-	/*每个页面公共css */
+  @import "uview-plus/index.scss";
-</style>
+</style>

main.js

@@ -2,6 +2,14 @@ import App from './App'
 import * as Pinia from 'pinia'
 import { createSSRApp } from 'vue'
 import { createUnistorage } from 'pinia-plugin-unistorage'
+import uviewPlus, { setConfig } from 'uview-plus'
+
+setConfig({
+  config: {
+    // 修改默认单位为rpx
+    unit: 'rpx'
+  },
+})
 
 export function createApp() {
   const app = createSSRApp(App)
@@ -11,6 +19,9 @@ export function createApp() {
   store.use(createUnistorage())
   app.use(store)
 
+  // uview配置
+  app.use(uviewPlus)
+
   return {
     app,
     Pinia

package-lock.json

@@ -6,13 +6,46 @@
     "": {
       "dependencies": {
         "pinia": "^2.2.0",
-        "pinia-plugin-unistorage": "^0.1.2"
+        "pinia-plugin-unistorage": "^0.1.2",
+        "uview-plus": "^3.3.12"
       }
     },
     "node_modules/@vue/devtools-api": {
       "version": "6.6.3",
       "license": "MIT"
     },
+    "node_modules/clipboard": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz",
+      "integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
+      "license": "MIT",
+      "dependencies": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
+    "node_modules/dayjs": {
+      "version": "1.11.12",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.12.tgz",
+      "integrity": "sha512-Rt2g+nTbLlDWZTwwrIXjy9MeiZmSDI375FvZs72ngxx8PDC6YXOeR3q5LAuPzjZQxhiWdRKac7RKV+YyQYfYIg==",
+      "license": "MIT"
+    },
+    "node_modules/delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
+      "license": "MIT"
+    },
+    "node_modules/good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
+      "license": "MIT",
+      "dependencies": {
+        "delegate": "^3.1.2"
+      }
+    },
     "node_modules/pinia": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.2.0.tgz",
@@ -45,6 +78,30 @@
       "integrity": "sha512-WXit2cGnm5rG6CDTcLSLehNWhyJS/Yq7WEeeXAapZbCnqoPJxlszqg7rT8S+OP47az0h5nlajGo+LuyMxUQ2uw==",
       "license": "MIT"
     },
+    "node_modules/select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==",
+      "license": "MIT"
+    },
+    "node_modules/tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
+      "license": "MIT"
+    },
+    "node_modules/uview-plus": {
+      "version": "3.3.12",
+      "resolved": "https://registry.npmjs.org/uview-plus/-/uview-plus-3.3.12.tgz",
+      "integrity": "sha512-Hn9klJ8bLv+WiNCvONpN1vuxaKC5JUeVViQ9RxKjHO1HMYFNZc4UFs00Xo65nyu7lXH5FdAj53iXzGpRWgvyBg==",
+      "dependencies": {
+        "clipboard": "^2.0.11",
+        "dayjs": "^1.11.3"
+      },
+      "engines": {
+        "HBuilderX": "^3.1.0"
+      }
+    },
     "node_modules/vue": {
       "version": "2.6.14",
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",

package.json

@@ -1,6 +1,7 @@
 {
   "dependencies": {
     "pinia": "^2.2.0",
-    "pinia-plugin-unistorage": "^0.1.2"
+    "pinia-plugin-unistorage": "^0.1.2",
+    "uview-plus": "^3.3.12"
   }
 }

pages.json

@@ -1,5 +1,13 @@
 {
-	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+	"easycom": {
+		"autoscan": true,
+		"custom": {
+			"^u--(.*)": "uview-plus/components/u-$1/u-$1.vue",
+			"^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
+			"^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"
+		}
+	},
+	"pages": [
 		{
 			"path": "pages/index/index",
 			"style": {
@@ -14,4 +22,4 @@
 		"backgroundColor": "#F8F8F8"
 	},
 	"uniIdRouter": {}
-}
+}

pages/index/index.vue

@@ -4,12 +4,14 @@
 		<view class="text-area">
 			<text class="title">{{title}}{{userInfo.name}}</text>
 		</view>
+    <up-button type="primary" :plain="true" text="镂空"></up-button>
 	</view>
 </template>
 
 <script>
   import { useUserStore } from '../../stores/user.js'
   import { mapState, mapActions } from 'pinia'
+  import { rgbToHex } from 'uview-plus'
 
 	export default {
 		data() {
@@ -23,6 +25,8 @@
     },
 		onLoad() {
       this.update()
+      console.log(rgbToHex('rgb(13, 145, 20)'))
+      console.log(111, uni.$u.config.v)
 		},
 		methods: {
       // 允许调用this.updateUserInfo()

uni.scss

@@ -1,3 +1,6 @@
+/* uni.scss */
+@import 'uview-plus/theme.scss';
+
 /**
  * 这里是uni-app内置的常用样式变量
  *