使用vue3+ typeScript 开发小程序

前提

要求是使用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 下添加 webpack alias 设置：

h5: {
  webpackChain(chain) {
    chain.resolve.alias
      .set(
        '@tarojs/components$', 
        '@tarojs/components/dist-h5/vue3/index.js'
      )
  }
}

项目基本上搭建完成

详情请参考 https://github.com/dexterBo/mall