VUE的环境安装--【环境篇】

本系列校训

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

安装环境的选择

第一选择B站

这个没啥毛病了,就是一个字,稳。
不过,这一次问题比较大。视频不少,但是大多数都是安装完了node.js 之后,直接就运行VUE的helloworld. 欢迎界面了。准确说吧,这个也是开始,但是这个环境跑不起来git/gitee里的VUE项目呀。
所以,稳稳的翻车了
在这里插入图片描述

第二选择某宝

唯一可以以稍低价获得远程调试,全程服务的某宝,那还不是妥妥的给你搞定呀?但是这一次又翻了,因为淘宝上定价才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.19.0;
node-sass:
^4.14.1;
sass-loader:
^7.3.1;

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

node.js

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

node-sass

要注意的是你已经安装好了node.js。
下面的命令都是在命令行下进行的。如果你还不会打开命令行…那我还是劝你去淘宝上花点钱,先观摩一下别人操作。
如果你悟性高ctrl+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

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不得不拜拜了。

在控制台执行下面的命令

在控制台执行下面的命令:

npm config set msvs_version 2017 --global

验证设置:

npm config get msvs_version

在这里插入图片描述
必须要说,我的机器上也没有验证成功。不过也不影响VUE的使用。

安装 python 2.7/3.0

Python 下载地址:https://www.python.org/downloads/
我当时的机器里用的node.js 是14,安node-sass 的时候,要求我安python3.0以上。好在这一步你可以安完python2.7 再安python3.0 后面你只要修改path 就行了。
还是那句,不会改path 系统参数的。又得百很久了。

设置 ExecutionPolicy

用管理员权限打开 Windows PowerShell,执行下面的命令,并选择A,表示全部更改。

set-ExecutionPolicy RemoteSigned

最后安装 node-sass

npm install [email protected] -D

*******************************下面的分版本,
这里如果是12的话,就要安装4.12 (win7推荐)

npm install [email protected] -D

这里如果是14的话,就要安装4.14

npm install [email protected] -D

如果这一步安装正确了。那你真的应该庆祝一下了。因为最难的部分你都搞定了。甚至你都可以把C盘备份一下的。
不会的,打这个命令晕晕的,那就多装几次吧。如果学习过linux 的话,可能对这些感觉会好很多。同样的python 也是这样的环境安装方式。
所以,连比尔可能都没有想到,他把DOS窗口越来越忽视的时候,后面的前兴语言的环境竟然又再次使用了这样的安装方式。
不得不说,跟JAVA的MAVEN管理依赖包,版本,全局包的方式。node.js 可真的好LOW。
另外说一件比较搞笑的小故事:给这个烦人的安装过程也增加一点乐趣。就是node的作者在后来不停的修改,不停的接受吐槽,突然他发现,node有严重的内存问题

Node.js JavaScript Runtime
排查内存泄漏、优化空间、限制并发请求数量、设置垃圾回收频率、检查内容不足。具体方法如下:
内存泄漏:使用内存分析工具检查内存泄漏。
优化空间:使用缓存、避免重复计算等技巧减少内存使用。
限制并发请求数量:通过限制请求数量或增加服务器数量来解决问题

然后,作者想放弃node
这个技术也一下子进入了冷宫,但是后面因为vue ,react 安装需要node 。这个技术又一下子启死回生了。

安装其它依赖包

npm init -y

npm install [email protected] [email protected]

npm install [email protected] [email protected] [email protected] [email protected] -D

npm install [email protected] [email protected] -D

npm install [email protected] [email protected] -D

npm install less less-loader -D

npm install [email protected]

npm install stylus stylus-loader -D

npm install [email protected] [email protected] -D

最后验证

下载本文后面的资源包,然后,打开到一个目录。不能有中文,空格,最好是放F:\vue,d:\vue 这样的目录 。
然后,切换到主目录下。
在这里插入图片描述
进入这个目录的命令行。可以在地址栏里直接cmd 回车。这样就打开的所在目录的命令行。

npm insall

在这里插入图片描述

npm run build 命令可以将SRC编译出一套新的dist.
在这里插入图片描述
npm run dev
可以直接运行vue (其实是运行node 把vue 界面显示出来)
在这里插入图片描述
在这里插入图片描述

本文资源:

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

猜你喜欢

转载自blog.csdn.net/dearmite/article/details/131843423
今日推荐