uni-app uView UI框架 npm安装教程

uView UI，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水。

框架文档地址：https://www.uviewui.com

Dcloud官方已将 uView ui 列为 uni-app项目开发的推荐框架，官方社区推荐文章地址：https://ask.dcloud.net.cn/article/35489

小编荣幸的分享了本篇教程，小编也有望能成为 uView ui 框架的开发者之一（给自己的简历狠狠的抹上这一笔极度膨胀的色彩）。

uView UI 框架有 下载安装 和 npm安装 两种方式，本篇文章介绍 npm 安装的方式。

下载安装教程请阅读本篇教程的姊妹篇《如何快速上手uni-app生态的uView UI框架》。小编更推荐大家使用 下载安装 方式。

本篇教程正式开始

一、安装 HBuilderX 开发工具

uni-app 项目需要在 HBuilderX 开发工具中运行，HBuilderX下载地址：https://www.dcloud.io/hbuilderx.html，下载 App开发版。

二、创建 uni-app 项目

打开 HBuilderX 开发工具，新建一个 uni-app 项目，使用 “默认模板”，参考下图

三、使用 npm包管理器下载 uView ui

注意事项：

• npm包管理器，需要安装 Node.js 语言开发环境，Node.js下载地址：https://nodejs.org/zh-cn/。
• 安装完 Node.js语言开发环境后，在终端输入 npm -v 能查看到 npm 版本号 则成功，若无法查看到 npm 的版本号可以重新启动电脑试一试，或者重新安装一次。

打开 HBuilderX 开发工具的终端输入下方示例代码，下载uView ui 框架文件。

// 如果您的项目是 HBuilderX 创建的，根目录又没有 package.json 文件的话，请先执行如下命令：
// npm init -y

// 安装
npm i uview-ui

• 不喜欢或者不知道 HBuilderX 开发工具的终端在那打开的伙伴可以使用电脑操作系统终端(命令提示符)进入到当前项目文件夹目录。
• cnpm 安装目前有未知问题，目前仅支持使用 npm 安装

四、配置 uView ui 框架

1.引入uView主JS库

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

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

2.在引入uView的全局SCSS主题文件

在项目根目录的 uni.scss 中引入此文件。

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

3.引入uView基础样式

注意事项：

• 因为uView ui 的使用了 scss 做为 css 的扩展语言，所以我们需要在 HBuilderX开发工具中安装scss的插件。
• 安装步骤： HBuilderX开发工具菜单栏“工具” > “插件安装” > “sass/scss编译” > “安装”，见下图

在 App.vue 中首行的位置引入，注意给 style标签 加入 lang="scss" 属性

4.配置easycom组件模式

此配置需要在项目根目录的 pages.json 中进行。

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

五、使用 uView ui 框架

当你进行到这一步时，恭喜你前面不开心的过程已经结束，接下来可以尽量了享受 uView ui 框架带来的优质体验。

运行效果：

示例源码：

作者：黄河爱浪 QQ：1846492969，邮箱：[email protected]

公众号：web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处。