win7环境 搭建VUE环境过程

今天是24年03月22日，win7系统目前并不是主流，但是公司分配给我的电脑是win7，所以没办法，只能在win7上进行搭建。反复搭建了三天最终总算是搭上了

大致流程和【vin7 安装vue教程】贴下的安装过程一样。同时需要配置Sass，参见【vue项目使用sass】。所以在这里重写一下用以留存。

一、安装Node.js

首先Node.js的最新版本并不支持win7。所有高于【13.14.0】版本的Node.js均会显示不支持。

所以就从官网上直接安装【13.14.0】的版本。然后自动安装。【Node.js】官方下载地址

安装时记得添加到Path。

安装程序会同时安装匹配的npm，版本为【6.14.4】

安装完成后打开cmd 【管理员模式，下同】

输入：

node -v

显示node版本号【v13.14.0】

输入：

npm -v

显示npm版本号【v6.14.4】

二、安装cnpm

使用npm安装内容会报错，所以需要使用镜像站，但对应 npm@6.14.4 的版本，cnpm也需要安装对应的版本。

在此我们使用华为镜像站，安装cnpm的【7.1.1】版本。

npm i -g cnpm@7.1.1 --registry=https://mirrors.huaweicloud.com/repository/npm/

安装完成后使用

cnpm -v

可一次性查看Node.js、npm、cnpm的版本信息。

三、安装webpack

同样，webpack也不能用最新版本。在此安装【5.9.0】

npm i -g webpack@5.9.0

或

cnpm i -g webpack@5.9.0

四、安装Vue及VueCli

cnpm i -g vue@3.4.21

以及

cnpm i -g vue-cli@2.9.6

想用新版的@vue/cli的版本就别想了，安上了也用不了。

五、创建项目

vue init webpack [项目名]

之后根据你的需要创建完成项目。

六、在vue项目中配置Sass

cmd进入到你的项目文件地址。

执行

cnpm i -D node-sass@4.13.1

以及

cnpm i -D sass-loader@7.3.1

完成安装后，在vue项目中的 build 目录下，webpack.base.conf.js 文件中，module.export 中的module下 rules数组中加入解释scss文件的loader。

七、完成配置。