VUE的环境安装node14.21--【环境篇】

本系列校训

用免费公开视频，卷飞培训班哈人！打死不报班，赚钱靠狠干！只要自己有电脑，前后项目都能搞！N年苦学无人问，一朝成名天下知！

安装环境的选择

原因

因为之前写的那一篇版本升级，还有就是一些路由连不上，但是之前的有一些又是有用的，
没办法，只好再重写一篇新的了。

选择某宝

英语不行的，看命令行晕的，请乖乖的花钱去某宝，让别人远程你得了。

唯一可以以稍低价获得远程调试，全程服务的某宝，那还不是妥妥的给你搞定呀？但是这一次又翻了，因为淘宝上定价才10元左右。所以，我身边的人还是有几个去试了试，就是会弄，让客服远程给你干干净净的装一遍也值了。
但是没想到，对方只给安了node.js 的最新版，然后，把VUE的welcome 项目弄出来就不管了。VUE项目编译不过去的，要加钱，加多少？不一定，看项目复杂程序。这…

自己动手，丰衣足食

首先按老习惯要东西理整一下。

要注意的是，VUE环境的安装，是 1 2 3 4 ，这样的顺序。
但是呢，因为2最复杂，所以，在按1之前，先要看一个表。

这是一个什么鬼？这是一个vue 的环境的同命索！
你安什么版本的node.js 就得安哪个版本的node-sass，如果你真的找了某宝小店，他上来去node.js的官网上找到了一个最新版安上了，然后，…你要想编译项目，只能把这个卸载了，因为没有相应版本的node-sass。
这是一套很多大佬比较喜欢的一套版本。

vue 安装
node:
v14.21.0;
node-sass:
^4.14.1;
sass-loader:
^7.3.1;

因为node安装其它的组件库的时候，还有有很多的警告，会说这个不是最新版等。而上面的那套版本是警告最少的。

（1)node.js

安装这个倒没啥好说。
Node.js 历史版本下载地址：https://nodejs.org/dist/
现在node14的最新版是14.21.3 那就用这个版。

（2)node-sass

要注意的是你已经安装好了node.js。
下面的命令都是在命令行下进行的。如果你还不会打开命令行…那我还是劝你去淘宝上花点钱，先观摩一下别人操作。
如果你悟性高Win+R 吧。

1 设置淘宝源（千万不要设置这个链接已失效，直接进入第三步）

npm config set registry http://registry.npm.taobao.org/

npm config set registry http://registry.npm.taobao.org/

2设置插件仓库地址（千万不要设置这个链接已失效，直接进入第三步）

npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass

npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass

（2.1)3安装 VS 2017 with Desktop Development Kit for C++

你没看错，这个东西要安装的是VS 全套里的工具。不是VS-code.

vs_buildtools 下载地址：https://visualstudio.microsoft.com/zh-hans/thank-you-downloading-visual-studio/?sku=BuildTools
vs_community 下载地址：https://visualstudio.microsoft.com/zh-hans/thank-you-downloading-visual-studio/?sku=Community

经过两段漫长的时间，终于安装好了。如果这一步安装不好，那说明你很有可能跟VUE不得不拜拜了。

（2.2)安装 python 3.0

Python 下载地址：https://www.python.org/downloads/
我当时的机器里用的node.js 是14，安node-sass 的时候，要求我安python3.0以上。现在只提供一个node14版本的，没有分支。
还是那句，不会改path 系统参数的。又得百很久了。

（2.3)最后安装 node-sass

npm install node-sass@4.14.1 -D

如果这一步安装正确了。那你真的应该庆祝一下了。因为最难的部分你都搞定了。甚至你都可以把C盘备份一下的。
不会的，打这个命令晕晕的，那就多装几次吧。如果学习过linux 的话，可能对这些感觉会好很多。同样的python 也是这样的环境安装方式。

（3)安装其它依赖包

npm init -y

npm install vue@2.6.x vue-router@3.1.x

npm install webpack@4.39.x webpack-cli@3.3.x webpack-dev-server@3.8.x html-webpack-plugin@3.2.x -D

npm install vue-loader@15.7.x vue-template-compiler@2.6.x -D

npm install css-loader@3.2.x style-loader@1.0.x -D

npm install less@4.2.0 less-loader@12.2.0 -D

npm install sass-loader@7.2.x

npm install stylus@0.62.0 stylus-loader@8.1.0 -D

npm install url-loader@2.1.x file-loader@4.2.x -D

最后验证

下载本文后面的资源包，然后，打开到一个目录。不能有中文，空格，最好是放F:\vue，d:\vue 这样的目录 。
然后，切换到主目录下。

进入这个目录的命令行。可以在地址栏里直接cmd 回车。这样就打开的所在目录的命令行。

（1）安装项目依赖库

npm insall

（2）编译

npm run build 命令可以将SRC编译出一套新的dist.

一些复杂一些的项目还可能会编译出来很多的CSS

（3）运行项目

npm run dev
可以直接运行vue （其实是运行node 把vue 界面显示出来）

本文资源：

VUE的环境安装-环境篇 的资源，一个VUE的测试项目
https://download.csdn.net/download/dearmite/88069429