简介
Taro 是一个一次编写，多端运行的前端框架，支持编译成微信小程序、H5、React Native 等多种平台。因其在跨平台方面的优异表现，得到了广泛的关注和应用。在 Taro 前端开发过程中，@tarojs/cli 是必不可少的 npm 包，本篇文章将详细介绍 @tarojs/cli 的使用教程，帮助开发者更好地使用 Taro 进行前端开发。
安装
使用 npm 全局安装 Taro cli
$ npm install -g @tarojs/cli
基础命令
初始化项目
在命令行中输入以下命令，即可在当前目录下初始化一个 Taro 项目。
$ taro init myApp
其中，myApp 是项目名称，可以根据实际情况进行修改。
启动项目
在项目目录下，输入以下命令，即可启动项目
$ cd myApp $ npm run dev:weapp # 小程序端 $ npm run dev:h5 # H5 端 $ npm run dev:rn # React Native 端
打包项目
在项目目录下，输入以下命令，即可将项目打包成可发布的文件
$ npm run build:weapp # 小程序端 $ npm run build:h5 # H5 端 $ npm run build:rn # React Native 端
深入命令
自定义配置
在项目根目录下，新建文件 config/index.js，即可自定义 Taro 配置。
module.exports = {
// 配置项
}添加页面
在项目目录下，输入以下命令，即可新增一个页面。
$ taro create --name pageName
其中，pageName 是页面名称，可以根据实际情况进行修改。
添加组件
在项目目录下，输入以下命令，即可新增一个组件。
$ taro create --name componentName --type component
其中，componentName 是组件名称，可以根据实际情况进行修改。
查看帮助文档
在命令行中，输入以下命令，即可查看 @tarojs/cli 的帮助文档。
$ taro --help
示例代码
配置 Taro 环境
-- -------------------- ---- ------- -- --------------- -------------- - - -- ---- ------ - --- --- -- -- -- - --- - --- --- -- -- ----- ------ - --- - --- --- - -
新增页面
在项目中，新增一个名为 MyPage 的页面，其对应组件为 MyComponent。
$ taro create --name MyPage $ taro create --name MyComponent --type component
App.jsx
-- -------------------- ---- -------
------ ----- - --------- - ---- --------------
------ - -------- - ---- ---------------
------ ----- ---- ---------------
------ ----------- ---- ---------
------ ---------------------
------ ------------
----- ----- - -------------
----- --- ------- --------- -
------------------- --
------------------ --
------------------ --
------------------------ --
-- ------
------ - -
------ -
--------------------
--------------------
--
------- -
-------------------- --------
----------------------------- -------
----------------------- ---------
----------------------- -------
-
-
------ -- -
------ -
--------- --------------
------ --
-----------
-
-
-
---------------- --- -------------------------------index.jsx
-- -------------------- ---- -------
------ ----- - --------- - ---- --------------
------ - ----- ------ - ---- --------------------
------ - ------- - ---- ---------------
------ - ---- ------ -------- - ---- -----------------------
------ --------------
----------- ------- -- -- --
-------
--- ---------- -- --
----- -
---------------
--
----- -
-----------------
--
---------- -
--------------------
-
---
----- ----- ------- --------- -
------ - -
----------------------- ----
-
------------------------- ----------- -
----------------------- ----------
-
-------------------- -- - -
---------------- -- - -
---------------- -- - -
----------- - -- -- -
-----------------
---- ---------------------
--
-
------ -- -
----- - ------- - -- - - ----------
----- - --- - - -------
------ -
----- ------------------
------- ------------------------------ ------ -----------
------- -----------------------------------
------- -----------------------------------
------- --------------------------------------------
------------------
-------
-
-
-
------ ------- -----MyPage.jsx
-- -------------------- ---- -------
------ ----- - --------- - ---- --------------
------ - ---- - ---- --------------------
------ ----------- ---- ------------------------------------------
------ ---------------
----- ------ ------- --------- -
------ - -
----------------------- ------- ---
-
------------------------- ----------- -
----------------------- ----------
-
-------------------- -- - -
---------------- -- - -
---------------- -- - -
------ -- -
------ -
----- -------------------
------------ --
-------
-
-
-
------ ------- ------MyComponent.jsx
-- -------------------- ---- -------
------ ----- - --------- - ---- --------------
------ - ---- - ---- --------------------
------ --------------------
----- ----------- ------- --------- -
------ - --
------------------------- ----------- -
----------------------- ----------
-
-------------------- -- - -
---------------- -- - -
---------------- -- - -
------ -- -
------ -
----- ------------------------
-----------
-------
-
-
-
------ ------- -----------结语
通过本篇文章的学习，我们可以深入了解 @tarojs/cli 的使用教程，包括基础命令、深入命令以及示例代码实现。希望大家可以通过阅读本篇文章，更好地掌握 Taro 的前端开发技术，快速进入 Taro 前端开发的领域。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/tarojs-cli