安装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 © 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