前端笔记:vscode Vue nodejs npm

1 VS Code

终端中默认cmd

默认使用 cmd (Command Prompt), 不使用 PowerShell

解决方式: 【vscode配置】:vscode配置终端为cmd

​ 1 命令面板(Ctrl+shift+p)

​ 2 输入 Terminal:Select Default Profile 之后回车

​ 3 选择 cmd (Command Prompt) 即可

2 npm

镜像源配置

在中国使用npm时,由于网络问题,经常需要配置镜像源以提高下载速度。以下是如何配置npm镜像源的步骤:

临时使用某个镜像源:

bash 复制代码
npm install --registry=https://registry.npmmirror.com/

永久配置npm镜像源:

bash 复制代码
npm config set registry https://registry.npmmirror.com/

通过.npmrc文件配置(全局或项目级别):

在用户的根目录或项目目录下创建或编辑.npmrc文件,添加下面的内容:

bash 复制代码
registry=https://registry.npmmirror.com/

nrm镜像源管理工具

使用nrm工具管理和切换镜像源:

首先安装nrm:

bash 复制代码
npm install -g nrm

然后列出所有可用的镜像源并切换到指定的镜像源:

bash 复制代码
nrm ls            # 列出所有可用的镜像源
nrm use taobao    # 切换到淘宝镜像源

以上步骤可以帮助你配置npm使用国内镜像源,从而提高安装依赖的速度。

查看配置的镜像源

要查看当前配置的npm镜像源,你可以在命令行中运行以下命令:

bash 复制代码
npm get registry

这将输出当前配置的npm注册表地址。

如果你想查看所有的npm配置信息,可以运行:

bash 复制代码
npm config list

这将列出npm的所有配置信息,包括镜像源。

异常处理

镜像源异常

异常描述:

npm error request to https://registry.npm.taobao.org/create-vue failed, reason: certificate has expired

解决方案:

镜像源 https://registry.npm.taobao.org/ 已经废弃,

更换使用最新镜像源 https://registry.npmmirror.com/ 即可就行

更换方式 参照 镜像源配置

安装项目中所有依赖

bash 复制代码
# 切换到项目目录
cd <your-project-name>

# npm
npm i
# 或者 npm / pnpm / bun
npm install

# yarn
yarn

3 Vue

Vue 应用 创建 / 启动 / 构建

应用创建

bash 复制代码
# npm / pnpm / bun
npm create vue@latest

# yarn
# For Yarn (v1+)
$ yarn create vue

# For Yarn Modern (v2+)
$ yarn create vue@latest

# For Yarn ^v4.11
$ yarn dlx create-vue@latest

应用启动

bash 复制代码
cd <your-project-name>

# npm / pnpm / bun
npm run dev

# yarn
yarn dev

应用构建

bash 复制代码
# npm / pnpm / bun
npm run build

# yarn
yarn build

vue在VS Code 应用商店中 插件扩展

vue official

异常

env.d.ts 飘红异常处理

cmd终端中 执行命令,安装所有的依赖

ba 复制代码
npm i

4 Chrome

扩展插件安装

极简插件 网站 https://chrome.zzzmh.cn/index

搜索 vue postman 或者其余扩展

​ 1. 下载压缩包并 解压

​ 2. 打开Chrome浏览器 -> 点击右上角三个点 -> 扩展程序 -> 管理扩展程序

​ 3. '管理扩展程序' 页面的右上角 '开发者模式' 开关打开

​ 4. 极简插件下载到的是压缩包,必须先解压缩!解压后有2个文件。一个安装文件,一个说明书

​ 5. 其中名字长的 xxx_chrome.zzzmh.cn.crx 文件就是安装包,鼠标长按拖住,拖到 '管理扩展程序' 页面,松开鼠标

​ 6. 看到弹出框,点添加扩展程序,安装成功!

相关推荐
用户214118326360211 小时前
首发!即梦 4.0 接口开发全攻略:AI 辅助零代码实现,开源 + Docker 部署,小白也能上手
前端
gnip13 小时前
链式调用和延迟执行
前端·javascript
SoaringHeart13 小时前
Flutter组件封装:页面点击事件拦截
前端·flutter
杨天天.13 小时前
小程序原生实现音频播放器,下一首上一首切换,拖动进度条等功能
前端·javascript·小程序·音视频
Dragon Wu13 小时前
React state在setInterval里未获取最新值的问题
前端·javascript·react.js·前端框架
Jinuss13 小时前
Vue3源码reactivity响应式篇之watch实现
前端·vue3
YU大宗师13 小时前
React面试题
前端·javascript·react.js
木兮xg13 小时前
react基础篇
前端·react.js·前端框架
ssshooter13 小时前
你知道怎么用 pnpm 临时给某个库打补丁吗?
前端·面试·npm
IT利刃出鞘14 小时前
HTML--最简的二级菜单页面
前端·html