项目重建日记：从零搭建前端开发环境

一、工具下载以及安装

1. 微信小程序开发工具：

https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

一般情况下，win10下载最新稳定版本，win7系统1.05以下版本才兼容

这里本人公司电脑是win7系统下载的是1.05（不要问为什么是win7，问就是老古董配置了）

傻瓜式安装软件即可

这里我已经安装过了

2. HbuildX：前端开发者服务的通用 IDE编辑器，常用于开发小程序、app等等。

https://www.dcloud.io/hbuilderx.html

HbuilderX无需安装，下载后直接解压文件夹找到应用程序，右键创建桌面快捷方式打开即用

3. VScode：微软出品的前端开发工具，

最后支持win7系统的版本：

https://code.visualstudio.com/updates/v1_70

user版本区别计算机账户（有权限），system版本开放计算机账户使用（通用），Arm64版本用于Arm处理器架构基本用不上，一般情况下下载system版本。

4. SublimeText：一款轻量级、非常好用的文本编辑器，内置可自由配置工具插件作为开发工具使用。

http://www.sublimetext.com/

以上三款开发工具为目前流行前端开发工具，这里JetBrains家的webstorm同样齐名通用。因为本人没用就暂不介绍了，想了解更多自己网上搜。

二、开发环境搭建

1.nvm：node版本管理器，可自由安装切换node版本，再也不用担心不同项目node版本不兼容问题。官网本身就有安装和命令教程，还贴心配置了ChatGPT镜像网站，这里就不过多讲解了，不懂就问AI。

下载nvm：https://nvm.uihtm.com/

cmd尝试nvm命令下载：（目前node支持win7系统的最高版本为13.14.0）node下载成功，npm显示github路径下载失败，需要更换下载镜像路径。

配置下载镜像，在nvm安装路径下找到setting.txt文件，打开，新增如下信息保存：

（国内淘宝镜像）

node_mirror: https://npm.taobao.org/mirrors/node/

npm_mirror: https://npm.taobao.org/mirrors/npm/

卸载重新安装试试

说一下nvm安装node后node的配置，找到安装版本的文件打开，手动新建node_global和node_cache文件夹。（一个是全局安装存放位置，一个是缓存数据存放位置）

创建完两个文件夹后，在cmd窗口中输入以下命令（两个路径即是两个文件夹的路径）：

npm config set prefix “你的node_global路径”

npm config set cache “你的node_cache路径”

失败了就手动添加一下，找到C盘用户目录.npmrc文件

这里我用的sublime编辑器打开的，把路径写进去保存即可；（prefix=‘你的node_global路径’，cache=‘你的node_cache路径’）

我又重新尝试了一下cmd命令方式写入了一下，如下无报错表示成功，第一次可能是我用了单引号导致了失败。

npm安装淘宝镜像源提升速度：（这里我的cmd权限有点问题升级报错，就不详细展示了，关于node.js自行上网学习，npm、cnpm、npx、pnpm、yarn 包管理器可以了解一下）

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

用npm尝试安装一下vue：npm install -g @vue/cli@4.5.13（需要指定为vue4.5.13以下版本，win7安装最新vue会要求你的node的版本必须是在12或14及14以上，我们这里是13.14，是爱的味道(╹▽╹)！）

安装成功后，vue命令查看情况，勉强还能用。

尝试用vue创建一个uni-app项目：

vue create -p dcloudio/uni-preset-vue my-project(自定义项目名)
随意选择模板，我选了Hello uni-app

创建完毕，可以看到完成后最后两行命令，按照提示运行项目即可。

启动成功后，在浏览器输入访问地址。

浏览器出现内容页面即PC端访问成功！

打开下载好的HuilderX开发工具，点击‘文件’–点击‘导入’–选择‘从本地目录导入’，找到创建项目的位置路径导入项目；

打开微信小程序开发者工具 --设置

找到安全 – 将服务端口打开

回到HuilderX，找到工具菜单，进行相关配置。

找到运行 – 运行到小程序模拟器 – 启动微信开发者工具（确认是当前项目）

小程序启动成功！

有关小程序如何上线，可以自己研究一下微信公众平台文档说明。本人下次有时间再演示。

最后将node集成配置到HuilderX，就可以通过HuilderX来跳过cmd直接打开终端操作了。

转载注明链接：