一文打通前端环境搭建

目录

nvm管理

安装nvm 管理node

  1. 访问github地址:https://github.com/coreybutler/nvm-windows/releases
  2. 安装最新exe

配置nvm环境变量

最新版本的nvm会自动加入环境配置,无需手动配置环境变量

切换nvm国内镜像

如果不切换,安装node会很慢

切换至阿里云镜像 使用命令:

JSON 复制代码
nvm npm_mirror https://npmmirror.com/mirrors/npm/
nvm node_mirror https://npmmirror.com/mirrors/node/

安装node

  1. 查看可下载node的版本。选择LTS长期稳定维护的版本
JSON 复制代码
    nvm list available
  1. 选择v18.20.2版本下载
JSON 复制代码
      nvm install 18.20.2
  1. 查看已下载的node版本
JSON 复制代码
      nvm list
  1. 使用18.20.2版本(必须要执行该语句,否则不生效)
JSON 复制代码
      nvm use 18.20.2
  1. 确认当前node版本是否成功安装
JSON 复制代码
      node -v

npm 镜像切换

JSON 复制代码
npm config set registry http://registry.npmmirror.com

打包工具yarn

安装yarn

JSON 复制代码
npm install -g yarn

yarn切换淘宝镜像

  1. 查看当前镜像
JSON 复制代码
      yarn config get registry
  1. 切换国内淘宝镜像
JSON 复制代码
      yarn config set registry https://registry.npmmirror.com/
  1. 切回默认镜像源
JSON 复制代码
      npm config set registry https://registry.npmjs.org

安装vue脚手架

JSON 复制代码
yarn global add @vue/cli   //全局安装vue脚手架

开发工具vscode

安装(傻瓜式安装)

  1. 官网:https://code.visualstudio.com/

启动项目

  1. 添加依赖
JSON 复制代码
      yarn install
  1. 启动项目
JSON 复制代码
      yarn run serve

vue插件配置

  1. Vetur
  1. 汉化插件

关于yarm

yarm常用命令

JSON 复制代码
yarn -v  // 查看yarn 版本
yarn config list  // 查看yarn配置
yarn config get registry   // 查看当前yarn源

// 修改yarn源(此处为淘宝的源)
yarn config set registry https://registry.npm.taobao.org  

// yarn安装依赖
yarn add 包名          // 局部安装
yarn global add 包名   // 全局安装

// yarn 卸载依赖
yarn remove 包名         // 局部卸载
yarn global remove 包名  // 全局卸载(如果安装时安到了全局,那么卸载就要对应卸载全局的)

// yarn 查看全局安装过的包
yarn global list  
相关推荐
咖啡教室几秒前
前端开发中JavaScript、HTML、CSS常见避坑问题
前端·javascript·css
LaoZhangAI2 小时前
Claude MCP模型上下文协议详解:AI与外部世界交互的革命性突破【2025最新指南】
前端
LaoZhangAI2 小时前
2025最全Cursor MCP实用指南:15个高效工具彻底提升AI编程体验【实战攻略】
前端
Kagerou3 小时前
vue3基础知识(结合TypeScript)
前端
市民中心的蟋蟀3 小时前
第五章 使用Context和订阅来共享组件状态
前端·javascript·react.js
逆袭的小黄鸭3 小时前
JavaScript 闭包:强大特性背后的概念、应用与内存考量
前端·javascript·面试
carterwu3 小时前
各个大厂是怎么实现组件库和相应扩展的?基础组件、区块、页面
前端
Face3 小时前
promise 规范应用
前端
Mintopia3 小时前
Node.js 中 fs.readFile API 的使用详解
前端·javascript·node.js
Face3 小时前
事件循环
前端·javascript