uniapp配置uView-plus

1.新建项目，选择vue3

2.创建项目package文件

根目录 执行 npm init -y

3.把uView-plus插件加入到HBuilder X的项目中

https://ext.dcloud.net.cn/plugin?name=uview-plus

4.配置uView-plus 参考https://uview-plus.jiangruyi.com/components/downloadSetting.html

1.配置main.js

import App from './App'
import uviewPlus from '@/uni_modules/uview-plus'
// import './api/mock.js'

// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  app.use(uviewPlus)
  return {
    app
  }
}
// #endif

2.配置uni.scss

/* uni.scss */
@import '@/uni_modules/uview-plus/theme.scss';

3.配置manifest.json

"mp-weixin" : {
    "appid" : "",
    ...
    "mergeVirtualHostAttributes" : true
},

4.安装依赖，在根目录执行

npm i dayjs
npm i clipboard

5.配置easycom组件模式

 

    "easycom": {
            "autoscan": true,
            // 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175
            "custom": {
                "^u--(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
                "^up-(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
            "^u-([^-].*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue"
            }
        },

配置完成，重启IDE 

 

测试：

在index.vue界面插入一个按钮

<up-button text="渐变色按钮" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></up-button>

运行到小程序

注意：如果引入插件后报错，先别急着看错误，可以试试刷新小程序，或者关闭小程序，重新执行看看，笔者多次发现，很多无缘无故的错误，然后重启小程序后就都可以编译了！