一文打通前端环境搭建

目录

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  
相关推荐
烛阴21 小时前
循环背后的魔法:Lua 迭代器深度解析
前端·lua
元拓数智21 小时前
现代前端状态管理深度剖析:从单一数据源到分布式状态
前端·1024程序员节
mapbar_front21 小时前
Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
天一生水water21 小时前
three.js加载三维GLB文件,查看三维模型
前端·1024程序员节
无风听海1 天前
HarmonyOS之启动应用内的UIAbility组件
前端·华为·harmonyos
冰夏之夜影1 天前
【科普】Edge出问题后如何恢复出厂设置
前端·edge
葱头的故事1 天前
vant van-uploader上传file文件;回显时使用imageId拼接路径
前端·1024程序员节
Mintopia1 天前
🇨🇳 Next.js 在国内场景下的使用分析与实践指南
前端·后端·全栈
Mintopia1 天前
深度伪造检测技术在 WebAIGC 场景中的应用现状
前端·javascript·aigc
BUG_Jia1 天前
如何用 HTML 生成 PC 端软件
前端·javascript·html·桌面应用·1024程序员节