Visual Studio Code + vue快速安装配置Node.js+Vue+webpack+vscode

第一部分:Node.js

第一步:下载Node.js

方法1:链接

下载 | Node.js 中文网 (nodejs.cn)

方法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:链接

下载Visual Studio Code - Code Editing. RedefinedVisual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.https://code.visualstudio.com/

方法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

运行效果:

进入网页:

好啦!

希望能帮助到大家,祝大家生活愉快!

相关推荐
涔溪21 分钟前
Vue3 的核心语法
前端·vue.js·typescript
Trouville011 小时前
Pycharm软件初始化设置,字体和shell路径如何设置到最舒服
ide·python·pycharm
Piink1 小时前
VSCode基本操作
vscode·编辑器
Zohnny1 小时前
3.组合式函数
vue.js
小周同学2 小时前
vue3 上传文件,图片,视频组件
前端·vue.js
哆啦A梦15882 小时前
62 对接支付宝沙箱
前端·javascript·vue.js·node.js
用户841794814563 小时前
vxe-table 使用 spanMethod 合并卡顿的解决方案
vue.js
临江仙4553 小时前
Vite 性能优化实战:从 0 到 1 打造极速开发体验(附完整配置)
vue.js·vite
q_19132846953 小时前
基于Springboot2+Vue2的旅游景点购票系统
java·vue.js·spring boot·后端·mysql·毕业设计·计算机毕业设计