VSCode+Vue+Node前端学习之路(一)软件的下载和安装以及前端开发环境搭建Node和Npm

最近开始自主学习前端开发,查了一些资料后决定使用vscode编辑器进行编辑,这里记录一下自己第一个项目的编辑过程。

一、Vscode的下载和安装

VSCode下载地址:https://code.visualstudio.com/Download
VSCode+Vue+Node前端学习之路(一)软件的下载和安装以及前端开发环境搭建Node和Npm

选择对应的系统下载即可,安装时选择安装路径,然后一直下一步就可以完成安装。
我们来到主界面:
VSCode+Vue+Node前端学习之路(一)软件的下载和安装以及前端开发环境搭建Node和Npm
这里插一句题外话,如果不想使用英文而是想使用中文进行编辑的,可以通过下载插件实现汉化操作:
按住快捷键ctrl+shift+p

在输入框中输入config display language

点击install additional languages

在左侧找到Chinese(Simplified) Language点击install进行下载,然后点击右下角Restart Now进行重启,就可以使用汉化的编辑器了。
1.VSCode+Vue+Node前端学习之路(一)软件的下载和安装以及前端开发环境搭建Node和Npm
2.
VSCode+Vue+Node前端学习之路(一)软件的下载和安装以及前端开发环境搭建Node和Npm
3.
VSCode+Vue+Node前端学习之路(一)软件的下载和安装以及前端开发环境搭建Node和Npm
4.
VSCode+Vue+Node前端学习之路(一)软件的下载和安装以及前端开发环境搭建Node和Npm

二、Node.js

Node.js下载地址:http://nodejs.cn/download/
安装过程就很简单了,选择安装地址,然后一直下一步,等安装完成之后打开CMD输入node -v,cmd有输出版本号说明安装成功。
新版本的node里面已经装得有npm了,同样打开CMD输入npm -v,输入版本号说明npm也安装成功。

三、切换npm镜像源为淘宝npm镜像

为什么要把npm镜像切换成淘宝的镜像呢?
这是因为在开发过程中要访问npm本身的官方镜像的话会比较慢,所以使用国内镜像进行访问。

切换步骤:
1.以管理员身份运行cmd
2.输入 npm install -g cnpm --registry=https://registry.npm.taobao.org 等待下载
3.下载完成后输入cnpm -v就会输入对应信息
VSCode+Vue+Node前端学习之路(一)软件的下载和安装以及前端开发环境搭建Node和Npm
更多cnpm相关信息可以查阅阿里云cnpm官网:https://developer.aliyun.com/mirror/NPM

四、新版Vue+脚手架Vue-Cli4.3安装

vue官方文档:https://cn.vuejs.org/
vue-cli安装:
1.管理员权限启动CMD
2.输入 cnpm install -g @vue/cli 等待下载完成
3.输入 cnpm install -g @vue/cli-init
4.输入vue回车就可以看到对应信息VSCode+Vue+Node前端学习之路(一)软件的下载和安装以及前端开发环境搭建Node和Npm
到这里工具的安装就结束了。