前提
要求是使用vue3 + typescript 進(jìn)行開發(fā)小程序和H5的跨端應(yīng)用
選擇框架
在 uniapp 和 taro 這兩個(gè)之中進(jìn)行選擇 在參了官方和社區(qū)示例后最終選擇了 taro 。原因在于 uniapp目前對于 vue3 的支持尚不完全比如說暫不支持 setup 語法糖對于h5的支持比較差 沒有支持vue3的ui框架等等。
環(huán)境準(zhǔn)備
node.js
開發(fā)
# 使用 npm 安裝 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安裝 CLI
$ yarn global add @tarojs/cli
注意tarojs的版本 建議使用 taro 3.0.24 以上的版本
項(xiàng)目初始化
taro init
image-20210205111340674.png
安裝依賴
# 使用 yarn 安裝依賴
$ yarn
# OR 使用 npm 安裝依賴
$ npm install
修改輸出目錄
image-20210205111824960.png
啟動(dòng)
# 使用 yarn 啟動(dòng)
$ yarn dev:weapp
# OR 使用 npm 啟動(dòng)
$ npm run dev:weapp
# 使用微信開發(fā)者工具打開dist目錄下的weapp就可以看到運(yùn)行的效果了
添加taro-ui-vue3
$ npm install taro-ui-vue3
配置需要額外編譯的源碼模塊
由于引用 node_modules 的模塊，默認(rèn)不會(huì)編譯，所以需要額外給 H5 配置 esnextModules，在 taro 項(xiàng)目的 config/index.js 中新增如下配置項(xiàng)：
h5: {
esnextModules: ['taro-ui-vue3']
}
模式下編譯報(bào)錯(cuò)？
如果出現(xiàn)類似 Could not find module View in @tarojs/components 的問題，請?jiān)谶M(jìn)行如下設(shè)置：
在項(xiàng)目的
config目錄下增加一個(gè) h5 構(gòu)建腳本: h5-building-script.js將項(xiàng)目
package.json下的build:h5命令修改為："build:h5": "node ./config/h5-building-script.js && taro build --type h5"在
config/index.js中的h5下添加 webpackalias設(shè)置：
h5: {
webpackChain(chain) {
chain.resolve.alias
.set(
'@tarojs/components$',
'@tarojs/components/dist-h5/vue3/index.js'
)
}
}
