uni-app 项目中配置uview-ui

1. 新建uni-app项目

使用HBuilder X 新建 uni-app 项目

2. 安装uview-ui

uview-ui 两种安装方式：

• 通过dcloud插件市场安装导入
• 使用npm下载

这里使用npm下载

npm init -y  // 如果项目根路径下没有package.json文件，需要先执行初始化命令

npm i uview-ui

3. 在main.js中导入uview-ui

import uView from 'uview-ui' 
Vue.use(uView)
// 引入uView对小程序分享的mixin封装
let mpShare = require('@/uview-ui/libs/mixin/mpShare.js')
Vue.mixin(mpShare)

4. 在uni.scss中引入theme.scss

@import 'uview-ui/theme.scss'; //注意分号是必须的

5. 在App.vue中引入index.scss

@import 'uview-ui/index.scss'; //注意分号是必须的

6. 在pages.json中配置按需引入

"easycom": {
    // npm安装的方式不需要前面的"@/"，下载安装的方式需要"@/"
    // npm安装方式
    "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    // 下载安装方式
    // "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
}