前提
要求是使用vue3 + typescript 进行开发小程序和H5的跨端应用
选择框架
在 uniapp 和 taro 这两个之中进行选择 在参了官方和社区示例后最终选择了 taro 。原因在于 uniapp目前对于 vue3 的支持尚不完全比如说暂不支持 setup 语法糖对于h5的支持比较差 没有支持vue3的ui框架等等。
环境准备
node.js
开发
# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli
注意tarojs的版本 建议使用 taro 3.0.24 以上的版本
项目初始化
taro init
image-20210205111340674.png
安装依赖
# 使用 yarn 安装依赖
$ yarn
# OR 使用 npm 安装依赖
$ npm install
修改输出目录
image-20210205111824960.png
启动
# 使用 yarn 启动
$ yarn dev:weapp
# OR 使用 npm 启动
$ npm run dev:weapp
# 使用微信开发者工具打开dist目录下的weapp就可以看到运行的效果了
添加taro-ui-vue3
$ npm install taro-ui-vue3
配置需要额外编译的源码模块
由于引用 node_modules 的模块，默认不会编译，所以需要额外给 H5 配置 esnextModules，在 taro 项目的 config/index.js 中新增如下配置项：
h5: {
esnextModules: ['taro-ui-vue3']
}
模式下编译报错？
如果出现类似 Could not find module View in @tarojs/components 的问题，请在进行如下设置：
在项目的
config目录下增加一个 h5 构建脚本: h5-building-script.js将项目
package.json下的build:h5命令修改为："build:h5": "node ./config/h5-building-script.js && taro build --type h5"在
config/index.js中的h5下添加 webpackalias设置：
h5: {
webpackChain(chain) {
chain.resolve.alias
.set(
'@tarojs/components$',
'@tarojs/components/dist-h5/vue3/index.js'
)
}
}
