uniApp - uView框架的安装

uView官网：uView - 多平台快速开发的UI框架 - uni-app UI框架

安装有两种方式：

1. 下载安装

2. npm安装

这里主要讲解一下npm安装

1. 进入官网 --> 点击菜单栏中的组件  --> 在侧边栏找到 安装

2. 我们可以看到npm方式安装需要配置，点击进入配置页面

npm安装方式配置 | uView - 多平台快速开发的UI框架 - uni-app UI框架

3. 如你的 HBuilder X 已经下载过scss插件，可以省略此步骤，否则需要进行命令安装

4. 安装 uview-ui

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

// 安装
npm install uview-ui

5. 配置步骤

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

// main.js
import uView from "uview-ui";
Vue.use(uView);  // 从本质上说UI框架其实是一个插件

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

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

        3）引入uView基础样式

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

        4）配置easycom组件模式
        此配置需要在项目根目录的 pages.json 中进行      

// pages.json
{
    "easycom"：{
        "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    },

    // 此为本身已有的内容
    "pages": [
        // ........
    ]
}

     到此，已配置成功.