一文打通前端环境搭建

目录

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  
相关推荐
excel19 小时前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端
excel19 小时前
CNN 多层设计详解:从边缘到高级特征的逐层学习
前端
西陵21 小时前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld21 小时前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
东风西巷1 天前
Balabolka:免费高效的文字转语音软件
前端·人工智能·学习·语音识别·软件需求
萌萌哒草头将军1 天前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js
半夏陌离1 天前
SQL 入门指南:排序与分页查询(ORDER BY 多字段排序、LIMIT 分页实战)
java·前端·数据库
whysqwhw1 天前
鸿蒙工程版本与设备版本不匹配
前端
gnip1 天前
http缓存
前端·javascript