研发效能DevOps: VSCode进行前端项目初始配置

目录

一、实验

1.环境

2.安装Node.js

3.初始化前端项目

二、问题

1.cnpm安装报错

2.如何删除cnpm与指定cnpm版本

3.前端项目运行报错

4.node版本与npm版本对应关系如何查询


 

 

一、实验

1.环境

(1)主机

表1 主机

系统

软件版本备注
Windows11VS Code1.92.2 
 Node.jsv18.20.4(LTS) 

 

运行(输入cmd)

bb3a3a38004c40f2bbe67919cce22e05.png

查看VS Code版本

Code --version

6ccfefdd95ce4e49a534a5f36119e21e.png

 

 

2.安装Node.js

(1)查看

https://nodejs.org/zh-cn/download/prebuilt-installer

deaf715ffd33454cadeb65e86d6ca1b0.png

(2)选择一个LTS版本

这里选择v18.20.4(LTS)

1843fcfdbbb441ec940050f4968483f0.png

下载完成:

0f4ee2ddd08745fdaf360e9da67b74f0.png

(3)安装

下一步Next

c594af1a8f9b440781e4716182fb7d29.png

选择安装目录

59fc7440bbe647d78881923bcf6cb7e5.png

下一步Next

233f84eea49d45e5a8a8b2cfc45435a4.png

下一步Next

8549e646e3da4401b51a24270b74b197.png

安装Install

984dd54678204337b0032daee8091472.png

安装中

5fd7ce657db3483393fe3e49615c4baa.png

完成

f684dcbd2c744ad19ff43e4884295c77.png

(4)  运行(输入cmd)

WIN +  R 快捷键,输入cmd

bb3a3a38004c40f2bbe67919cce22e05.png

(5) 验证版本

node -v

87de6fb85c2d465592c1d9bf92f6903d.png

npm -v

e2bc65daa7634b05ab83d20f2e7f53ca.png

 

3.初始化前端项目

(1) Windows安装cnpm (需要设置好指定镜像)

npm install cnpm -g

3b153f7a0e984d2caabe3bacd900d1a8.png

(2)查看cnpm版本

cnpm -v

d2dc1ec958ad45289ca9c2141440d554.png

(3)初始化安装vue

cnpm init vue@latest

默认依次按回车键

90ffff672a264af9bdcffda398427b6c.png

(4)安装依赖

切换目录

cd vue-project

c3ad51fce967457584d14261b2d9b33f.png

这里切换cnpm安装依赖

cnpm install

114ca17016914ccaabc46cb47eaf22cd.png

(5)运行

npm run dev

a2cf4274c4e84ee9ab28df2bbfb71ba5.png

弹出界面:

efeead81889d49838d431853b9b7204f.png

可以访问到Vue

http://localhost:5173/

d29ea21648514fd0932a23c98b160f44.png

(6)退出

CTRL + C 结束

0f487b1ab5c24e3d91e69c4272ca89e8.png

输入Y

f23cf1681ec44fa68e7c1bdc1515faf3.png

(7)返回桌面

cd ..
cd Desktop

8556e002714c415a880f33f3c83257e8.png

(8)安装vite

cnpm create vite@latest

输入y,然后选择vue

c5ce98cf19bd497d9fc6c12614a85056.png

接下来选择JavaScript

9615492690524a4a84f9efed1fea35d1.png

完成

7898edf5b26f48528f023b210383c9c7.png

(9)安装依赖

切换目录

cd vite-project

 

307875f4b9b64bb6a4604474d25b5737.png

这里切换cnpm安装依赖

cnpm install

 

13922e3a5cb64a55a251950145ed1482.png

(10)运行

npm run dev

 

b368af5f7da549fa9de0d600eb34ee27.png

弹出界面:

b372180ff0604ad5878b22a09246ed8e.png

 

可以访问到Vite + Vue

http://localhost:5173/

47403110a26d45848f25a2e64ad85a83.png

 (11)退出

CTRL + C 结束

0f487b1ab5c24e3d91e69c4272ca89e8.png

输入Y

f23cf1681ec44fa68e7c1bdc1515faf3.png

(12) 桌面右键使用VSCode打开

vite-project 

99278d32a1c14a0d88c2bd50c017749a.png

