# 配置的原理

# 1. 引入uview-plus主JS库

为何要在main.js引入uview-plus的JS库？

因为uview-plus内部集成了很多的便捷JS工具，比如获取随机数的radnom方法，调用为uni.$u.radom(min, max)，可见这些方法都挂载在$u下， 我们能通过this调用$u，又是因为$u挂载在Vue的原型链上，在这里uview-plus的做法为通过app.use，以插件的形式在内部进行app.config.globalProperties的挂载。

而main.js就是整个项目JS的入口，且Vue也是在这里引入的，所以我们自然而然就会想到把uview-plus的JS库在mian.js中引入了，如下：

// main.js
import uviewPlus from "uview-plus";
app.use(uviewPlus);

注：或许您想知道app.use的作用是什么，见简要介绍app.use的原理

# 2. 引入uview-plus的全局SCSS主题文件

uni-app不支持将SCSS变量相关的样式通过App.vue引入，为了统一的主题，以及日后的扩展， 目前一些跟颜色相关的scss变量定义在全局变量中，这些变量有独特的命名(up-开头)，不会与您的类名冲突。

这些变量需要写入到项目根目录的uni.scss中才有效(这是uni-app的机制问题)，它有一个特点是，编译成微信小程序后，不但注入到小程序工程 根目录的app.wxss(全局样式文件)，而且还会同步注入到每一个页面单独的*.wxss中，所以如果您在uni.scss中的样式很多的话，有可能导致 微信小程序编译单个包超出限制的2M大小，整包超出最大的12M大小，从而导致无法真机调试和发布微信小程序。

所以，我们建议，只将一些跟scss主题，变量相关的样式写入到uni.scss，而其他一般的全局样式文件，通过App.vue引入即可，在微信小程序编译的时候， 它只会编译到小程序根目录的app.wxss中，而不会注入到其他的单个页面的样式中。

# 3. 引入基础样式

由于目前(2020-04-29)uni-app的V3模式不支持在main.js中引入样式文件，故需要在App.vue中引入uview-plus的基础全局样式。
同时上面第2点也有说明，App.vue的样式为全局样式，微信小程序编译后只会注入到小程序根目录的app.wxss中。

# 4. 配置easycom组件模式

easycom功能可以让用户无需安装、引用、注册，三个步骤后才能使用组件，详见easycom文档 (opens new window)

easycom的另一个最大的特点是，它是按需引入的，所以您引入了整个uview-plus组件，即使只用到了button组件，最终打包的时候只会把button打包进去，其他的组件都会被剔除。

Hbuilder X自2.5.1版开始正式支持easycom特性，HX2.5.5版支持自动引入components/组件名称/组件名称.vue，考虑到用户的一些自定义组件 都会放在components目录中，为了不和用户的自定义组件混淆，同时也是为了能让用户一键升级uview-plus，所以我们把uview-plus相关的所有内容都放在了根目录的 uview-plus文件夹中。