uView XL,是uni-app生态优秀的UI框架,全面的组件和便捷的工具会让您信手拈来,如鱼得水
npm install uview-xl


shell
npm i uview-xl
`
快速上手
1. main.js引入uView库
`javascript
// main.js
import uViewXL from 'uview-xl';
app.use(uViewXL)
`
2. App.vue引入基础样式(注意style标签需声明scss属性支持)
`css
/ App.vue /
`
3. uni.scss引入全局scss变量文件
`css
/ uni.scss /
@import "uview-xl/theme.scss";
`
如果样式无效,则把theme.scss的样式拷贝到uni.scss
4. pages.json配置easycom规则(按需引入)
`js
// pages.json
{
"easycom": {
// 下载安装的方式需要前面的"@/",npm安装的方式无需"@/"
// 下载安装方式
"^u-(.*)": "@/uview-xl/components/u-$1/u-$1.vue"
// npm安装方式
// "^u-(.*)": "uview-xl/components/u-$1/u-$1.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
`
请通过快速上手了解更详细的内容
使用方法
配置easycom规则后,自动按需引入,无需import组件,直接引用即可。
`html
按钮
``