vue3-cli-js/ts 引入weui、weui.js的姿势

安装weui + weui.js

npm install weui weui.js

weui + weui.js 的文档在底部 ~

main.js配置

如果你使用的是js的vue/cli则仅需这一步就可以了。

import weui from 'weui.js';
import 'weui';

app.config.globalProperties.$weui = weui;

main.ts配置（vue / ts）

我是直接用 // @ts-ignpre 忽略了类型检查报错，如果在下一步配置了ts类型，则不需要忽略类型检查报错也不会报错

// @ts-ignore
import weui from 'weui.js';
import 'weui';

app.config.globalProperties.$weui = weui;

ts额外配置 / js不需要

可以选择新建一个 d.ts 文件，也可在已有的 d.ts 文件里添加，我这里新建的 vue-shims.d.ts 放在src目录里就行

配置ts类型文档：http://t.csdnimg.cn/ywRBY，不配置没有代码提示，但不影响使用

// vue-shims.d.ts
import {ComponentCustomProperties} from "vue";
import {weui} from "weui.js"; // 导入 weui 对象的类型


declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
        $weui: typeof weui; // 使用 weui.js 模块的类型
    }
}

配置完成

使用函数（文档在文章结尾）

this.$weui.alert("服务器错误");

使用组件

这里演示的是基本用法，可以自己封装成vue组件，封装好的可以@我，我也想用封装好的

<div class="page__bd page__bd_spacing">
      <div class="weui-footer">
        <p class="weui-footer__links">
          <a href="javascript:" class="weui-footer__link weui-wa-hotarea">底部链接</a>
          <a href="javascript:" class="weui-footer__link weui-wa-hotarea">底部链接</a>
        </p>
        <p class="weui-footer__text">Copyright &copy; 2008-2022 weui.io</p>
      </div>
    </div>

---

weui + weui.js 文档

weui文档：https://github.com/Tencent/weui/wiki

weui.js文档：https://github.com/Tencent/weui.js/blob/master/docs/README.md