基于React的taro项目搭建

安装nodejs

因为taro项目基于nodejs，所以要先安装nodejs。

1. 进入nodejs官网就行下载对应的版本
   
2. 安装Nvm管理node版本
   windows下安装nvm版本
   
   nvm-noinstall.zip： 这个是绿色免安装版本，但是使用之前需要配置。
   nvm-setup.zip：这是一个安装包，下载之后点击安装，无需配置就可以使用，方便。
   Source code(zip)：zip压缩的源码，解压后可以直接使用。
   Sourc code(tar.gz)：tar.gz的源码，一般用于*nix系统。

1、下载压缩包后，解压，点nvm-setup.exe。

2、选择同意协议，点击下一步；

3、选择nvm的本地安装目录， 点击下一步；

4、设置node.js的symlink，需要设置nodejs的快捷方式存放的目录，点击下一步；
5、进行点击下一步，就可以完成安装。
6、查看nvm是否安装成功

7、之前安装过的node会被移到nvm的文件夹中，并注明对应的版本号。

nvm的常用命令
nvm ls	// 查看目前已安装的node版本
nvm install 10.24.1 // 安装指定版本的node
nvm use 10.24.1 // 切换到指定的版本下（要在超级管理员权限下）
nvm uninstall 10.24.0 // 卸载指定的版本
nvm ls-remote // 列出所有可安装的版本
nvm current // 显示当前使用的版本
nvm install stable // 安装最新稳定版 node
nvm deactivate // 解除当前版本绑定

安装react

// 全局安装react，创建项目
npm install -g create-react-app

// 运行项目
npm run start

taro/cli安装

// 使用npm安装CLI(全局安装node版本下最新的taro)
npm install -g @taro/cli
// 使用cnpm安装CLI(全局安装node版本下最新的taro)
cnpm install -g @taro/cli

// 查看taro版本
npm info @taro/cli

taro创建项目

// 创建模板项目
taro init (项目名称)
// 创建完后，要重置一下依赖
npm install
cnpm install
// 启动项目
npm run dev:weapp (微信小程序)
npm run dev:swan (百度小程序)
npm run dev:alipay (支付宝小程序)
npm run dev:tt (头条小程序)
npm run dev:h5 (h5页面)
npm run dev:qq (qq小程序)
npm run dev:jd (京东小程序)
npm run dev:rn (react-native)

// 项目打包
npm run build:(对应的小程序)

项目目录说明

├── babel.config.js             # Babel 配置
├── .eslintrc.js                # ESLint 配置
├── config                      # 编译配置目录
│   ├── dev.js                  # 开发模式配置
│   ├── index.js                # 默认配置
│   └── prod.js                 # 生产模式配置
├── package.json                # Node.js manifest
├── dist                        # 打包目录
├── project.config.json         # 小程序项目配置
├── src # 源码目录
│   ├── app.config.js           # 全局配置
│   ├── app.css                 # 全局 CSS
│   ├── app.js                  # 入口组件
│   ├── index.html              # H5 入口 HTML
│   └── pages                   # 页面组件
│       └── index
│           ├── index.config.js # 页面配置
│           ├── index.css       # 页面 CSS
│           └── index.jsx       # 页面组件，如果是 Vue 项目，此文件为 index.vue