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

﹏ヽ暗。殇╰゛Y 2023-03-13 03:48 358阅读 0赞

> uView UI，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水。
> 
> 框架文档地址：[https://www.uviewui.com][https_www.uviewui.com]
> 
> Dcloud官方已将 uView ui 列为 uni-app项目开发的推荐框架（并获得 Dcloud 2020 插件大赛一等奖），
> 
> 官方社区推荐文章地址：[https://ask.dcloud.net.cn/article/35489][https_ask.dcloud.net.cn_article_35489]
> 
> 小编荣幸的分享了本篇教程，小编作为 uView ui 框架的开发组成员之一（给自己的简历狠狠的抹上这一笔极度膨胀的色彩）。

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

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

本篇教程正式开始

# 一、安装 HBuilderX 开发工具 #

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

# 二、创建 uni-app 项目 #

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70][]

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

注意事项：

*  npm包管理器，需要安装 Node.js 语言开发环境，Node.js下载地址：[https://nodejs.org/zh-cn/][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 安装

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70 1][]

# 四、配置 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编译” > “安装”，见下图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70 2][]

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

### 4.配置easycom组件模式 ###

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

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

# 五、使用 uView ui 框架 #

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

运行效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70 3][]

示例源码：

<template>
    	<view>
    		<u-button type="success">
    			<text>{
       {title}} 框架真好</text>
    			<u-icon name="thumb-up-fill" color="#ffffff" size="28"></u-icon>
    		</u-button>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				title: 'uView ui'
    			}
    		},
    		onLoad() {
    
    		},
    		methods: {
    
    		}
    	}
    </script>
    
    <style lang="scss">
    	
    </style>

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。

[https_www.uviewui.com]: https://www.uviewui.com/
[https_ask.dcloud.net.cn_article_35489]: https://ask.dcloud.net.cn/article/35489
[uni-app_uView UI]: https://blog.csdn.net/qq_33162604/article/details/105996312
[https_www.dcloud.io_hbuilderx.html]: https://www.dcloud.io/hbuilderx.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70]: /images/20230312/95dec9b3013b4a54ac3f8ef55b317d5e.png
[https_nodejs.org_zh-cn]: https://nodejs.org/zh-cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70 1]: /images/20230312/134c0c234be74e9cb09d9bcff5c684b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70 2]: /images/20230312/957d16452aa74c61bacc5f2a9a94021b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70 3]: /images/20230312/d555419f4245451a94f00de91f7a97e4.png
[Link 1]: https://blog.csdn.net/u013350495