基于vue-cli的uniapp项目使用uni-ui组件库

uniapp vue-cli vuecli uni-ui

推荐使用官方组价，其他第三方组件引入出现各种问题

https://uniapp.dcloud.net.cn/component/uniui/uni-calendar.html

vueCli项目默认是不编译node_modules下的组件的，导致条件编译等功能失效，导致组件异常。

需要我们在vue.config.js文件中，添加@dcloudio/uni-ui包的编译”transpileDependencies:[‘@dcloudio/uni-ui’]“即可正常。

// vue.config.js
module.exports = {
  transpileDependencies:['@dcloudio/uni-ui'],
  configureWebpack: {
    ...
  },
  chainWebpack: (config) => {
    ...
  },
  devServer: {
    ...
  }
}

安装sass、sass-loader

uniUi的使用必须要先安装sass以及sass-loader，两者的版本不推荐安装较高版本，有害无利。

npm install sass@1.22.10 -D
npm install sass-loader@7.2.0 -D

npm安装组件库

npm install @dcloudio/uni-ui@1.4.24 -S

在pages.json中添加easycom节点

{
    "easycom": {
        "autoscan": true,
        "custom": {
            "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
        }
    },
    "pages": [
        ...
    ],
    "globalStyle": {
        ...
    }
}

uniUi不支持全局Vue.use()，需要按需引入。

<uni-calendar 
    ref="calendar"
    :insert="false"
    @confirm="confirm"
/>
<button @click="open">打开日历</button>


import { uniCalendar } from '@dcloudio/uni-ui';

methods: {
  open(){
      this.$refs.calendar.open();
  },
  confirm(e) {
       console.log(e);
  }
},

https://blog.csdn.net/weixin_42216094/article/details/122171394