:::info 💡 Taro是一个开放式跨端框架解决方案，支持使用React/Vue/Nerv等框架来开发任意小程序/H5/RN等应用。(任意小程序包括微信/京东/百度/支付宝/字节/飞书/QQ/企业微信等) ::: Taro特性概括:

  • 多端转换支持: 任意小程序/H5/RN
  • 框架支持：Vue/Vue3/React

概念有点枯燥，那我们就来看看要怎么5分钟看到Taro运行效果，请往下看看～

环境安装

环境准备好了，才能更高效的运行Taro项目。

前提条件: 安装了NodeJs环境(这里不做Nodejs的详细安装说明)

  1. // 在终端输入如下命令安装Taro CLI
  2. npm i -g @tarojs/cli
  4. // 安装成功后输入如下命令可查看是否安装成功
  5. taro

项目搭建

技术选型: Taro + typeScript + vue3 + Less(您可根据您的项目需求填写各个选项，不一定要按照我的技术选型)

  1. // 输入如下命令创建一个新的项目，并根据提示选择您想要的技术
  2. taro init

接下来我们看看基于该技术选型下的运行结果！
image.png
项目创建成功了，我们看下目录结构(若taro init时不做特殊的技术选型, 最小版本的Taro项目目录结构会更加简单)

  1. ├── babel.config.js             # Babel 配置
  2. ├── .eslintrc.js                # ESLint 配置
  3. ├── config                      # 编译配置目录
  4. │   ├── dev.js                  # 开发模式配置
  5. │   ├── index.js                # 默认配置
  6. │   └── prod.js                 # 生产模式配置
  7. ├── node_modules                # npm依赖包
  8. ├── package.json                # Node.js manifest
  9. ├── package-lock.json           # 
  10. ├── dist                        # 打包目录
  11. ├── project.config.json         # 小程序项目配置
  12. ├── project.tt.json             # 
  13. ├── tsconfig.json               # TS配置文件
  14. ├── src # 源码目录
  15. │   ├── app.config.js           # 全局配置
  16. │   ├── app.less                # 全局 LESS
  17. │   ├── app.ts                  # 入口组件
  18. │   ├── index.html              # H5 入口 HTML
  19. │   └── pages                   # 页面组件
  20. │       └── index
  21. │           ├── index.config.ts # 页面配置
  22. │           ├── index.less      # 页面 LESS
  23. │           └── index.vue       # 页面组件
  24. ├── .gitignore                  # 指定git要忽略的文件目录or文件名
  25. ├── .editorconfig               # 协同团队人员间代码风格及样式规范化的配置文件, 跟eslint配套使用
  26. ├── global.d.ts                 #

看着文件目录很多很乱也不知道具体有啥用，没关系，我们先把项目运行起来再说。

运行项目

根据你想要运行的平台，在终端输入不同命令即可启动项目。

  1. // h5端命令
  2. npm run dev:h5
  4. // 小程序端命令
  5. // 前提是需要先在微信开发者工具中导入该taro项目，然后在终端输入下面的命令即可在小程序端运行
  6. npm run dev:weapp
  8. // rn端命令
  9. npm run dev:rn

左侧为h5端运行效果(默认端口是10086)、右侧为微信小程序端运行效果(RN端需依赖多个环境、暂不补充)
image.png image.png
至此，你已经看到了多端的运行效果了。

写在最后

至此, Taro项目已经跑起来了，你已经成功了一大步，加油吧～