Taro项目构建_taro npm构建-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41807489/article/details/106757760

Taro的安装

# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli
# OR 安装了 cnpm，使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli

Taro创建项目

//使用如下命令创建app
$ taro init firstDemo

Taro安装依赖

Taro启动服务

//web
$ npm run dev:h5
//微信小程序
$ npm run dev:weapp
//百度小程序
$ npm run dev:swan
//支付宝小程序
$ npm run dev:alipay
//字节跳动小程序 
$ npm run dev:tt

Taro目录结构

config文件夹内部是文件配置,开发环境的,生产环境的,测试环境的

taro是一套代码多端运行,运行时会生成dist文件夹,内部文件就是微信小程序/H5/百度小程序等多端运行的文件

package.config.json等于微信小程序开发者工具中的package.config.json文件

src 入口文件,项目代码文件

src内部文件结构

app.jsx入口文件

文件内部的config等于微信小程序的json配置jsx文件就相当于微信小程序的js

on+js文件

pages文件页面组件或页面代码文件，

个组件或页面代码由.jsx与.less样式文件组成。

Taro运行说明

Taro的项目运行后，直接将dist目录下的项目文件放到相应的开发者工具下预览即可。

H5项目手机预览可以通过搭建express服务器实现本地预览。

npm run build:h5 在dist中生成打包后的代码文件

创建一个新的文件夹：将dist目录复制到当前项目中：

未安装全局环境的在新文件夹里安装环境express 然后还可以安装nodemon监视目录中的文件修改,已安装环境的直接初始化项目，然后将dist目录配置成启动页即可。

启动服务接着通过草料二维码，本机IP地址加端口生成二维码，手机与电脑连接同一个局域网，然后手机扫描即可预览。