UI库配置

App.vue

@@ -1,40 +1,41 @@
 <script>
-	import Vue from 'vue'
-	export default {
-		onLaunch: function() {
-		    uni.getSystemInfo({
-		        success: function(e) {
-		            // #ifndef MP
-		            Vue.prototype.StatusBar = e.statusBarHeight;
-		            if (e.platform == 'android') {
-		                Vue.prototype.CustomBar = e.statusBarHeight + 50;
-		            } else {
-		                Vue.prototype.CustomBar = e.statusBarHeight + 45;
-		            };
-		            // #endif
-		            // #ifdef MP-WEIXIN
-		            Vue.prototype.StatusBar = e.statusBarHeight;
-		            let custom = wx.getMenuButtonBoundingClientRect();
-		            Vue.prototype.Custom = custom;
-		            Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
-		            // #endif       
-		            // #ifdef MP-ALIPAY
-		            Vue.prototype.StatusBar = e.statusBarHeight;
-		            Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
-		            // #endif
-		        }
-		    })
-		},
-		onShow: function() {
-		},
-		onHide: function() {
-		}
+import Vue from 'vue'
+export default {
+	onLaunch: function () {
+		uni.getSystemInfo({
+			success: function (e) {
+				// #ifndef MP
+				Vue.prototype.StatusBar = e.statusBarHeight;
+				if (e.platform == 'android') {
+					Vue.prototype.CustomBar = e.statusBarHeight + 50;
+				} else {
+					Vue.prototype.CustomBar = e.statusBarHeight + 45;
+				};
+				// #endif
+				// #ifdef MP-WEIXIN
+				Vue.prototype.StatusBar = e.statusBarHeight;
+				let custom = wx.getMenuButtonBoundingClientRect();
+				Vue.prototype.Custom = custom;
+				Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
+				// #endif       
+				// #ifdef MP-ALIPAY
+				Vue.prototype.StatusBar = e.statusBarHeight;
+				Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
+				// #endif
+			}
+		})
+	},
+	onShow: function () {
+	},
+	onHide: function () {
 	}
+}
 </script>
 
 <style lang="scss">
-    @import "colorui/main.css";
-    @import "colorui/icon.css";
-	/* 你的项目css */
-	@import "uni.scss";
+@import "@/uni_modules/uview-ui/index.scss";
+@import "colorui/main.css";
+@import "colorui/icon.css";
+/* 你的项目css */
+@import "uni.scss";
 </style>

main.js

@@ -2,18 +2,24 @@ import App from './App'
 
 // #ifndef VUE3
 import Vue from 'vue'
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
+
+import uView from '@/uni_modules/uview-ui'
+Vue.use(uView)
+
 App.mpType = 'app'
 const app = new Vue({
-    ...App
+  ...App
 })
 app.$mount()
 // #endif
 
 // #ifdef VUE3
-import { createSSRApp } from 'vue'
+import {
+  createSSRApp
+} from 'vue'
 import cuCustom from './colorui/components/cu-custom.vue'
-Vue.component('cu-custom',cuCustom)
+Vue.component('cu-custom', cuCustom)
 export function createApp() {
   const app = createSSRApp(App)
   return {

pages.json

@@ -1,12 +1,13 @@
 {
-	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
-		{
-			"path": "pages/login/login"
-		},{
-			"path": "pages/index/index"
-		}
-	],
+	"pages": [{
+		"path": "pages/login/login"
+	}, {
+		"path": "pages/index/index"
+	}],
 	"globalStyle": {
 		"navigationStyle": "custom"
+	},
+	"easycom": {
+		"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
 	}
 }

uni.scss

@@ -11,6 +11,7 @@
  *
  * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
  */
+@import '@/uni_modules/uview-ui/theme.scss';
 
 /* 颜色变量 */
 $my-color-main: #007aff;
@@ -21,17 +22,17 @@ $uni-color-warning: #f0ad4e;
 $uni-color-error: #dd524d;
 
 /* 文字基本颜色 */
-$uni-text-color:#333;//基本色
-$uni-text-color-inverse:#fff;//反色
-$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
+$uni-text-color:#333; //基本色
+$uni-text-color-inverse:#fff; //反色
+$uni-text-color-grey:#999; //辅助灰色，如加载更多的提示信息
 $uni-text-color-placeholder: #808080;
 $uni-text-color-disable:#c0c0c0;
 
 /* 背景颜色 */
 $uni-bg-color:#ffffff;
 $uni-bg-color-grey:#f8f8f8;
-$uni-bg-color-hover:#f1f1f1;//点击状态颜色
-$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
+$uni-bg-color-hover:#f1f1f1; //点击状态颜色
+$uni-bg-color-mask:rgba(0, 0, 0, 0.4); //遮罩颜色
 
 /* 边框颜色 */
 $uni-border-color:#c8c7cc;
@@ -73,4 +74,4 @@ $uni-font-size-title:20px;
 $uni-color-subtitle: #555555; // 二级标题颜色
 $uni-font-size-subtitle:26px;
 $uni-color-paragraph: #3F536E; // 文章段落颜色
-$uni-font-size-paragraph:15px;
+$uni-font-size-paragraph:15px;