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

原创 已于 2024-09-08 12:06:56 修改 · 1.5k 阅读 · 30 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vscode #node.js #vue

于 2024-09-08 11:21:39 首次发布

目录

一、实验

1.环境

2.安装Node.js

3.初始化前端项目

二、问题

1.cnpm安装报错

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

3.前端项目运行报错

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

 

 

一、实验

1.环境

（1）主机

表1 主机

系统

 软件 版本 备注
Windows11 VS Code 1.92.2  
  Node.js v18.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

最低0.47元/天 解锁文章
VSCode+LiveServer搭建Web前端开发环境
JavaWinner的专栏
02-16 2794
为避免潜在错误，如果之前已安装过NodeJS、VSCode、LiveServer的同学，请全部卸载！ ------------以下安装全部采用默认选项，建议大家也这样做------------- 〇、安装Chrome核心的浏览器并设置为系统默认浏览器 360极速、360安全、搜狗、Chrome等均可，总之Web开发不建议用IE或Edge。 一、安装NodeJS 1、下载...
【鸿蒙开发】 “极简”搭建鸿蒙开发环境（南向）
ane1279263的专栏
06-15 4542
系统环境：WIN10+VM(Ubuntu21.04） 开发工具：VSCode+DevEcoDeviceTool插件 步骤 操作 一、下载链接 VMware workstation player Ubtuntu VSCode DevEcoDeviceTool插件 Python3.7.4-3.8.x 64位版本 Node.js 二、window10环境搭建 1、安装VSCode 注意：安装时须勾选“添加到PATH(重启生.
vscode使用cnpm
qq_43039392的博客
08-04 7242
1.安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 2.使用cnpm安装报错 cnpm : 无法加载文件 C:\Users\zongxing\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?L inkID=135170 中的 about_Execution_Policies。 所在位置 行:1
告别繁琐部署！VSCodium DevOps工具链让开发到发布提速50%
最新发布
gitblog_01171的博客
09-26 367
你是否还在为代码从开发到部署的繁琐流程头疼？手动构建、打包、上传，每个环节都可能出错，耗费大量时间。本文将带你探索VSCodium中隐藏的DevOps宝藏工具链，从环境配置到一键发布，全程可视化操作，让你轻松掌握从代码提交到用户手中的全流程自动化。读完本文，你将能够：使用内置终端命令行工具加速开发、配置自动化构建脚本、利用版本管理工具追踪发布流程、解决常见部署难题。 ## 开发环境快速配置：终端...
vscode配置——前端开发
yantao19930905的博客
03-12 694
vscode配置——前端开发。
使用VS Code运行前端代码
二哈喇子！
07-06 9725
使用VS Code运行HTML文件
研发效能DevOps: Vite 使用 Vue Router
cronaldo91的博客
10-27 1348
(6) router下创建index.js （实现组件与路由映射）Vue Router默认是push，是可以回退页面的。index.js未成功实现组件与路由映射。（3）Vs Code 查看项目目录。（5）创建路由配置目录router。(2) 安装vue-router。（7）创建页面组件目录views。（8）views下创建多个组件。禁止回退，是不可以回退页面的。(2) 修改index.js。（4）main.js集成路由。点击Go to Devops。点击Go to Index。（5）修改App.vue。
自动化部署ESP32依赖库：Python+批处理实现一键配置（效率提升10倍）
因此，亟需一套**可重复、自动化、具备容错机制的部署方案**，实现“一键初始化”开发环境，提升整体研发效能。本章将引出自动化部署的必要性，并为后续技术实现铺路。 # 2. 自动化部署的核心技术基
【VSCode任务自动化进阶】：高级技巧简化重复任务
在众多工具和平台中，Visual Studio Code（VSCode）凭借其强大的可扩展性和灵活性，已成为开发者的首选代码编辑器。VSCode的任务自动化功能，使得开发者可以定义一系列预设任务，从而简化复杂的开发流程。本章将为您...
VSCode与VS2017编译器性能对决：关键因素助你提升开发效率
![VSCode与VS2017编译器性能对决：关键因素助你提升开发效率]... # 摘要 随着软件开发工具的不断进步，开发者对集成开发环境（IDE）的需
VS Code搭建前端开发环境
努力做熵减的博客
05-06 3077
在扩展中安装下列插件： １、open-in-brower:安装完成之后，重启VSCode，打开一个HTML文件，右键鼠标，弹出的菜单栏中会出现“Open Defualt Browser” 打开默认浏览器 和“ Open In Other Browsers”打开其他浏览器两个选项。 2、auto close tag：自动闭合标签。 3、auto rename tag：自动完成另一侧标签的同步修...
VSCode搭建前端开发环境
yidianyuanzhidong的博客
06-01 3419
一、首先安装vscode 官网下载jiangchenVScode下载
vscode搭建前端开发环境
千禧皓月的博客
12-12 7193
1.微软官网下载vscode 2.点击小方框，搜索下载三个插件 3.点击左下角的齿轮，点击设置，配置自动保存 4在左侧导航栏新建一个项目，在新建一个.html结尾的文件就可以编写网页了
【vscode】前端环境配置
weixin_46590928的博客
10-01 2592
打开vscode，按住Ctrl+k然后按Ctrl+o，选择打开文件夹选择刚才新建的文件夹。打开vscode，按住Ctrl+Shift+x，搜索Live Server并安装。按住Ctrl+Shift+f打开项目目录，新建文件xxx.html。Win+E打开文件资源管理器，并新建一个文件夹用于存放代码。百度搜索vscode，进入官网。
【前端】 Vscode 搭建基础开发环境
weixin_41979605的博客
07-11 9531
是否看见别人家的页面美如画，功能炫酷，效果叼叼，其实前端对于用户交互这一块还真是不错。特别是对于一些后端程序员来说，一直想学习写出亮瞎钛合金狗眼的页面（**_*）只要功夫深，肯定能入门，就让我来带你步入前端的大门吧vscode 本身就是js写的，经过测试，确实更适合前端开发，就如idea对于Java一样一样的推荐windows系统,毕竟windows才是用的人最多的(-,- )|客户说好才是真的直接使用电脑管家搜索vscode,下载安装即可(官网很慢) 默认是英文版本，我们安装中文插件。插件搜索 chine
前端开发vscode配置
贝贝的博客
02-08 1210
前端开发vscode常用插件 Auto Rename Tag 重命名一个HTML / XML标签时，自动重命名配对的HTML / XML标签 Bracket Pair Colorizer 匹配的括号用颜色标识 Live Server 实时服务器 open in browser 在浏览器中打开 Path lntellisense 路径智能感知 polacode-2020 代码截图 prettier 代码格式化 atom one dark theme || one dark pro 颜色主
(网页开发/前端)配置VsCode，让您拥有更舒适的开发环境
caterpie_771881的博客
10-31 7660
利用vscode支持的各种扩展，我们能极大优化编程体验
VSCode 配置优化指南：打造极致高效的前端开发环境
超级小狗的博客
03-06 2819
（附配置包下载链接：https://github.com/example/vscode-frontend-preset）
前端开发IDE---VSCode前端开发环境配置
热门推荐
祥哥的说
12-28 1万+
所安装的插件如下： 1、open in browser(2.0.0版本）详细内容见VSCode插件搜索。 修改默认浏览器的步骤： File>preferences>settings>点击那三个点>选择opensettings.json>找到plugin open-in-browser按照提示在右边的json文件中进行配置即可。 2、此扩展程...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值