uniapp 环境配置
发表评论
65 views

本文成稿于 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

往年同期文章