uniapp 中安装使用 uView ui 框架

1.  首先 下载  uView插件包,解压缩

https://ext.dcloud.net.cn/plugin?id=1593   

2. 用 hbuilerX  创建一个  新的uniapp 项目 从零开始 ,把刚下载的uView文件夹 放到  和 main.js 的同级目录下（项目根目录）

3.  将下面的代码 放到 main.js  中

// main.js
import uView from 'uview-ui';
Vue.use(uView);

4 .  下面的放到  uni.scss 文件中      注意   前提 你的软件中必须安装了  scss这个插件哦  没有的话  就去安装一个scss插件

/* uni.scss */
@import "uview-ui/theme.scss";

5.APP.vue引入下面代码 

<style lang="scss">
@import "uview-ui/index.scss";
</style>

6.  将下面的这句话   放到  pages.json 文件中

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

6. 然后就开始 使用我们的   ui 组件   不过这个时候 还是重启下  你的编辑器  重新进行编译

<u-button @click="show = true">打开</u-button>
<u-mask :show="share" ></u-mask>

看下 实际的效果哈      是不是可以了    uView ui  还是做得很好的  值得 推荐

关注我  持续更新前端知识