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

一、在vue.config.js中添加配置

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 -D
npm install sass-loader -D

三、npm安装组件库

npm install @dcloudio/uni-ui

四、在pages.json中添加easycom节点

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

五、引入和使用

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

这里用uniTable表格组件来举例子。

<template>
  <view class="dataTable">
    <uni-table :border="true" :stripe="true" :loading="loading" emptyText="暂无更多数据" >
      <!-- 表头行 -->
      <uni-tr>
          <uni-th align="center">上报时间</uni-th>
          <uni-th align="center">已上报数</uni-th>
          <uni-th align="center">是否异常</uni-th>
      </uni-tr>
      <!-- 表格数据行 -->
      <uni-tr
        v-for="(item, index) in exampleList"
        :key="index"
        class="trItems"
      >
          <uni-td align="center">{{ item.time }}</uni-td>
          <uni-td align="center">{{ item.reported + index }}</uni-td>
          <uni-td align="center">{{ item.unusual }}</uni-td>
      </uni-tr>
    </uni-table>
  </view>
</template>

<script>
import { uniTable, uniTr, uniTd, uniTh } from '@dcloudio/uni-ui';
export default {
  components: {
    uniTable,
    uniTr,
    uniTd,
    uniTh
  },
  data() {
    return {
      loading: false,
      exampleList: [
        { time: "2021/12/01", reported: "Stefan", unusual: "是" },
        { time: "2021/12/02", reported: "Stefan", unusual: "是" },
        { time: "2021/12/03", reported: "Stefan", unusual: "是" },
        { time: "2021/12/04", reported: "Stefan", unusual: "是" },
        { time: "2021/12/05", reported: "Stefan", unusual: "是" },
        { time: "2021/12/06", reported: "Stefan", unusual: "是" },
        { time: "2021/12/07", reported: "Stefan", unusual: "是" },
        { time: "2021/12/08", reported: "Stefan", unusual: "是" },
        { time: "2021/12/09", reported: "Stefan", unusual: "是" },
      ]
    }
  },
}
</script>
<style lang='scss' scoped>
.dataTable {
  padding: 10rpx;
  width: 100%;
  height: 100%;
  /deep/ .uni-table {
    min-width: unset !important;
    .uni-table-th-content {
      white-space: nowrap;
    }
    .trItems {
      &:nth-of-type(2n - 1) {
        background-color: rgba($color: #5ac725, $alpha: 0.3) !important;
      }
    }
  }
}
</style>