如何用VSCode创建一个vue项目（win7 适用）

一. 安装Visual Studio Code

1.下载

（VS code For win7 最后支持的一个版本是 1.70.3，我这里用的1.70.2）

下载地址：  https://download.csdn.net/download/m0_37951794/87541880?spm=1001.2014.3001.5503

或去官网下载：Download Visual Studio Code - Mac, Linux, Windows

2. 安装

（安装比较简单，这里不再多说，可参照如下博客）

VSCode详细安装教程（Windows 7）附安装包_vscode win7_镜冰的博客-CSDN博客

二. 安装node.js

(我是win7系统，由于支持win7系统的node最高版本是node.js 13.14.0版本，于是起初我安装了node.js 13.14.0版本，但发现现有的react / Vue不支持低版本的node，于是我是这么解决的)

1. 下载

zip的不需要安装，直接解压并根据解压路径配置环境变量即可，我解压在G:\nodejs 目录下：

下载地址：Index of /download/release/v16.10.0/

在 nodejs 安装目录下，创建 “node_global” 和 “node_cache” 两个文件夹

2. 环境变量配置：

系统变量新增变量: NODEJS_HOME=G:\nodejs\node-v16.10.0-win-x64

系统变量在path后追加：  ;%NODEJS_HOME%;%NODEJS_HOME%\node_global

 用户变量在path后追加：  ;G:\nodejs\node-v16.10.0-win-x64\node_global

 

3. 版本问题

在win7系统直接安装 高于13.14.0版本的nodejs(我安装的是node.js 16.1.0 )，虽然win7不支持高于node.js 13.14.0的版本，但是可以通过如下设置跳过检测，来实现win7正常运行高版本nodejs:

在系统环境变量里添加变量NODE_SKIP_PLATFORM_CHECK=1

用管理员身份运行 cmd,输入如下命令，可以看到node版本信息：

4. 配置

将 nodejs 安装目录下，创建的 “node_global” 和 “node_cache” 两个文件夹设置一下：

设置全局模块的安装路径到 “node_global” 文件夹

npm config set prefix "G:\nodejs\node-v16.10.0-win-x64\node_global"

设置缓存到 “node_cache” 文件夹

npm config set cache "G:\nodejs\node-v16.10.0-win-x64\node_cache"

检测默认位置是否更改生效，执行如下命令后，会在node_global目录下生成node_modules文件夹，并加express下载到该node_modules文件里：

npm install express -g

5. 设置淘宝镜像源

将npm默认的registry修改为淘宝registry，并全局安装基于淘宝源的cnpm：

-- 查看镜像源
npm config get registry

-- 更改镜像源 为淘宝源
npm config set registry https://registry.npm.taobao.org/

-- 全局安装基于淘宝源的cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

 安装好后，在node_global\node_modules目录下，会生成cnpm文件夹

6. 安装vue脚手架

由于我接下来想创建的是vue项目，所以需要下载安装vue脚手架（如果是开发react,就安装react脚手架）

-- 安装vue脚手架
npm install -g '@vue/cli'

7. 验证开发环境是否完全搭建好

用管理员身份运行vscode,在vscode里查看各配置是否生效（或用管理员身份运行cmd,在cmd里查看）：

 三.创建vue项目

 1. 创建一个目录作为工作空间，我创建的目录是：G:\VSCode\workspace\Vue

 2.在vscode里打开该目录，并在该目录里新建自己的一个vue工程：

-- 创建vue工程
npm init vue@latest

 

这样一个vue的项目就创建完成了 。

如有疑问请微信咨询：shx0928