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

server/2024/10/22 11:21:56/

第一部分: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.icon-default.png?t=N7T8https://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

运行效果:

进入网页:

好啦!

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


http://www.ppmy.cn/server/90131.html

相关文章

基于FPGA + Qt + OpenCv的人脸考勤系统

一:界面设计 客户端界面设计: 服务端界面设计: 简介:首先服务端在注册界面先注册人脸,然后客户端界面进行人脸识别,将人脸识别的图像发送给服务端以后,服务端在图像数据库里寻找人脸比对,若有数据就将查询到的个人信息发送给客户端,并在客户端显示,查询界面是用来查…

数仓架构解析(第45天)

系列文章目录 经典数仓架构传统离线大数据架构 文章目录 系列文章目录烂橙子-终生成长群群主前言1. 经典数仓架构2. 传统离线大数据架构 烂橙子-终生成长群群主 前言 经典数仓架构 传统离线大数据架构 背景解析 1. 经典数仓架构 1991年,比尔恩门(Bill…

计算机网络基础:3.DNS服务器、域名分类

一、DNS服务器 DNS服务器在网络中的作用类似于餐厅中的“顾客座位对照表”,它帮助前台(路由器)将顾客(用户)的请求转发到正确的餐桌(目标设备)。 (1)概念与原理 DNS的基本概念 DNS&…

vllm部署记录

1. pip安装 pip install vllm 下载模型在huggingface.co 注意在modelscope上的这个opt-125m好像不行了,我git不下来报错 启动服务 vllm serve opt-125m --model opt-125m --port 8888 第一个opt-125m是名字,可以在vllm支持的模型中查到,第二个是模型存放文件夹及其路径…

Unity中有关Animation的一点笔记

也许更好的阅读体验 Animation Unity中Animation类并不是直接记载了和播放动画有关的信息,可以简单理解Animation为一个动画播放器,播放的具体内容就像卡带一样,当我们有了卡带后我们可以播放动画。 对应的则是编辑器中的组件 所以Anima…

C++之栈和队列使用及模拟实现

目录 栈的使用 队列的使用 栈的模拟实现 队列的模拟实现 deuqe容器介绍 在C语言中我们已经学习了栈和队列的相关性质,今天我们主要来学习C语法中栈和队列的相关概念。 栈的使用 在C中栈是一种容器适配器,在其内部适配了其它的容器,其相…

探索若依(Ruoyi):开源的企业级后台管理系统解决方案

探索若依(Ruoyi):开源的企业级后台管理系统解决方案 在现代企业管理中,拥有一个高效、稳定的后台管理系统是至关重要的。若依(Ruoyi)作为一款开源的企业级后台管理系统,为企业提供了丰富的功能…

【前端 13】Vue快速入门

Vue快速入门 在现代Web开发中,尽管通过HTML、CSS和JavaScript我们能够构建出美观且功能丰富的页面,但随着项目规模的增大,这种传统的开发方式在效率上逐渐显得力不从心。为了提高开发效率,前端开发者们引入了多种框架和库&#x…