一文打通前端环境搭建

目录

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  
相关推荐
北海-cherish1 小时前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
2501_915909062 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
white-persist3 小时前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
新中地GIS开发老师4 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang4 小时前
前端性能优化
前端·javascript·vue.js·性能优化
Rysxt_4 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含4 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
大鱼前端4 小时前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack·turbopack
你的人类朋友4 小时前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端