#uni-app项目配置# uView安装 UI框架

安装之前:

确保您下载的Hbuilder X为APP开发版,而非标准版

并且在"工具-插件安装"中安装了"scss/sass编译"插件

安装步骤:

1、下载地址:https://ext.dcloud.net.cn/plugin?id=1593

2、导入插件:

#uni-app项目配置# uView安装 UI框架_第1张图片

 3、在HBuilder X里面进行引入插件

第一步:

在目录---main.js里,引入uView库

#uni-app项目配置# uView安装 UI框架_第2张图片

复制下面的代码:

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

注意这两行要放在import vue之后

#uni-app项目配置# uView安装 UI框架_第3张图片

第二步:

在目录——App.vue里,引入基础样式(注意style标签需声明scss属性支持)

#uni-app项目配置# uView安装 UI框架_第4张图片

 复制下面的代码:

/* App.vue */

#uni-app项目配置# uView安装 UI框架_第5张图片

 第三步:

在目录——uni.scss引入全局scss变量文件

#uni-app项目配置# uView安装 UI框架_第6张图片

 复制下面的代码:

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

 

第四步:

在目录——pages.json里面配备easycom规则(按需引入),注意写在原来就有的内容的上面

 #uni-app项目配置# uView安装 UI框架_第7张图片

 复制下面的代码:

// pages.json
{
    "easycom": {
        // 下载安装的方式需要前面的"@/",npm安装的方式无需"@/"
        // 下载安装方式
        "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
        // npm安装方式
        // "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    },
    // 此为本身已有的内容
    "pages": [
        // ......
    ]
}

#uni-app项目配置# uView安装 UI框架_第8张图片

 4.使用uView组件

直接用双标签就可以了

#uni-app项目配置# uView安装 UI框架_第9张图片

你可能感兴趣的:(uni-app,uView,uni-app,插件,小程序,前端)