打开

529f45bfe4694a58996fc84d8f06d330.png

(13)VScode查看

fa8911fcfa0b4283a5d9f3a0122ba8c8.png

(14)VSCode安装vue插件

搜索vue

b4e5e3e9f9b344d0b36f9a80199ba9f1.png

安装

fc420b3bc267468a9576b408648120a3.png

(15)   VSCode安装html插件

搜索html

8f79e82aecd842df8df812bcfeb1084c.png

安装

f8e1118c159344249e981bfd087e4656.png

(16)   VSCode安装javascript插件

搜索javascript

c3939f51054c448896da85fcfcf8f1bc.png

安装

4a2c3258a30b4ffa890e72940cb99622.png

(17)修改主页

点击index.html

f6dd510a9d49489b9e556fd5e54515fc.png

查看

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

b8cea17220ba4b93a771ad5e0b011fc2.png

修改title

 <title>Start 前端项目</title>

d89faae5882a4b7a8f6ef0b10d89fcd5.png

(18) VSCode终端进入目录

运行

npm run dev

12d6d7d973f6435ab9891a8330b640c3.png

按住CTRL键点击地址

http://localhost:5173/

title标题显示已更新

586dfc7903c94c349460bbe3654c85dd.png

 (19)退出

CTRL + C 结束,输入Y

d6649c85547843bd8ac35a7be492ce05.png

 

 

二、问题

1.cnpm安装报错

(1)报错

npm error code ETIMEDOUT
npm error syscall connect
npm error errno ETIMEDOUT
npm error network request to https://registry.npmjs.org/cnpm failed, reason: connect ETIMEDOUT 2606:4700::6810:1a22:443
npm error network This is a problem related to network connectivity.
npm error network In most cases you are behind a proxy or have bad network settings.
npm error network
npm error network If you are behind a proxy, please make sure that the
npm error network 'proxy' config is set properly.  See: 'npm help config'

ec3129a19e8441089407eb6dbf2479c2.png

(2)原因分析

需要设置镜像

(3)解决方法

查阅

https://developer.aliyun.com/mirror/NPM?spm=a2c6h.13651102.0.0.30da1b119HVBFE

设置镜像

1)旧
npm config set registry https://registry.npm.taobao.org 

2)新
npm config set registry https://registry.npmmirror.com

9c4bc05592a342adbb6de6819c341f6e.png

查看镜像使用状态

 npm config get registry

831713b46765495694e961e0700cb158.png

成功:

4536ea2e853f40538422c6828571798c.png


2.如何删除cnpm与指定cnpm版本

(1)命令

npm uninstall cnpm -g

npm install cnpm@6 -g

 

3.前端项目运行报错

(1)报错

npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。
所在位置 行:1 字符: 1
+ npm run dev
+ ~~~
    + CategoryInfo          : ObjectNotFound: (npm:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException

58df9747dd974d40a57bac39bab86be8.png

(2)原因分析

系统环境变量已存在

bd1244396126449a9bd5aaf3a045e720.png

需要其他授权

 

(3)解决方法

方法一:

以管理员身份运行(推荐)
右击vscode,选择“以管理员身份运行”,即可解决问题。

60cf26f53d3043ed80189d9c851d0d13.png

方法二:

用户变量下,新建用户变量。变量值写node.js的安装路径即可

d5cb699de3a249e9be0fc2155079b3ed.png

npm的全局模块的存放路径以及cache的路径及增加环境变量

在node.js下建立node_global和node_cahce文件夹

b04c3594af8e4f338e010abb4f1a29f4.png

cmd窗口输入:

1)设置了全局变量
例如:npm config set prefix “创建文件的地址”
npm config set prefix D:\nodejs\node_global

2)设置了缓存
例如:npm config set cache “创建文件的地址”
npm config set cache D:\nodejs\node_cahce

d14b670e3b5c460c9d4e069bedf463da.png

新增系统Path变量

f1b9243eb9c342be9e288d7ef8887ade.png

如果环境变量配好的话,仍然报错,那就以管理员的身份启动vscode,然后再次尝试。

 

 

4.node版本与npm版本对应关系如何查询

(1)查询

https://nodejs.org/zh-cn/about/previous-releases

(2)发布计划

