一文打通前端环境搭建

目录

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  
相关推荐
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨7 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL7 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1118 小时前
css实现div被图片撑开
前端·css