哎 本来 博主 不是从事uniapp 的开发人员 但是对 uniapp的关注 还是挺上心的
当年 这个ui框架出来的 那一刻 我还去 看了看 赞助了点钱呢
这框架 还是挺厉害 其实 我还是很像从事 uniapp 开发呢 奈何 所在的几家公司 都不用 尴尬了 希望下家公司会用到 吧 哈哈
好了 我们 步入正题了
1. 首先 就是 先去 下载 插件包
uView UI已发布Sketch和Axure设计资源 - DCloud 插件市场
2. 用 hbuilerX 创建一个 新的uniapp 项目 从零开始 把刚刚下载的 放到 和 main.js 的同级目录下
3. 将下面的代码 放到 main.js 中
import uView from "uview-ui";
Vue.use(uView);
4 . 下面的放到 uni.scss 文件中 注意 前提 你的软件中必须安装了 scss这个插件哦 没有的话 就去安装一个scss插件
@import 'uview-ui/theme.scss';
5. 将下面的这句话 放到 pages.json 文件中
"easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
6. 然后就开始 使用我们的 ui 组件 不过这个时候 还是重启下 你的编辑器 重新进行编译
<u-button type="primary">月落</u-button>
<u-calendar v-model="show" :mode="mode"></u-calendar>
<u-button @click="show = true">打开</u-button>
7. 在App.vue文件。 记得加上。 lang=scss
<style lang="scss">
@import "uview-ui/index.scss";
/*每个页面公共css */
</style>
看下 实际的效果哈 是不是可以了 uView ui 还是做得很好的 值得 推荐
关注我 持续更新前端知识