uni-app之uview-ui框架安装使用教程

关于uview-ui框架的使用教程网上有很多，官方教程（uview官方文档）也描述的很清楚，此篇文章只作为个人的一个记录

1、安装
这里我直接使用的是安装包安装，下载地址 点这里

2、在HBuilder中创建uni-app项目

3、在uniapp项目中添加刚下载的安装包

注意:
根据官方文档说明，uview的使用是依赖于scss，所以HBuilder中需要安装scss插件；

插件安装步骤如下：

4、在项目根目录 main.js中，引入uView主JS库

import Vue from 'vue'
import App from './App'

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

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

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

6、引入uView基础样式
注意：在App.vue中首行的位置引入，同时给style标签加入lang="scss"属性

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

7、配置easycom组件模式
在项目根目录的pages.json中进行。

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

    //本身已有内容
    "pages": [

    ]
    
}

以下是测试功能