Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
# 安装完成后,通过CMD执行以下命令来检查版本
C:\Users\xps>node -v
v14.16.0
【背景知识】为啥要安装node?
很久以前,js代码只能在浏览器里运行,自从出现了NodeJS,我们就多了一个运行环境。taro-cli运行在 NodeJS 环境下,是帮助我们开发“基于Taro框架的项目”的脚手架
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系统中,通过加上前缀点’.’,表示文件是隐藏文件。
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm install -g @vue/[email protected]
npm install -g [email protected]
参考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/[email protected] | MIT | deps: 83 | versions: 398
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
1、打开vs code开发工具,通过【File -> Open Folder... -> 选择 上一步taro项目目录,例如E:\srcspace\sap_mall -> 选择文件夹 】
2、打包微信小程序代码【当然也可以通过其他命令打包其他平台的小程序,这就是多端统一代码的魅力所在】
# 本地开发阶段,通过下面的命令打包
$ npm run dev:weapp
# 提交小程序代码审核时,通过下面的命令打包
$ npm run build:weapp
打开微信开发者工具,通过以下步骤进行预览:
1、 【微信扫码登录 -> 选择上一步taro项目打包的小程序代码目录,例如:E:\srcspace\sap_mall\dist 】
2、 【详情 -> 基本信息 -> appid -> 修改为自己从微信公众平台申请的小程序appid】
3、【详情 -> 本地设置 -> ES6转ES5 ->取消打钩】、【详情 -> 本地设置 ->上传代码时样式自动补全 ->取消打钩】