在Vue中使用dsbirdge（1） 项目新建

参考资料

dsbridge 的地址：https://npmjs.com/package/dsbridge
本项目vue的源码：https://gitee.com/BenjaminSong/dsbridge-demo-vue
本项目使用 vue3 + vite + vant
本项目仅做demo单页面使用。前期暂不考虑兼容低版本浏览器的内核问题。
android端：https://www.jianshu.com/p/86a72c85e0f0

1. 新建项目

执行命令

npm init vite [项目名]

Select a framework 中选择【vue】
Select a variant 中选择【TypeScript】

image.png

2. 引入vant

根目录下执行命令

 npm i vant

image.png

打开[main.ts]，引入vant

import Vant from 'vant';
import 'vant/lib/index.css';
…………
// 删除下一行
createApp(App).mount('#app')
// 添加如下代码
const app = createApp(App)
app.use(Vant)
app.mount('#app')

image.png

3. 设置固定宽度

详细的内容说明，参见VUE中设定窗口为固定值。
该步骤仅为便于开发，可以省略。

4. 页面搭建

更改App.vue

<template>
  <van-nav-bar
    title="dsbridge demo"
    :placeholder="true"
    :safe-area-inset-top="true"/>
</template>
<script setup lang="ts">
</script>

image.png