【uni-app】使用uViewUI框架

uView官网

目录

• 一.安装方式
• 二.配置

一.安装方式

• 1.直接下载安装
• 2.npm 安装 ( 推荐 , 方便更新 )

以下介绍分HX创建项目和vue-cli创建项目两种

1.直接下载安装
下载地址：https://ext.dcloud.net.cn/plugin?id=1593

• HX创建的标准uni-app项目，将下载后的uview-ui文件夹复制到项目根目录即可。
• vue-cli模式创建的项目， 将下载后的uview-ui文件夹放到项目的src文件夹中即可。

npm安装

• HX创建的标准uni-app项目

安装之前，先确保已经使用了npm，如果没有，请先执行安装：

// HX创建的，根目录又没有package.json文件的话，请先执行如下命令：
npm init

// 安装完毕后,安装uView
npm install uview-ui

• vue-cli模式创建的项目,直接npm安装uView即可

// 安装
npm install uview-ui

二.配置

1.安装SCSS
tip:uView 依赖 SCSS，必须要安装此插件

• HX创建的标准uni-app项目,应该已经安装了scss插件

若未安装:

工具->插件安装中 找到scss/sass编译插件进行安装(若不生效,重启HX即可)

• vue-cli模式创建的项目，通过以下命令安装对sass(scss)的支持，如果已安装，请略过。

// 安装node-sass
npm i node-sass -D

// 安装sass-loader
npm i sass-loader -D

2.main.js引入uView主JS库
在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。

// main.js
import uView from "uview-ui";
Vue.use(uView);

3. uni.scss中在引入uView的全局SCSS主题文件
在项目根目录的uni.scss中引入此文件。

/* uni.scss */
@import 'uview-ui/theme.scss';

4. App.vue中引入uView基础样式
需要在App.vue中首行的位置引入，并给style标签加入lang="scss"属性

<style lang="scss">
    /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
    @import "uview-ui/index.scss";
</style>

5.pages.json中配置easycom组件模式
此配置需要在项目根目录的pages.json中进行。
温馨提示
uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，您需要重启HX或者重新编译项目才能正常使用uView的功能。
请确保您的pages.json中只有一个easycom字段，否则请自行合并多个引入规则。

// pages.json
{
    "easycom": {
        "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    },
    
    // 此为本身已有的内容
    "pages": [
        // ......
    ]
}

好了，接下來就可以直接在項目中使用uView了