wang-uni

uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。wangUni是基于业务，不限定风格的开发库；拥有丰富功能性组件、大量实用云图标、实用的CSS样式、常用JS工具函数、内置主题样式，开箱即用；内置功能模版，如常用的购物车、选项卡列表等。

Usage no npm install needed!

<script type="module">
  import wangUni from 'https://cdn.skypack.dev/wang-uni';
</script>

README

logo

  • npm 方式安装
npm install wang-uni
  • clone 到本地，导入demo示例的wangUni目录到项目的根目录里
git clone https://github.com/wangqf-19/wangUni.git

2、main.js 引入wangUni的JS库

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

// main.js

import wangUni from "wang-uni";
Vue.use(wangUni);

3、uni.scss 引入wangUni的主题配置

由于uni.scss中引入的样式会同时混入到全局样式文件和单独每一个页面的样式中,uni.scss只建议放scss变量名相关样式，其他的样式可以通过main.js或者App.vue引入

// uni.scss

@import 'wang-uni/theme.scss';

4、APP.vue 引入wangUni的样式包

注意 @import "wang-uni/index.scss" 要写在第一行，同时给style标签加入 lang="scss" 属性

// App.vue

<style lang="scss">
    @import "wang-uni/index.scss";
</style>

5、 pages.json 配置easycom按需打包

修改easycom规则不会实时生效，配置完后，需要重启HbuilderX或者重新编译项目才能正常使用。请确保 pages.json 中只有一个 easycom 字段，否则请自行合并多个引入规则。

//pages.json

{
    "easycom": {
        "autoscan": true,//自动扫描
        "custom": {
            "^w-(.*)": "@/wang-uni/components/w-$1/w-$1.vue" // 直接导入wangUni目录情况下，使用此项。
            "^w-(.*)": "wang-uni/path/to/w-$1.vue" // 使用 npm 安装方式，使用此项。
        }
    },
    "pages":[
        // ...
    ]
}