[Taro入门：1] 环境准备及项目初始化

一、环境准备

• Nodejs V14.17.0
• Npm镜像源 淘宝镜像：registry.npm.taobao.org/
• IDE VsCode V1.56.2
• 微信开发者工具

二、安装@taro/cli

npm install -g @tarojs/cli
复制代码

等待安装完成后，可以执行taro -v检查是否安装成功及版本

三、使用tarocli初始化项目

在准备存放项目的目录下执行命令：

taro init yourAppName
复制代码

命令执行后，根据命令行的提示输入或选择项目的配置，包括：

• 项目描述 taro demo
• 选择框架 react
• 是否启动typerscript n
• CSS预处理器类型 Saas
• 模板源 Gitee

tarocli会根据以上选择生成项目目录及文件，并且安装项目依赖。

四、启动项目

演示微信小程序的编译启动

4.1 执行编译命令

npm run dev:weapp // 开发
npm run build:weapp // 生产打包
复制代码

等待命令执行完成后，生成的文件位于dist目录下

4.2 使用微信开发者工具导入dist目录

1. 点击“导入”，并选择dist目录

2. 选择使用“测试号 AppID”

3. 点击“新建”，等待微信开发工具编译完成，就可以看到页面了

五、代码修改体验

初始化的项目结构比较简单，只包含了一个页面，代码位于src\pages\index目录，该目录下有3个文件

• index.config.js 页面配置项
• index.jsx 核心，包含页面的视图及逻辑，使用类react语法开发
• index.scss 页面的样式

修改index.jsx中代码，将Hello world，修改成Hello taro world：

修改完成后，taro会重新编译，生成微信小程序文件，微信开发工具中会重新加载文件，刷新页面：