第一部分:Node.js
第一步:下载Node.js
方法1:链接

方法2:百度网盘
链接:https://pan.baidu.com/s/1zIqu8H9rb_I1i-1OWD7swQ?pwd=aurk
提取码:aurk
--来自百度网盘超级会员V4的分享
作用:node.js 是一种javascript的运行环境,能够使得javascript能够脱离浏览器运行。以前js只能在浏览器基础上运行,能够操作的也知识浏览器,比如浏览器上的放大缩小操作,前提是浏览器开启的基础上进行操作(浏览器是客户端)。有了node.js之后,js可以在服务端进行操作,直接在系统上进行操作,可以打开、关闭浏览器等操作。
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。
Node.js 的包管理器 npm,是全球最大的开源库生态系统。
简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好
第二步:安装Node.js
(1)点击next

(2)点击accept,next

(3)更改路径

(4)点击next

(5)点击next

(6)点击install

第三步:Node.js配置环境变量
(1)进入设置,搜索"环境变量"

(2)点击环境变量

(3)在系统变量里面找到path并双击
然后写入自己的node.js的安装路径:

可以看到我的是E:\49nodejs

第四步:验证Node.js是否安装配置成功
(1)进入cmd命令行窗口,输入node -v查看nodejs版本
node -v
运行结果:
node -v

(2)输入npm -v查看npm版本
npm -v
运行结果:

第五步:修改Node.js模块的下载位置
(1)查看npm全局模块的存放路径
npm get prefix
运行结果:

(2)查看npm缓存默认存放路径
npm get cache
运行结果为:

(3)开始自己新建文件夹
在 nodejs 安装目录下,创建 "node_global" 和 "node_cache" 两个文件夹:

(4)修改保存路径
设置全局模块的安装路径到 "node_global" 文件夹:
注意:下面这个引号里面的内容要改成你上面这个文件夹的具体路径:
npm config set prefix "E:\49nodejs\node_global"
运行结果为:

设置缓存到 "node_cache" 文件夹:
npm config set cache "E:\49nodejs\node_cache"
运行结果为:
**注意:**由于 node 全局模块大多数都是可以通过命令行访问的,还要把【node_global】的路径"E:\devTools\nodejs\node_global"加入到【系统变量 】下的【PATH】 变量中,方便直接使用命令行运行,如下图所示:
测试是否修改成功:
经过上面的步骤,nodejs下载的模块就会自动下载到我们自定义的目录,接下来我们测试一下是否更改成功。输入下面的命令:
注意:一定要用管理员身份运行cmd
npm install express -g
这个g指的是global的意思,所以也可以写成:
npm install express --global
注意:"-g"等同于"--global","-g" 是全局安装,不加"-g"就是默认下载到当前目录。"-g" 表示安装到之前设置的【node_global】目录下,同时nodejs会自动地在node_global文件夹下创建【node_modules】子文件夹, 即自动下载到"E:\devTools\nodejs\node_global\node_modules" 路径下。
包下载成功效果:


express模块成功,然后在文件管理器中查看是否保存到上面自定义的路径下。
第六步:更换镜像
1.修改默认镜像
(1)查看当前使用的镜像地址
npm config get registry
运行结果为:

(2)将npm默认的registry修改为国内镜像
npm config set registry https://registry.npmmirror.com
运行结果为:

再次运行npm config get registry以查看是否修改成功:

可以发现,已经修改成功了!
2.修改全局镜像
说明:由于npm的服务器在海外,所以访问速度比较慢,访问不稳定 ,cnpm的服务器是由淘宝团队提供,服务器在国内,cnpm是npm镜像,一般会同步更新,相差在10分钟,所以cnpm在安装一些软件时候会比较有优势。但是cnpm一般只用于模块安装,在项目创建与卸载等相关操作时仍使用npm。
npm install -g cnpm --registry=https://registry.npmmirror.com
注意:管理员方式运行!
运行结果为:

本地查看cnpm模块:

执行命令查看cnpm是否安装成功:
cnpm -v
运行结果为:

第二部分:安装Vue
第一步:安装webpack
作用:webpack用来项目构建、打包、资源整合等。
npm install webpack -g
注意点:以管理员身份运行!
运行结果为:

第二步:安装vue-cli脚手架构建工具
注意这里安装新的脚手架。
npm install -g @vue/cli
注意点:以管理员身份运行!
运行结果为:

出现warn没关系,继续执行即可。
验证来查看vue版本及是否成功:
vue -V
运行结果为:

第三步:基于上述Vue创建项目
(1)新建一个存放项目的路径,例如:E:\48Visual Studio Code + vue\VueCode

cmd进入该路径下:

(2)新建项目 vue create vue-demo1,这里选择第三个Manually select features自定义选项操作并回车(至于第一个和第二个选项可以快速搭建带eslint和babel的项目)。
vue create vue-demo8
(3)选择manually以及四个选项,然后点击回车到下一步:

(4)我们选择的版本是2.x,然后回车

(5)这里选择history模式,所以输入Y,然后回车(如果使用hash,则输入n)。

(6)代码语法错误检查,这里选择ESLint + Standard config,这个是标准的,然后回车。

(7)选择检查代码语法的时机,这里选择第一个Lint on save(保存时检查),然后回车。

(8)第三方配置文件存在的方式,这里选择第一个In dedicated config files,然后回车。

(9)是否保存本次配置为预设项目模板,这里选择N(也可以选择Y,这样下次可以直接使用该配置方案快速搭建项目),然后回车,等待项目搭建成功。

(10)项目搭建完成。

(11)按照提示,运行项目:
注意:要cd后面要换成你自己的这个创建的项目名:
cd vue-demo8
然后运行:
npm run serve
效果:

然后输入http://10.93.226.107:8080/进行访问
http://10.93.226.107:8080/
效果为:

第三部分:安装Visual studio code
第一步:下载
方法1:链接

方法2:百度网盘
链接:https://pan.baidu.com/s/10VvdIu7vtGaojr9ygg1MAg?pwd=xil3
提取码:xil3
--来自百度网盘超级会员V4的分享
第二步:安装
(1)点击我同意,点击下一步

(2)更改路径

(3)点下一步

(4)选一个path

(5)安装完成

第三步:使用
调节颜色:

然后直接点x就行了,调完颜色就ok了

打开项目:C:\Windows\System32\vue-demo8

打开vscode,注意,最好以管理员身份运行:

点击打开文件open folder按钮:

选择上面我们说的这个文件vue-demo8

点击trust

打开终端:

输入:
npm run serve
运行效果:

进入网页:
好啦!
希望能帮助到大家,祝大家生活愉快!