大家好，我是前端SkyRain，一个大重量级别的前端工程师(240+)。
听我们前端老大(据说是uniApp第一波开发者)说，uniApp项目在引入uView框架和其他第三方UI框架的情况有很多不同。我当时一听这话，这不是巧了嘛！！！
既然有不同，那就说明坑不少。这二百多斤的体格子，啥坑都得给它平了喽。所以咱们选择了uView框架和elementUI为代表，看看具体哪里不同。
引入uView框架
uView介绍
官方文档地址在此： uView框架官方文档
uView是uni-app生态专用的UI框架，其目标是成为uni-app生态最优秀的UI框架
uView安装
不愧是官方文档！在安装页面给了四种情况的安装方式。结果后来细看一遍，算是打脸了
两种是示例项目，另外两种才是安装方式：下载安装和npm安装。感觉这可能也就是上文所说的uView和elementUI在安装时候不同的原因吧
下载安装
其实文档上已经写的很明白了，但是作为新手还是写的更清楚些为好。
- 在安装方式的下方有一个下载地址，链接如下。uView UI插件
实际上这是一个以uniApp插件形式存在的uView框架项目。点击链接跳转到插件市场中该插件的详细信息页面，可以选择使用HuilderX导入插件和下载插件ZIP两种方式，这里选择了导入插件。
点击之后会出一个弹窗，依照下图选择
点击之后会在HBuilderX中出现下图弹窗，点击创建，把插件项目下载下来
这就是下载完毕的样子。再按照文档描述，将下载好项目根目录下的uview-ui文件夹复制到自己项目的根目录下。
至此，uView框架下载完毕，但还需要经过配置才能正常使用。
uView配置
按照官方文档所给地址，进入到下载安装方式配置页面，地址如下： 下载安装方式配置
**注意点：**uView框架依赖scss，安装scss插件过程与之前安装uView框架方式较为相似。先在插件市场搜索 scss/sass编译 ，之后点击进入详情，选择使用HBuilderX导入插件，等待安装完毕即可。
- 在项目根目录中的
main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。
// main.js
import uView from "uview-ui";
Vue.use(uView);
但实际上main.js里代码不只有这些，最新版的代码里包含了对vue3的支持。
所以main.js里内容是这样：
import App from './App'
// #ifndef VUE3
import Vue from 'vue'
import uView from "uview-ui";
Vue.use(uView);
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
// #endif
...
- 在项目根目录的
uni.scss中引入此文件。
这里把代码放到最后样一行即可。
/* 文章场景相关 */
...
@import 'uview-ui/theme.scss';
- 在
App.vue中首行的位置引入，注意给style标签加入lang="scss"属性
我自己是新建一个style标签，单独存放，避免混淆。
<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import "uview-ui/index.scss";
</style>
<style>
/*每个页面公共css */
</style>
- 在项目根目录的
pages.json中配置easycom组件模式
// pages.json
{
"easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
只有重新启动下项目就完成了
uView测试
安装完毕之后，选择一个组件进行测试，看是否正确引入成功
// pages/index/index.vue
<view class="content">
<u-button type="success">成功按钮</u-button>
</view>
引入成功！！！
引入elementUI框架
因为没有了解过，所以只能各种百度，前前后后试了四五次才找到正确又简便的版本。
安装elementui
安装的命令，应该都比较熟悉。但这里主要说的是步骤。
因为我最开始压根没找到命令行在哪儿？？？居然藏在了右键菜单里。
选中项目根目录，右键→使用命令行窗口打开所在目录。之后执行命令：
npm i element-ui -S
配置element-ui
- 在项目根目录下创建element文件夹，并在里面新建index.js。目的是在其中导入我们需要的组件，这个方法就包含了按需引入的优点。
// index.js
import 'element-ui/lib/theme-chalk/index.css';
import {Button,Icon} from 'element-ui';
const elements = {
install: function (Vue) {
Vue.use(Button)
Vue.use(Icon)
}
}
export default elements
- 在main.js中引入
import App from './App'
// #ifndef VUE3
import Vue from 'vue'
import ElementUI from 'element-ui'
import element from './element/index'
Vue.use(ElementUI)
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
// #endif
之后重启项目，准备进行测试!
配置测试
一样是选择了button组件进行测试。
<view class="content">
<el-button type="primary">成功按钮</el-button>
</view>
