uniapp 环境配置

本文成稿于 2021 年,内容可能存在过期,仅供参考~

1 安装基本开发环境

下载安装VScode和微信开发者工具

下载按照node.js 路径:D:\software\nodejs

2 配置 cnpm

npm(node package manager):nodejs 的包管理器,用于 node 插件管理(安装/卸载/管理依赖等)

cnpm:国内版的 npm(避免网络波动问题),每 10 分钟同步一次完整 npmjs. Org 镜像

  1. 配置 npm 的全局模块的存放路径、cache 的路径
npm config set prefix "D:\software\nodejs\node_global"

npm config set cache "D:\software\nodejs\node_cache"
  1. 在系统环境变量添加 NODE_PATH,输入路径为:D:\software\nodejs\node_global

  2. 添加路径至系统变量 path:D:\software\nodejs\node_global

  3. 安装 express(注:“-g”表示安装到 global 目录下,就是上面设置的 node_global 中)

npm install express -g
  1. 命令行输入 node 进入编辑模式,输入以下代码检测是否能正常加载模块
require('express')
  1. 安装 cnpm,输入以下命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
  1. 输入 cnpm -v ,检测是否正常

3 配置 uni -app 项目

  1. 首先全局配置淘宝镜像,方便以后下载相关依赖
cnpm install npm -g
  1. 打开 cmd,调出终端,全局安装脚手架
npm install -g @vue/cli
  1. 创建项目,xxxx 为项目名
//dcloudio/uni-preset-vue 表示创建 `xxxx` 项目
vue create -p dcloudio/uni-preset-vue xxxx
  1. 切换到 my-project 路径启动项目(微信小程序)
npm run dev:mp-weixin
  1. 在微信开发者工具导入项目

点击项目->导入项目->选择刚创建的文件

导入路径:dist/dev/mp-weixin

  1. vscCode 编辑项目 src 文件,然后同步到微信开发者工具进行实时调试

用 vsCode 打开 my-project 文件夹,然后点击终端,新建终端

输入命令 npm run dev:mp-weixin 运行项目

4 后续问题及其修复

  1. 后续出现模块混乱的问题,此处修正(参考

删除目录内所有的node_moudles

npm install 安装其他第三方包

cnpm install --save-dev sass-loader

cnpm install --save-dev node-sass

再尝试 npm run dev:mp-weixin

  1. 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]
  1. vue 启动项目的报错:Failed to resolve loader: less-loader You may need to install it.
npm install less-loader -D
cnpm install node-less --save-dev

往年同期文章