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
运行效果:

进入网页:
好啦!
希望能帮助到大家,祝大家生活愉快!
相关文章:
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?pwdaurk 提取码:aurk --来自百度网盘…...
【Dart 教程系列第 49 篇】什么是策略设计模式?如何在 Dart 中使用策略设计模式
这是【Dart 教程系列第 49 篇】,如果觉得有用的话,欢迎关注专栏。 博文当前所用 Flutter SDK:3.22.1、Dart SDK:3.4.1 文章目录 一:什么是策略设计模式?二:为什么要使用策略设计模式࿱…...
BGP路由反射器
原理概述 缺省情况下,路由器从它的一个 IBGP对等体那里接收到的路由条目不会被该路由器再传递给其他IBGP对等体,这个原则称为BGP水平分割原则,该原则的根本作用是防止 AS内部的BGP路由环路。因此,在AS内部,一般需要每台…...
DolphinDB Web 端权限管理:可视化操作指南
在现代数据库管理中,高效和直观的权限管理对于用户的数据安全是至关重要的。过去 DolphinDB 用户需要依赖系统脚本来管理用户和权限,这对于缺乏技术背景的管理员来说既复杂又容易出错。 为了提升用户体验和操作效率,DolphinDB 目前在 Web 上…...
学习Vue2收藏这一篇就够了(如何创建Vue实例)
什么是Vue? Vue是什么:是一个用于构建用户界面的渐进式框架 什么是构建用户界面:基于数据动态渲染页面 什么是渐进式:循序渐进的学习 什么是框架:一整套完整的项目解决方案 创建Vue实例 核心步骤(4步…...
Mysql数据库第四次作业
mysql> create table student(sno int primary key auto_increment,sname varchar(30) not null unique,Ssex varchar(2) check (Ssex男 or Ssex女) not null,Sage int not null,Sdept varchar(10) default计算机 not null); mysql> create table Course(Con int primar…...
使用Docker搭建MySql的主从同步+ShardingSphere搭建Mysql的读写分离
参考课程 尚硅谷ShardingSphere5实战教程(快速入门掌握核心)_哔哩哔哩_bilibili 主服务器 创建容器 docker run -d \ -p 3306:3306 \ -v /kira/mysql/master/conf:/etc/mysql/conf.d \ -v /kira/mysql/master/data:/var/lib/mysql \ -e MYSQL_ROOT…...
数据结构:数据类型与抽象数据类型
数据类型与抽象数据类型 数据类型基本数据类型构造数据类型指针类型枚举类型 抽象数据类型(ADT)抽象数据类型的组成部分常见的抽象数据类型示例 数据类型与抽象数据类型的区别实现抽象数据类型的具体方式用数组实现栈用链表实现栈 总结 数据类型 数据类…...
西方逻辑史简介
西方逻辑史研究,对形式逻辑实现现代化,对加强西方哲学史研究,对开展科学方法论的研究都有重要意义。西方逻辑史一般被划分成古代、中世纪、现代三个历史时期。本文拟对这三个时期中的七个重要逻辑学家和逻辑学派:亚里士多德、斯多…...
【论文10】复现代码tips
一、准备工作 1.创建一个虚拟环境 conda create --name drgcnn38 python=3.8.18 2.激活虚拟环境 conda activate drgcnn38 注意事项 在Pycharm中终端(terminal)显示PS而不是虚拟环境base 问题如下所示 解决方法:shell路径改成cmd.exe 重启终端显示虚拟环境 3.安装torch …...
分布式缓存获取以及设置
1. 通用代码 public SysUser getCache(String sysUserId) {String cacheKey "litgery:warehouse:" sysUserId;// 尝试从缓存中获取数据CacheData cacheData redisUtils.get(cacheKey);if (null ! cacheData) {if (Boolean.TRUE.equals(cacheData.getExist())) {re…...
SMO算法,platt论文的原始算法及优化算法
platt论文:[PDF] Sequential Minimal Optimization : A Fast Algorithm for Training Support Vector Machines | Semantic Scholar 算法优化:[PDF] Improvements to Platts SMO Algorithm for SVM Classifier Design | Semantic Scholar 包含个人plat…...
2.3 openCv -- 对矩阵执行掩码操作
在矩阵上进行掩模操作相当简单。其基本思想是根据一个掩模矩阵(也称为核)来重新计算图像中每个像素的值。这个掩模矩阵包含的值决定了邻近像素(以及当前像素本身)对新的像素值产生多少影响。从数学角度来看,我们使用指定的值来做一个加权平均。 具体而言,掩模操作通常涉…...
【Django】 js实现动态赋值、显示show隐藏hide效果
文章目录 需要达到的前端效果预览:实现步骤复制bootstrp代码(buttons)复制bootstrp代码(Alert警告框)写js测试效果 需要达到的前端效果预览: {% load static %} <!DOCTYPE html> <html lang"…...
qt--做一个拷贝文件器
一、项目要求 使用线程完善文件拷贝器的操作 主窗口不能假死主窗口进度条必须能动改写文件大小的单位(自适应) 1TB1024GB 1GB1024MB 1MB1024KB 1KB1024字节 二、所需技术 1.QFileDialog 文件对话框 QFileDialog也继承了QDialog类,直接使用静态…...
Eclipse 搭建 C/C++ 开发环境以及eclipse的使用
一、下载、安装 MinGW 1、下载: 下载地址:MinGW - Minimalist GNU for Windows - Browse Files at SourceForge.net 点击“Download Latest Version”即可 下载完成后,得到一个名为 mingw-get-setup.exe 的安装文件。双击运行,安装即可。 …...
【初阶数据结构】复杂度算法题篇
旋转数组 力扣原题 方案一 循环K次将数组所有元素向后移动⼀位(代码不通过) 时间复杂度O(n2) 空间复杂度O(1) void rotate(int* nums, int numsSize, int k) {while (k--) {int end nums[numsSize - 1];for (int i numsSize - 1; i > 0; i--) {nums[i] num…...
20240725项目的maven环境报红-重新配置maven
1.在编辑器里面打开项目,导入源码 (1)找到项目的地址C:\Users\zzz\IdeaProjects\datasys,然后右击用idea编辑器打开。 (2)idea中上菜单栏打开open,然后输入file,选择源代码文件 2.…...
若依 ruoyi poi Excel合并行的导入
本文仅针对文字相关的合并做了处理 ,图片合并及保存需要另做处理!! 目标:Excel合并行内容的导入 结果: 1. ExcelUtil.java 类,新增方法:判断是否是合并行 /*** 新增 合并行相关代码:…...
优化算法:1.遗传算法(GA)及Python实现
一、定义 遗传算法就像是在模拟“优胜劣汰”的进化过程,通过选择最优秀的个体,交配产生下一代,并引入一定的变异,逐步优化解决问题。 二、具体步骤 初始化种群(Initialization): 假设你要找到一个迷宫的最佳出口路径。…...
利用最小二乘法找圆心和半径
#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...
浅谈 React Hooks
React Hooks 是 React 16.8 引入的一组 API,用于在函数组件中使用 state 和其他 React 特性(例如生命周期方法、context 等)。Hooks 通过简洁的函数接口,解决了状态与 UI 的高度解耦,通过函数式编程范式实现更灵活 Rea…...
多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验
一、多模态商品数据接口的技术架构 (一)多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如,当用户上传一张“蓝色连衣裙”的图片时,接口可自动提取图像中的颜色(RGB值&…...
五年级数学知识边界总结思考-下册
目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解:由来、作用与意义**一、知识点核心内容****二、知识点的由来:从生活实践到数学抽象****三、知识的作用:解决实际问题的工具****四、学习的意义:培养核心素养…...
postgresql|数据库|只读用户的创建和删除(备忘)
CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...
图表类系列各种样式PPT模版分享
图标图表系列PPT模版,柱状图PPT模版,线状图PPT模版,折线图PPT模版,饼状图PPT模版,雷达图PPT模版,树状图PPT模版 图表类系列各种样式PPT模版分享:图表系列PPT模板https://pan.quark.cn/s/20d40aa…...
Python ROS2【机器人中间件框架】 简介
销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...
mac 安装homebrew (nvm 及git)
mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用: 方法一:使用 Homebrew 安装 Git(推荐) 步骤如下:打开终端(Terminal.app) 1.安装 Homebrew…...
uniapp 字符包含的相关方法
在uniapp中,如果你想检查一个字符串是否包含另一个子字符串,你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的,但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...
Kubernetes 网络模型深度解析:Pod IP 与 Service 的负载均衡机制,Service到底是什么?
Pod IP 的本质与特性 Pod IP 的定位 纯端点地址:Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址(如 10.244.1.2)无特殊名称:在 Kubernetes 中,它通常被称为 “Pod IP” 或 “容器 IP”生命周期:与 Pod …...
