uni-app uView UI框架 npm安装教程
uView UI，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水。
框架文档地址：https://www.uviewui.com
Dcloud官方已将 uView ui 列为 uni-app项目开发的推荐框架（并获得 Dcloud 2020 插件大赛一等奖），
官方社区推荐文章地址：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" 属性
<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import "uview-ui/index.scss";
</style>
4.配置easycom组件模式
此配置需要在项目根目录的 pages.json 中进行。
{
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
五、使用 uView ui 框架
当你进行到这一步时，恭喜你前面不开心的过程已经结束，接下来可以尽量了享受 uView ui 框架带来的优质体验。
运行效果：
示例源码：
<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>
————————————————
版权声明：本文为CSDN博主「黄河爱浪」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u013350495/article/details/106042826/
