目录
[2.uni.scss 文件](#2.uni.scss 文件)
[4.pages.json 文件](#4.pages.json 文件)
1.引入前准备
为了方便我们在制作项目的过程中，方便使用模板组件，快速开发。我们可以选择引入组件。
在uni-app中使用uView组件需要进行以下操作：
首先，确保已经安装了uView库。
通过npm或者yarn命令来安装，运行npm install uview-ui或者yarn add uview-ui。
1.使用npm 安装uViewUI
|------------------------------------------------------------------------------------------------------------------------------------------------------------|
| // 安装 npm install uview-ui //指定版本（忽略） npm install uview-ui@2 【2.X版本】 查看版本号 console.log(this.u.config.v); // 或者(二者等价) console.log(this.u.config.version); |
2.npm 安装方式的配置
【uView依赖SCSS，必须要安装此插件，否则无法正常运行】
|-------------------------------------------------------------------------------------------|
| // 安装node-sass npm i node-sass -D // 安装sass-loader npm i sass-loader -D 【-D表示只在开发时依赖】 |
2.在项目中引入组件
1.mian.is文件
打开项目的main.js文件（位于src/main.js），添加以下代码导入uView样式和组件：
`// main.js 文件中引入组件
import uView from "uview-ui";
Vue.use(uView);``import Vue from 'vue'
import App from './App'
// 导入uView样式
import '@/static/css/iconfont.css'; // 这里根据自己的路径修改
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
`2.uni.scss 文件
在uni.css中引入uView的全局SCSS主题文件
/* uni.scss 文件 引入uView的全局SCSS主题文件 */
@import 'node_modules/uview-ui/theme.scss';
@import 'node_modules/uview-ui/index.scss';
3.App.vue文件
在app.vue中全局引入uView基础样式
<style lang="scss">
// App.vue文件中 中首行的位置引入，注意给style标签加入lang="scss"属性
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import "node_modules/uview-ui/index.scss";
/*每个页面公共css */
</style>
4.pages.json 文件
在pages.json 文件配置easycom组件模式(必须配置)
// pages.json 文件中
{
//配置easycom组件模式:uview-ui需要
"easycom": {
"^u-(.*)": "node_modules/uview-ui/components/u-1/u-1.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
5.测试
在项目中使用任何一个组件进行测试即可，对照着uview中的组件，进行使用
<!-- 在首页index中 添加uViewUI组件 -->
<view style="padding: 20px;">
<u-button type="primary" text="确定"></u-button>
<u-button type="primary" :plain="true" text="镂空"></u-button>
</view>
3.测试成功
测试成功，可以使用的话，插件就已经在项目中有引入成功了。
重新编译运行项目，就能看到uView组件被成功引入并显示在页面上了。