witch-ui

uniapp项目中常用的组件、方法、采坑集合而成 —— witchUI

Usage no npm install needed!

<script type="module">
  import witchUi from 'https://cdn.skypack.dev/witch-ui';
</script>

README

logo

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

2、main.js 引入witchUI的JS库

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

// main.js

import witchUI from "witch-ui";
Vue.use(witchUI);

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

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

// uni.scss

@import 'witch-ui/theme.scss';

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

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

// App.vue

<style lang="scss">
    @import "witch-ui/index.scss";
</style>

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

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

//pages.json

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