# UI框架
>采用uviewUI[传送门](https://uviewui.com/)
* ### 使用方法
> 说明
> 1. 由于uView使用`easycom`模式，让您无需引入组件即可直接使用，但是此功能需要Hbuilder X 2.5.5及以上版本才支持，详见[配置easycom组件模式](https://uviewui.com/components/quickstart.html#_3-%E9%85%8D%E7%BD%AEeasycom%E7%BB%84%E4%BB%B6%E6%A8%A1%E5%BC%8F)。`easycom`打包的时候是**按需引入**的，您可以放心引入uView的整个组件库，发布打包时会自动剔除您没有使用的组件(注意：调试时仍然是全部引入的)
>2. 请确保您下载的[Hbuilder X](https://www.dcloud.io/hbuilderx.html)为`APP开发版`，而非`标准版`，并且在"工具-插件安装"中安装了"scss/sass编译"插件
### 下载安装
使用下载的方式安装，能更方便阅读源码，但是每次升级都需要重新下载并覆盖`uview-ui`文件夹。
* 在uni-app插件市场右上角选择`使用HBuilder X 导入插件`或者`下载插件ZIP`
* 如果您的项目是由HBuilder X创建的标准uni-app项目，将下载后的`uview-ui`文件夹，复制到项目根目录。
* 如果您的项目是由[vue-cli](https://uniapp.dcloud.io/quickstart?id=_2-%e9%80%9a%e8%bf%87vue-cli%e5%91%bd%e4%bb%a4%e8%a1%8c)模式创建的， 请将下载后的`uview-ui`文件夹放到项目的`src`文件夹中即可。
**注意：**此安装方式必须要按照[下载方式安装的配置](https://uviewui.com/components/downloadSetting.html)中的说明配置了才可用。
下载地址：[https://ext.dcloud.net.cn/plugin?id=1593](https://ext.dcloud.net.cn/plugin?id=1593)
### 示例项目
此方式为整个uView演示项目，里面有uView核心，组件演示，模板等，建议用户可以下载 此项目运行用于查看UI演示效果，复制模板案例，通过里面的示例，可以快速掌握某一个组件的用法。
* 途径一：uView示例项目已内置到`HBuilder X`中，在`文件 -> 新建 -> 项目 -> uni-app`中，找到`uView UI`下载运行即可。
* 途径二：在uni-app插件市场右上角选择`使用 HBuilderX 导入示例项目`或者`下载示例项目ZIP`，然后在HBuilder X中运行即可。
uni-app插件市场地址：[https://ext.dcloud.net.cn/plugin?id=1593](https://ext.dcloud.net.cn/plugin?id=1593)
>注意
>演示项目不适用于直接开发中，它只是演示用的，可以直接运行并查看效果。
如果在微信开发工具真机预览时，提示分包太大运行的问题，请在`HBuilder X`进行设置：菜单栏 运行 -> 运行到小程序模拟器，在下拉菜单中**勾选**"运行时是否压缩代码"
### npm安装
使用npm的方式安装，能更方便进行升级。
* 如果您的项目是通过[vue-cli](https://uniapp.dcloud.io/quickstart?id=_2-%e9%80%9a%e8%bf%87vue-cli%e5%91%bd%e4%bb%a4%e8%a1%8c)模式创建的， 无需手动npm安装`scss`，因为已内置`scss`。
**注意：**此安装方式必须要按照[npm方式安装的配置](https://uviewui.com/components/npmSetting.html)中的说明配置了才可用，且项目名称不能有**中文**字符。
>注意！
>由于HX编译错误的原因的，目前(2020-05-06)不支持通过**cnpm**安装uView，这意味着您只能通过**npm**安装uView，如果您的网络无法使用**npm**， 那就使用下载的方式安装，等HX修复此问题，可以使用**cnpm**的时候，我们会撤销此通告。
~~~
// 如果您的项目是HX创建的，根目录又没有package.json文件的话，请先执行如下命令：
// npm init -y
// 安装
npm install uview-ui
// 更新
npm update uview-ui
~~~
### 配置以及引用
* ##### 在main.js 文件全局引入uView
```javascript
// main.js 文件
import uView from "uview-ui";
Vue.use(uView);
```
* ##### uni.scss 文件 引入uView的全局SCSS主题文件
```javascript
/* uni.scss 文件 引入uView的全局SCSS主题文件 */
@import 'uview-ui/theme.scss';
```
* ##### 在App.vue文件引入uView基础样式
```javascript
// App.vue文件 中首行的位置引入，注意给style标签加入lang="scss"属性
<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import "uview-ui/index.scss";
</style>
```
* #####全局引入
>在pages.json配置easycom
>*注：uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，您需要重启HX或重新编译项目才能正常使用uView的功能。
请确保您的pages.json中只有一个easycom分区，否则请自行合并多个约会规则。*
```javascript
// pages.json
{
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
```
