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

已于 2024-09-08 12:06:56 修改
阅读量1.2k 收藏 30
点赞数 12
分类专栏： 研发效能DevOps 文章标签： vscode node.js vue
于 2024-09-08 11:21:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cronaldo91/article/details/142018251
版权

目录

一、实验

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

 

cronaldo91
关注
专栏目录
devOps：DevOps项目
02-16
具有粘性的ELB示例 该示例将启动Web服务器，安装nginx，并创建一个ELB。 它还为ELB和EC2实例创建安全组。 要运行，请按照所述配置您的AWS提供程序 本示例假定您已经创建了密钥对。 如果您没有密钥，请访问创建密钥。 使用以下命令运行此示例： terraform apply -var 'key_name=YOUR_KEY_NAME' 等待几分钟，等待EC2用户数据安装nginx，然后从浏览器的输出中键入ELB DNS名称，然后查看nginx欢迎页面
doodle-devops:ML DevOps示例项目
04-16
这是一个ML DevOps演示项目，它使用多服务方法进行模型训练，服务和用户交互。 该演示的灵感来自并使用进行了模型预训练。 关键的挑战是：您可以画猫，狗或老鼠，以便AI可以识别它吗？ 多服务“ dockerized” ML...
【敏捷研发系列】前端DevOps流水线实践
京东科技开发者
12-12 946
DevOps 流水线聚焦于将项目的需求、开发、测试、部署和运营统一起来，基于整个组织的协作和应用架构的优化来实现敏捷开发、持续交付和应用运营的无缝集成。
前端工程化到底是啥？可不止Webpack哦~
2401_83384536的博客
06-29 517
大家好，我是考拉🐨。什么是前端工程化，是我去年困扰我很久的一个问题，打开搜索引擎一搜，能找到四个关键字，模块化、组件化、规范化、自动化，但一看这几个字，更加迷茫了，没说解决了什么问题。大部分搜出来的都是 webpack、babel、eslint、gulp 等编译相关的配置，对于 2023年 来说上面的回答着实有点管中窥豹了大家也可以想想和评论区交流下，你觉得什么是前端工程化，最好有具体的实践。
低代码平台边界探索：多技术栈支持及高低代码混合开发
趣谈前端
04-10 2173
大厂技术坚持周更精选好文作者 | 莫春辉编辑 | 黎安来源|https://mp.weixin.qq.com/s/5h2K8ektFD1ZNilCxrRbXA本文整理自华为云主任工程师莫春辉在 GMTC 全球大前端技术大会（深圳站）2021 的演讲《多技术栈及高低代码混合开发——华为云低代码平台架构探讨》。当前，华为云部门内部的前端技术栈并不统一，比如华为云...
【腾讯云 Cloud Studio 实战训练营】- 云IDE Cloud Studio如何在项目中增效的实践之路
热门推荐
m0_68635815的博客
08-02 2万+
IDE是集成了环境获取、代码编写、提示、编译、运行预览、分析、调试、命令行执行、版本控制、部署上线等全链路软件开发功能。HBuilderX平时开发uniapp时，需要打包APP（IOS、安卓）Vscode平时开发前端代码比较节省内存Cloud Studio 为开发者提供了非常好的云端集成开发环境，让开发者可以通过在线的形式进行协作开发，管理自己的代码库，并且编辑和调试代码。
带你走进云原生技术：云原生开放运维体系探索和实践
金融级分布式架构
05-18 767
本文是云原生开放协同技术探索与实践一阶段的总结和综述。蚂蚁基础技术在过去3年多以来持续、深入推进全面的云原生化技术演进，我们将在线、离线计算资源装进了一台计算机，将服务体系通过 mesh ...
软件工程-案例分析
mashirolingy的博客
03-05 2242
BUAA-2023Agile SE-案例分析
【腾讯云 Cloud Studio 实战训练营】 - 云IDE编程之旅化繁为简
wanmeijuhao的博客
07-28 2万+
Cloud Studio 是基于“浏览器”的集成式开发环境（IDE），为开发者提供稳定的云端工作站，在使用 Cloud Studio 时无需安装，打开浏览器即可快速启动和开发项目，底层资源可以自动弹性扩缩，极大地节省成本，低代码开发省时又省力。● 基于 Web 端的代码编辑器，包含代码高亮、自动补全、Git 集成、终端等 IDE 的基础功能，同时支持实时调试、插件扩展等，提升开发、编译与部署工作效率;● 支持远程访问云服务器，为腾讯云 SCF 行业用户提供开发-测试-部署完整闭环的云原生开发体验;
纷享销客新一代企业级PaaS平台介绍
fxiaoke_com的博客
06-06 1045
纷享销客致力于打造CRM领域下的连接型PaaS平台，可以让企业以极低的成本，快速构建业务应用。纷享销客PaaS平台主要由业务定制平台(aPaaS)、智能分析平台(dPaaS)、集成对接平台(iPaaS)、业务互联平台(cPaaS)以及数据智能平台(AI PaaS)五部分构成。企业借助纷享销客PaaS平台，不仅能够以零代码、低代码、高代码等多种方式进行个性化业务定制，而且能够深入业务场景进行数据分析，打通数据孤岛，实现跨系统业务闭环管理。
devops：DevOps中的个人项目
02-17
在这个"devops：DevOps中的个人项目"中，我们很可能会看到一个关于如何独立或小团队实践DevOps理念的具体示例。 在个人项目中应用DevOps，通常包括以下几个核心方面： 1. **版本控制**：使用Git这样的分布式版本...
aws-devops:使用AWS进行开发的项目
03-25
aws-devops 使用AWS进行开发的项目 AWS Cloud Formation示例模板 CDK 无服务器 扩展无服务器组件的云形成，例如-Lambda，S3，DymanoDB，SQS，SNS等 样本： :
devops:与Devops实践相关的项目
04-13
"与DevOps实践相关的项目"这一标题暗示我们将深入探讨如何在实际操作中应用DevOps理念。 在DevOps实践中，我们通常关注以下几个核心领域： 1. **持续集成（Continuous Integration, CI）**：开发人员频繁地将代码...
一文梳理我们是如何打造出国内领先的 AI 编程助手「通义灵码」
阿里巴巴中间件
07-11 197
前几天，Kubernetes 迎来了它的十周岁生日。作为架构师都深知，在过去的十年中，微服务和容器技术迅猛发展推动了整个行业应用架构的重大升级。从早期的企业级应用架构，到后来的互联网架构、微服务架构，再到如今逐渐成为主流的云上 Serverless 架构，各行各业的企业和开发者无不受益于云原生技术发展运用所带来的红利。在软件研发的生命周期中，设计、开发、交付和运维都是不可或缺的环节。云原生技术的出...
vscode 插件推荐
weixin_45881248的博客
10-01 385
这是一个适配 Vue3 Api 的 snippets 插件。如: 输入 clg 快速 console.log，方便调试。- Iconify 图标插件。- 工具类 CSS 框架。- unocss 提示插件。- .env 文件 高亮。
vscode 内网不联网如何导入vscode插件
weixin_44762420的博客
09-30 490
vscode 内网不联网如何导入vscode插件
VS与VSCode的区别
最新发布
weixin_43580791的博客
10-02 2925
Visual Studio（简称VS）和 Visual Studio Code（简称VS Code）都是由微软开发的编程工具，但它们在设计理念和用途上有很大的区别。Visual Studio：虽然支持扩展，但由于功能已经较为完善，通常不需要太多额外插件。即使如此，扩展的种类和数量相对 VS Code 少一些。VS Code：VS Code 的强大之处在于其插件市场，几乎可以找到适用于任何需求的插件，用户可以根据自己的喜好自定义编辑器，从语法高亮到调试工具，甚至是界面主题都可以调整。特点类型。
重置linux后vscode无法再次使用ssh连接
安的博客
10-02 395
原因：vscode远程连接后会在C:\Users{{你的用户名}}.ssh下的known_hosts和known_hosts.old。再次连接时如果密钥无法匹配会导致拒绝连接。解决：对C:\Users{{你的用户名}}.ssh下的known_hosts和known_hosts.old，进行编辑，删除已经失效的公钥。然后再次使用vscode连接即可。如果你使用过vscode ssh远程连接了一个Linux系统，但该系统被重置了，并且关键配置没有改变。再次使用vscode连接时，vscode可能无法连接。
DevOps实践：如何在项目中进行有效测试
"项目实施DevOps时，我们是如何做测试的" 在DevOps模式下，测试面临着诸多新的挑战和变革。传统的测试模式往往在开发完成后进行，而在DevOps环境中，测试成为了一个持续的过程，贯穿整个软件开发生命周期。以下是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值