uview-ui-next,是uni-app生态优秀的UI框架,全面的组件和便捷的工具会让您信手拈来,如鱼得水
npm install uview-ui-next
bash
yarn 方式安装
yarn add uview-ui-next
`
2、安装 mitt 依赖
`bash
yarn 方式安装
yarn add mitt
`
快速上手
1. main.ts引入uView库
`js
// main.ts
import uView from 'uview-ui-next';
app.use(uView);
`
2. App.vue引入基础样式(注意style标签需声明scss属性支持)
`css
/ App.vue /
`
3. uni.scss引入全局scss变量文件
`css
/ uni.scss /
@import "uview-ui-next/theme.scss";
`
4. pages.json配置easycom规则(按需引入)
`js
// pages.json
{
"easycom": {
"autoscan": true,
"custom": {
// npm安装的方式不需要前面的"@/",下载安装的方式需要"@/"
// npm安装方式
"^u-(.*)": "uview-ui-next/components/u-$1/u-$1.vue"
// 下载安装方式
// "^u-(.*)": "uview-ui-next/components/u-$1/u-$1.vue"
}
},
// 此为本身已有的内容
"pages": [
// ......
]
}
`
`text
easycom 规则引入 特殊说明:
- u-form 需要单独引入才生效;
- u-waterfall 需要单独引入才能生效;
- 其它如果通过 easycom 规则引入如未生效,需要单独引入,可能原因是由于被uni-app官方占用。
`
`vue
提交
`
`ts
`
5. main.ts配置全局分享
`ts
// main.ts
app.config.globalProperties.openShare = true;
`
`vue
`
请通过快速上手了解更详细的内容
使用方法
配置easycom规则后,自动按需引入,无需import组件,直接引用即可。
`html
按钮
``