5a365d73fa77421987d7b85109a0b415.png

(3)对应关系

0c809c27c272494e895e108b35beb853.png

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/873619.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【vscode】vscode paste image插件设置

本文首发于 ❄️慕雪的寒舍 vscode编辑md文件的时候&#xff0c;如果想插入图片&#xff0c;自带的粘贴只会粘贴到当前目录下&#xff0c;也没有文件重命名&#xff0c;很不友好。 在扩展商店里面有mushan的Paste Image插件&#xff0c;相比自带的&#xff0c;更加友好一点。但…

3、Hadoop部署

1、 Hadoop部署 1&#xff09;集群部署规划 注意&#xff1a;NameNode和SecondaryNameNode不要安装在同一台服务器 注意&#xff1a;ResourceManager也很消耗内存&#xff0c;不要和NameNode、SecondaryNameNode配置在同一台机器上。 hadoop102 hadoop103 hadoop104 HDFS…

项目9-网页聊天室9(测试报告)

1.项目背景 本项目采用 SSM框架结合 Websocket 技术构建。用户通过简单的注册和登录即可进入聊天室&#xff0c;与其他在线用户实时交 流。系统支持文字消息的快速发送和接收、消息实时推送&#xff0c;确保交流的及时性和流畅性。SSM 框架为项目提供了稳定的架构和高效的 数据…

用眼过度,眼睛干涩、疲劳?快试试中医眼灸,缓解你的眼睛不舒服~

长期用眼过度&#xff0c;你是否有这样的感觉&#xff1a; 看一会电脑&#xff0c;眼睛又干又涩&#xff0c;非常疲惫&#xff1b; 用眼过度&#xff0c;不仅眼睛累&#xff0c;近视度数也在增加&#xff1b; 不注重保护眼睛&#xff0c;眼纹、眼袋、黑眼圈全来了。 眼睛不舒…

机器学习之 PCA降维

1.PCA 降维简介 主成分分析&#xff08;Principal Component Analysis, PCA&#xff09;是一种统计方法&#xff0c;用于在数据集中寻找一组线性组合的特征&#xff0c;这些特征被称为主成分。PCA 的目标是通过变换原始特征空间到新的特征空间&#xff0c;从而减少数据的维度&…

RESTful 还是 JSON-RPC

前言 RESTful 比较简单地说就是&#xff0c;大家请求一样的url&#xff08;GET方法有一个例外&#xff0c;url中带了一个id&#xff09;&#xff0c;通过不同的请求方法&#xff0c;分别进行不同的操作&#xff08;CRUD&#xff09;。 JSON-RPC JSON-RPC是一个无状态且轻量级…

WPF-快速构建统计表、图表并认识相关框架

一、使用ScottPlot.Wpf 官网地址&#xff1a;https://scottplot.net/quickstart/wpf/ 1、添加NuGet包&#xff1a;ScottPlot.Wpf 2、XAML映射命名空间&#xff1a; xmlns:ScottPlot"clr-namespace:ScottPlot.WPF;assemblyScottPlot.WPF" 3、简单示例&#xff1a;…

zhidianyun01/基于 ThinkPHP+Mysql 的智慧园区+智慧园区管理系统+园区物业管理系统+园区物业管理系统源码

园区物业管理系统园区管理系统园区管理园区物业物业管理系统园区物业管理系统源码 软件架构 ThinkPHPMysql 源码合作 提供完整源代码 软件界面展示

AndroidStudio清除重置Http Proxy代理的方式

问题背景 在国内做代码开发的都知道&#xff0c;在国际互联网我们存在看不见的墙&#xff0c;导致无法访问一些代码库和资源&#xff0c;所以在使用开发工具拉取第三方库的时候总会遇到无法连接或者连接超时的情况&#xff0c;所以就会使用一些安全的网络代理工具&#xff0c;辅…

消息队列 MQ 性能大揭秘

RabbitMQ 以下是rabbitmq官方针对RabbitMQ 3.12的性能测试报告&#xff0c;从报告中可以看到他测试的吞吐量是保持在万级的&#xff0c;延迟时间平均在25毫秒左右&#xff0c;最小延时可以达到微秒级。 另外图中还可以看到在低吞吐量的情况下rabbitmq的延迟速度非常的快&…

