uniapp如何引入uview组件？

1.引入前准备

2.在项目中引入组件

1.mian.is文件

2.uni.scss 文件

3.App.vue文件

4.pages.json 文件

3.测试成功

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中的组件，进行使用

<view style="padding: 20px;">
           <u-button type="primary" text="确定"></u-button>
           <u-button type="primary" :plain="true" text="镂空"></u-button>
       </view>