本文成稿于 2021 年,内容可能存在过期,仅供参考~
1 安装基本开发环境
下载安装VScode和微信开发者工具
下载按照node.js 路径:D:\software\nodejs
2 配置 cnpm
npm(node package manager):nodejs 的包管理器,用于 node 插件管理(安装/卸载/管理依赖等)
cnpm:国内版的 npm(避免网络波动问题),每 10 分钟同步一次完整 npmjs. Org 镜像
- 配置 npm 的全局模块的存放路径、cache 的路径
npm config set prefix "D:\software\nodejs\node_global"
npm config set cache "D:\software\nodejs\node_cache"
在系统环境变量添加 NODE_PATH,输入路径为:
D:\software\nodejs\node_global
添加路径至系统变量 path:
D:\software\nodejs\node_global
安装 express(注:“-g”表示安装到 global 目录下,就是上面设置的 node_global 中)
npm install express -g
- 命令行输入 node 进入编辑模式,输入以下代码检测是否能正常加载模块
require('express')
- 安装 cnpm,输入以下命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
- 输入 cnpm -v ,检测是否正常
3 配置 uni -app 项目
- 首先全局配置淘宝镜像,方便以后下载相关依赖
cnpm install npm -g
- 打开 cmd,调出终端,全局安装脚手架
npm install -g @vue/cli
- 创建项目,
xxxx
为项目名
//dcloudio/uni-preset-vue 表示创建 `xxxx` 项目
vue create -p dcloudio/uni-preset-vue xxxx
- 切换到 my-project 路径启动项目(微信小程序)
npm run dev:mp-weixin
- 在微信开发者工具导入项目
点击项目->导入项目->选择刚创建的文件
导入路径:dist/dev/mp-weixin
- vscCode 编辑项目 src 文件,然后同步到微信开发者工具进行实时调试
用 vsCode 打开 my-project 文件夹,然后点击终端,新建终端
输入命令 npm run dev:mp-weixin
运行项目
4 后续问题及其修复
- 后续出现模块混乱的问题,此处修正(参考)
删除目录内所有的node_moudles
npm install
安装其他第三方包
cnpm install --save-dev sass-loader
cnpm install --save-dev node-sass
再尝试 npm run dev:mp-weixin
- debug:Node Sass version 5.0.0 is incompatible with^4.0.0
上述这个错误是因为node-sass为5.0.0,而node-sass的期待值是4.0.0
cnpm uninstall node-sass
cnpm install [email protected]
- vue 启动项目的报错:Failed to resolve loader: less-loader You may need to install it.
npm install less-loader -D
cnpm install node-less --save-dev