uniapp引入uview组件库

引言

    新学期又双叒开始了，一看学校的教程要求少不了得做个小的demo为最后的课程设计做准备的。通常这个课程设计是比较花时间的，所以这次决定提前准备，毕竟都大三了，估计下学期就得去图书馆“坐牢”了。

引入方法

    不水了，直接正文搞起。
    第一步，安装编译器Hbuilder。至于Hbuilder的安装什么的就不用细说了，里面可能会涉及scss插件，在Hbuilder里面只要用到了会有报错提示。到时候直接登录Hbuilder网站之后按照提示安装就行。
    第二步，利用Hbuilder新建一个uni-app项目。如下图所示：

第三步，去uview-ui git仓库官网下载uview代码包。git链接地址如下：

https://github.com/YanxinNet/uView.git

第四步，下载完成之后将里面的uview-ui文件夹直接搬到uni-app项目的App.vue文件同级目录下（或者说是项目目录下）。
第五步，引入主题样式，首先在uni.scss文件里面加上如下代码：

@import 'uview-ui/theme.scss';

添加位置如下图所示：

然后在App.vue里面做全局引入，修改空的style如下：

<style lang="scss">
	/*引入uview主题样式*/
	@import 'uview-ui/theme.scss';
	/*每个页面公共css */
</style>

第六步，引入具体组件，官方推荐使用 easycom 引入，直接在pages.json文件中增加如下代码，注意不要写错了，否则可能找不到具体组件的路径：

"easycom": {
	 "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
	},

到这里uni-app引入uview就结束了。

    补充一个小插曲，因为之前课上提到项目优化，谈到时间最好是让用户选择而不是输入，因此就尝试了一下里面的u-calendar组件，结果尴尬了，布局竟然是乱的，如下所示：

这…，看一下控制台：

我回过头来一想，这个问题应该是由于calendar源码里面重用了u-icon，然后直接给默认套了一层view标签，成了几个块级元素。额…，想了想自己看源码修改也太慢了，最后找到了解决方法（flex布局，挺巧妙的），在新建的文件css下面加上这个css样式（别改源码，源码里面的样式不一般）：

.u-calendar__action{ 
	display: flex;
	justify-content: space-between;
	align-items: center;
  }

终于又回到了梦开始的地方：

    其实，在这之前我看过很多组件，想过很多架构模式，最后才选择了uni-app+uview。至于uniapp，多端发布，听着就很爽。简单说说为什么是uview？首先是因为这个uview与uni-app关系比较紧密，自称是最适宜于uni-app的组件库。其次，组件内容丰富并且还在进一步完善更新。如今，uni-app的热度正在逐渐上升，选择这个知道报错会有人去像，然后我这个小白就不用慌了^.^。