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基础样式

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

            
            
        

3.测试成功

        测试成功，可以使用的话，插件就已经在项目中有引入成功了。

        重新编译运行项目，就能看到uView组件被成功引入并显示在页面上了。

介绍 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架