快速上手小程序框架Taro，安装及使用教程（一）

骑猪看日落 2022-12-27 12:53 148阅读 0赞

##### 前言： #####

这个小程序框架已经出现了很久了，而且自从微信小程序出现之后，流心观察都可以发现，百度小程序，支付宝小程序，字节跳动小程序，QQ 小程序，京东小程序也越来越多，也越来越有用了。所以，掌握一个多端统一开发解决方案是一个很重要的事情。

##### 介绍： #####

官网文档：[http://taro-docs.jd.com/taro/docs/GETTING-STARTED][http_taro-docs.jd.com_taro_docs_GETTING-STARTED]  
GitHub地址：[https://github.com/nervjs/taro][https_github.com_nervjs_taro]  
Star：27.6k

Taro 是由京东 - 凹凸实验室打造的一套开放式跨端跨框架解决方案。支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5 等应用。

--------------------

## 步骤 ##

Taro 项目基于 node，请确保已具备较新的 node 环境(>=12.0.0)  
检查node 版本

### 1：安装node ###

端开发框架和环境都是需要 Node.js ，先安装node.js开发环境，vue的运行是要依赖于node的npm的管理工具来实现，下载[https://nodejs.org/en/][https_nodejs.org_en]，安装完成之后，打开cmd开始输入命令。(我用的是win10系统，所以需要管理员权限，右键点击以管理员身份运行cmd)，不然会出现很多报错。

![77e41b25bec4085440e2401a3cc02169.png][]

image

### 2：查看node的版本号 ###

下载好node之后，以管理员身份打开cmd管理工具，，输入 node -v ，回车，查看node版本号，出现版本号则说明安装成功。

输入命令： node -v

![f96e0ec8307d1a36a8cd86d486342c3f.png][]

### 3:安装 ###

CLI 工具安装，打开cmd，右键以管理员身份运行

cnpm install -g @tarojs/cli

![86c0040d56af266d4faa13ae670b0a7e.png][]

### 4：项目初始化 ###

使用命令创建模板项目  
先进入d盘，然后执行创建命令

taro init myApp

![2cf00718b8ec315d6f952ac4f382e6c4.png][]

然后一路回车键(如果你不想使用TypeScript的话，可以在是否需要使用 TypeScript的这一行里面选择No)

![abb648ba8c4a3e8485d8c0926a6d1dc4.png][]

> 在创建完项目之后，Taro 会默认开始安装项目所需要的依赖，安装使用的工具按照 yarn>cnpm>npm 顺序进行检测，一般来说，依赖安装会比较顺利，但某些情况下可能会安装失败，这时候你可以在项目目录下自己使用安装命令进行安装

![0e9460d6ce145e64ea0e11edf784ed61.png][]

打开D盘查看一下吧，可以看见新建的项目目录和自动安装的依赖，我这里是成功的哟。

![bd2161aaac9349a5ee1d92a2259cb866.png][]

如果依赖没有自动安装成功,那就手动输入一下,我一般习惯使用这个命令`cnpm install`

### 5：运行 ###

接下来的操作就是运行一下啦，Taro 需要运行不同的命令，将 Taro 代码编译成不同端的代码，然后在对应的开发工具中查看效果。

我这里是编译成微信小程序微信小程序编译预览及打包，要使用的命令，是这个样子的：

$ npm run dev:weapp
    $ npm run build:weapp

首先cd进入了我的项目里面，然后运行

![374eafd0013f6bf3a3e248dd45478787.png][]

这里就成功的看到了

![d0df9cee37939d1ef5d163e25b90a129.png][]

如果你要编译成， 百度小程序，支付宝小程序，字节跳动小程序，QQ 小程序，京东小程序，可以直接去官方给的文档上查看一下命令哟

[http_taro-docs.jd.com_taro_docs_GETTING-STARTED]: https://links.jianshu.com/go?to=http%3A%2F%2Ftaro-docs.jd.com%2Ftaro%2Fdocs%2FGETTING-STARTED
[https_github.com_nervjs_taro]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fnervjs%2Ftaro
[https_nodejs.org_en]: https://links.jianshu.com/go?to=https%3A%2F%2Fnodejs.org%2Fen%2F
[77e41b25bec4085440e2401a3cc02169.png]: /images/20221120/8d24eaff3caf483fa3a6cb603ca3b8a0.png
[f96e0ec8307d1a36a8cd86d486342c3f.png]: /images/20221120/7e2c1be3b7d54c249d482a3fcccf2681.png
[86c0040d56af266d4faa13ae670b0a7e.png]: /images/20221120/eb8eb8d4be234d5cbdd28b5c83d57516.png
[2cf00718b8ec315d6f952ac4f382e6c4.png]: /images/20221120/f4d9c3838fef4bb697a3a22a69675bee.png
[abb648ba8c4a3e8485d8c0926a6d1dc4.png]: /images/20221120/4328c81ff3784154b9498b245d8d7258.png
[0e9460d6ce145e64ea0e11edf784ed61.png]: /images/20221120/819181d3dea44eaea752bdcbeff82a91.png
[bd2161aaac9349a5ee1d92a2259cb866.png]: /images/20221120/056cc02f26044028bc8baa27bff8b1c9.png
[374eafd0013f6bf3a3e248dd45478787.png]: https://img-blog.csdnimg.cn/img_convert/374eafd0013f6bf3a3e248dd45478787.png
[d0df9cee37939d1ef5d163e25b90a129.png]: https://img-blog.csdnimg.cn/img_convert/d0df9cee37939d1ef5d163e25b90a129.png