【小程序商城实战-Taro3开发-课程2】搭建taro开发环境

一、前提

1、nodeJS

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。

# 安装完成后，通过CMD执行以下命令来检查版本
C:\Users\xps>node -v
v14.16.0

【背景知识】为啥要安装node？

很久以前，js代码只能在浏览器里运行，自从出现了NodeJS，我们就多了一个运行环境。taro-cli运行在 NodeJS 环境下，是帮助我们开发“基于Taro框架的项目”的脚手架

                                          

2、npm

NodeJS的包管理生态是 NPM，是现在世界上最大的开源程序包库。类似于java服务端开发技术里的maven

# nodejs安装包里自带了npm，不需要单独安装。通过以下命令检查npm版本
C:\Users\xps>npm -v
6.14.11

【背景知识】全局安装

nodejs通过npm安装包时，分为本地安装和全局安装。本地安装很好理解，通过npm install jquery安装jquery库时，会安装到当前目录的node_modules子目录下。全局安装则默认会安装到C:\Users\xps\AppData\Roaming\npm 目录下。我们可以通过命令修改全局安装的目录，例如：npm config set prefix "C:\\Users\\xps\\AppData\\Roaming\\node_global"。

                                                        

不论你是否使用命令配置，其最终都是修改npm的配置文件《.npmrc》。通常情况下有两个.npmrc文件：

（1）一个在用户目录下【例如，我本地的位置  C:\Users\xps\.npmrc】；

（2）一个在nodejs安装目录下【例如，我本地的位置 D:\installspace\nodejs\node_modules\npm\.npmrc】    

# 通过npm cli命令查看配置
C:\Users\xps>npm config list
; cli configs
metrics-registry = "http://registry.npm.taobao.org/"

; userconfig C:\Users\xps\.npmrc
cache = "E:\\nodejs_module\\node_cache"
prefix = "E:\\nodejs_module\\node_global"
registry = "http://registry.npm.taobao.org/"

; node bin location = D:\installspace\nodejs\node.exe
; cwd = C:\Users\xps
; HOME = C:\Users\xps
; "npm config ls -l" to show all defaults.

【背景知识】什么是rc文件？

许多程序在启动时，都需要“rc”后缀的初始文件或配置文件。“rc”文件通常在程序的启动阶段被调用，它是“run command”(运行命令)的简写。如.bashrc是当bash shell启动后所运行的脚本，它是专门用于给bash做初始化的，比如用来设置bash的别名、颜色等。

Linux系统中，通过加上前缀点’.’，表示文件是隐藏文件。

3、cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

4、vue-cli

npm install -g @vue/cli@3.0.5

5、vue

npm install -g vue@3.0.5

二、安装taro-cli

参考Vue CLI安装 和 taro3官方安装及使用教程

# npm install -g @tarojs/cli  
# 从国内连接国外网站的速度比较慢，建议使用阿里镜像下载安装
C:\Users\xps> cnpm install -g @tarojs/cli

# 查看taro版本
C:\Users\xps> npm info @tarojs/cli
@tarojs/cli@3.2.1 | MIT | deps: 83 | versions: 398

三、使用集成开发工具

1、通过taro创建第一个项目

E:\srcspace>taro init sap_mall
👽 Taro v3.2.1

Taro 即将创建一个新项目!
Need help? Go and open issue: https://tls.jd.com/taro-issue-helper

? 请输入项目介绍！ 小程序商城
? 请选择框架 Vue3
? 是否需要使用 TypeScript ？ Yes
? 请选择 CSS 预处理器（Sass/Less/Stylus） Sass

【背景知识】前端项目命名规范
全部采用小写方式， 以下划线分隔。

以“智慧农业平台-商城小程序”为例，可以使用全称smart_agriculture_platform_mall，或者使用简称 sap_mall

2、使用Visual Studio Code进行源码开发

1、打开vs code开发工具，通过【File -> Open Folder...  -> 选择 上一步taro项目目录，例如E:\srcspace\sap_mall   -> 选择文件夹 】

2、打包微信小程序代码【当然也可以通过其他命令打包其他平台的小程序，这就是多端统一代码的魅力所在】

# 本地开发阶段，通过下面的命令打包
$ npm run dev:weapp

# 提交小程序代码审核时，通过下面的命令打包
$ npm run build:weapp

3、使用微信开发者工具进行效果预览

打开微信开发者工具，通过以下步骤进行预览：

1、 【微信扫码登录 ->  选择上一步taro项目打包的小程序代码目录，例如：E:\srcspace\sap_mall\dist 】

2、 【详情 -> 基本信息 ->  appid  -> 修改为自己从微信公众平台申请的小程序appid】

3、【详情 -> 本地设置 -> ES6转ES5 ->取消打钩】、【详情 -> 本地设置 ->上传代码时样式自动补全 ->取消打钩】