uniapp开发H5应用方法记录

使用多端统一的uniapp框架开发H5应用

Hbuilder配置

新建一个空白基础应用

引入Uview-ui包

将uview-ui代码文件下载到项目更目录下
1、main.js引入uView库

// main.js
import uView from 'uview-ui';
Vue.use(uView);

2、App.vue引入基础样式(注意style标签需声明scss属性支持)

/* App.vue */
<style lang="scss">
@import "uview-ui/index.scss";
</style>

3、uni.scss引入全局scss变量文件

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

4、pages.json配置easycom规则(按需引入)

// pages.json
{
    "easycom": {
        // 下载安装的方式需要前面的"@/"，npm安装的方式无需"@/"
        // 下载安装方式
        "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
        // npm安装方式
        // "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    },
    // 此为本身已有的内容
    "pages": [
        // ......
    ]
}