【C/C++】“秒懂”学C/C++不可错过的“经典编程题” — 日期类的经典运用 (含题链接)

“秒懂”学C/C不可错过的“经典编程题” — 日期类的经典运用 (含题链接&#xff09; 1. 计算日期到天数转换(1). 解题思路&#xff1a;(2). 代码实现&#xff1a; 2. 打印日期(1). 解题思路&#xff1a;(2). 代码实现&#xff1a; 3. 日期累加(1). 解题思路&#xff1a;(2). 代…

欧拉下搭建第三方软件仓库—docker

1.创建新的文件内容 切换目录到etc底下的yum.repos.d目录&#xff0c;创建docker-ce.repo文件 [rootlocalhost yum.repos.d]# cd /etc/yum.repos.d/ [rootlocalhost yum.repos.d]# vim docker-ce.repo 编辑文件,使用阿里源镜像源&#xff0c;镜像源在编辑中需要单独复制 h…

LabVIEW重构其他语言开发的旧系统

在面对一个运行已久、代码不清晰的项目时&#xff0c;如果该项目涉及复杂的通讯协议&#xff08;如串口和488通讯&#xff09;&#xff0c;重新开发并优化成LabVIEW版本可以极大提升系统的易用性和维护性。为了确保通讯协议的顺利解析和移植&#xff0c;借助专业工具分析现有通…

LLM指令微调实践与分析

重磅推荐专栏: 《大模型AIGC》 《课程大纲》 《知识星球》 本专栏致力于探索和讨论当今最前沿的技术趋势和应用领域,包括但不限于ChatGPT和Stable Diffusion等。我们将深入研究大型模型的开发和应用,以及与之相关的人工智能生成内容(AIGC)技术。通过深入的技术解析和实践经…

为elementui的el-date-picker时间选择器添加快捷选项

1、效果图 2、实现方法 直接在elementui的时间选择器上修改&#xff0c;添加shorcuts选项&#xff0c;但是样式要自己修改。 有几个注意点&#xff1a; 1&#xff09;如图我是选中后有显示背景颜色的&#xff0c;也就意味着要给选中的选项添加类名&#xff0c;elementui没有…

【Python机器学习】核心数、进程、线程、超线程、L1、L2、L3级缓存

如何知道自己电脑的CPU是几核的,打开任务管理器(同时按下:Esc键、SHIFT键、CTRL键) 然后,点击任务管理器左上角的性能选项,观察右下角中的内核:后面的数字,就是你CPU的核心数,下图中我的是16个核心的。 需要注意的是,下面的逻辑处理器:32 表示支持 32 线程(即超线…

2024国赛数学建模C题完整论文:农作物的种植策略

农作物种植策略优化的数学建模研究&#xff08;完整论文&#xff0c;持续更新&#xff0c;大家持续关注&#xff0c;更新见文末名片 &#xff09; 摘要 在本文中&#xff0c;建立了基于整数规划、动态规划、马尔科夫决策过程、不确定性建模、多目标优化、相关性分析、蒙特卡洛…

数据库MySQL零基础-下【详细】

目录 六、事务/视图/触发器/存储过程 1、事务的理解 &#xff08;1&#xff09;事务的理解 &#xff08;2&#xff09;事务的特性 2、事务的应用 &#xff08;1&#xff09;事务的开启与提交 # 语法 # 示例 &#xff08;2&#xff09;开启autocommit&#xff08;临时生…

01* 到底是不是太胖了?

题目&#xff1a; 代码&#xff1a; #include <iostream> using namespace std;#include<stdlib.h> #include<stdio.h>int main() {int n;scanf("%d",&n);for(int i0;i<n;i){int H;scanf("%d",&H);float W;scanf("%f&q…

【信创】Linux终端禁用USB存储 _ 统信 _ 麒麟 _ 方德

原文链接&#xff1a;【信创】Linux终端禁用USB存储 | 统信 | 麒麟 | 方德 Hello&#xff0c;大家好啊&#xff01;今天给大家带来一篇关于在Linux终端下禁用USB存储设备的文章。禁用USB存储设备可以提高系统的安全性&#xff0c;防止未经授权的人员将数据拷贝到外部存储设备或…