一文打通前端环境搭建

news2024/9/22 21:23:54

目录

  • nvm管理
    • 安装nvm 管理node
    • 配置nvm环境变量
    • 切换nvm国内镜像
  • 安装node
  • npm 镜像切换
  • 打包工具yarn
    • 安装yarn
    • yarn切换淘宝镜像
  • 安装vue脚手架
  • 开发工具vscode
    • 安装(傻瓜式安装)
  • 启动项目
    • vue插件配置
  • 关于yarm
    • yarm常用命令

nvm管理

安装nvm 管理node

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

配置nvm环境变量

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

切换nvm国内镜像

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

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

nvm npm_mirror https://npmmirror.com/mirrors/npm/
nvm node_mirror https://npmmirror.com/mirrors/node/

安装node

  1. 查看可下载node的版本。选择LTS长期稳定维护的版本
    nvm list available

  1. 选择v18.20.2版本下载
      nvm install 18.20.2
  1. 查看已下载的node版本
      nvm list
  1. 使用18.20.2版本(必须要执行该语句,否则不生效)
      nvm use 18.20.2
  1. 确认当前node版本是否成功安装
      node -v

npm 镜像切换

npm config set registry http://registry.npmmirror.com

打包工具yarn

安装yarn

npm install -g yarn

yarn切换淘宝镜像

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

安装vue脚手架

yarn global add @vue/cli   //全局安装vue脚手架

开发工具vscode

安装(傻瓜式安装)

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

启动项目

  1. 添加依赖
      yarn install
  1. 启动项目
      yarn run serve

vue插件配置

  1. Vetur

  1. 汉化插件

关于yarm

yarm常用命令

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  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2090892.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Electron 项目实战 02:打包和自动更新

技术选型 electron-forgeelectron-builder electron-forge 是Electron 官方文档介绍的,打包和发布都包含了,但是包含的坑也非常多。electron-builder下载量和集成打包非常顺利,本教程也是采用electron-buid来介绍打包。大家在技术选型的时候…

火绒补充| 截止目前修改时间| 本文已上全站总榜33

目录 为什补充? 用户界面优化: 性能提升: 启发式检测和行为分析: 恶意网址拦截: 系统修复功能: 网络安全防护: 云查杀引擎: 漏洞修复和补丁管理: 隐私保护&…

算法的学习笔记—把数组排成最小的数(牛客JZ45)

😀前言 在编程面试中,经常会遇到需要将问题转化为排序问题的题目。这些问题看似复杂,但只要抓住核心思路,便能迅速解决。今天我们就来看一道这样的题目:如何将一个非负整数数组拼接成最小的数字。 🏠个人主…

Cracking the Safe

原题链接:https://leetcode.cn/problems/cracking-the-safe/description/ 题目要求的是,某个时刻能够打开保险箱的任一最短密码序列,需要包含所有密码子串。 答案应当是一个字符串,任意长度为n的子串的都是一种密码方案。 对于有n…

探索前沿科技:在本地系统上安装和使用Style TTS2进行高质量语音合成

我们正处于一个令人激动的时代,有如此多的选择,不仅在大型语言模型方面,还有现在的文本到语音(TTS)模型。在这篇文章中,我将向您展示如何在本地系统上轻松安装这个非常出色的模型——Style TTS2&#xff0c…

联蔚盘云亮相CDIE消费品行业峰会

8月28日,由华昂集团主办,专注于消费品行业的2024CDIE行业峰会在广州盛大开幕。联蔚数科携子品牌联蔚盘云亮相本次大会。本次峰会汇聚了众多企业高管,行业领域专家,围绕AI技术前沿、数智营销新策略、会员运营以及品牌增量路径等话题…

2024如何开始进入美业?美业创业步骤分享|博弈美业系统管理系统源码

进入美业可以是一个令人兴奋且具有挑战性的决定。以下是一些步骤,希望可以帮助你在美业建立自己的职业生涯: 1.确定你的兴趣和专长: 首先要考虑你对美业的兴趣和擅长的领域,比如化妆、美发、美甲、美容护理等。确定自己的兴趣和优…

随笔八、LED-RGB灯程控测试

目录 1. 泰山派环境 2. 编程控制 1. 泰山派环境 泰山派开发板上有一颗RGB三色LED灯,烧写官方镜像上电后开始闪烁,表示系统已经正常运行。可以在设备树里修改初始状态。 查看电路图知道,RGB是通过GPIO1的B0~B2引脚控制的,低电平…

【吊打面试官系列-Redis面试题】Memcache 与 Redis 的区别都有哪些?

大家好,我是锋哥。今天分享关于 【Memcache 与 Redis 的区别都有哪些?】面试题,希望对大家有帮助; Memcache 与 Redis 的区别都有哪些? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 1、存储方式 Memecach…

Java笔试面试题AI答之面向对象(9)

文章目录 49. 简述Java继承时,类的执行顺序是什么?一、类的静态成员初始化顺序二、对象的初始化顺序三、总结 50. 举例说明什么情况下会更倾向于使用抽象类而不是接口?1. 当需要定义和实现部分通用行为时2. 当需要访问修饰符或方法修饰符时3.…

07.整合Pinia

1. 前言 Pinia 是 Vue 的专属状态管理库,它允许你跨组件或页面共享状态。更加契合 VUE3 组合式 API 和 TS 类型支持。想进一步了解,参考官网:https://pinia.vuejs.org/ 如果是使用官方脚手架搭建的工程,选择了 pinia 将会自动帮我…

Git之2.5版本重要特性及用法实例(五十七)

简介: CSDN博客专家、《Android系统多媒体进阶实战》一书作者. 新书发布:《Android系统多媒体进阶实战》🚀 优质专栏: Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏: 多媒体系统工程师系列…

Qt应用的高分辨率适配

背景 工作中需要面对触控大屏的4K分辨率场景,同时也有越来越多人开始使用高分屏,原来多基于1080p分辨率开发的Qt程序无法很好适配更高的分辨率。 没有特意针对高分辨率场景做适配时,Qt应用的表现通常有两种情况: 分辨率高的情况…

六西格玛管理培训公司 谈 故障树分析(Fault Tree Analysis)

故障树分析(Fault Tree Analysis, FTA):一种自顶向下的演绎故障分析工具,其中使用布尔逻辑将一系列较低级别的事件组合起来,用以分析系统的非期望状态。那么,如何使用故障树分析(FTA&#xff09…

集成电路学习:什么是CRC循环冗余校验

一、CRC:循环冗余校验 CRC(Cyclic Redundancy Check),即循环冗余校验,是一种根据网络数据包或计算机文件等数据产生简短固定位数校验码的快速算法。它主要用于检测或校验数据传输或保存后可能出现的错误。CRC利用除法及…

[Labview] 表格改值后单元格编辑功能,更改颜色、字体、颜色等

效果如下所示: 例子中演示了单元格变色,具体需要什么修改,在相同的位置进行操作即可。 检测到[鼠标释放]事件,则记录被选中的单元格。 使用[鼠标按下]事件也可以,不过我个人测试下来,[按下]的判断精准度不…

智能候诊系统 项目源码25287

摘 要 科技进步的飞速发展引起人们日常生活的巨大变化,电子信息技术的飞速发展使得电子信息技术的各个领域的应用水平得到普及和应用。信息时代的到来已成为不可阻挡的时尚潮流,人类发展的历史正进入一个新时代。在现实运用中,应用软件的工作…

万亿低空经济:无人机飞手考证正当时

随着低空经济的不断发展和国家政策的持续推动,无人机行业正迎来前所未有的发展机遇。低空经济作为一种新兴的综合性经济形态,依托低空空域,通过各类有人驾驶和无人驾驶航空器的低空飞行活动,辐射带动相关领域融合发展。这一领域涉…

视频结构化从入门到精通——GPU主要硬件平台介绍

视频结构化主要硬件平台 1. 深度学习中“硬”和“软”的概念 在深度学习中,“硬”和“软”通常用于描述不同的处理方法或策略,尤其是在解码、编码、推理等任务中。它们反映了算法在处理信息时的确定性和灵活性。 软(Soft) 处理…

电子检测报告如何盖骑缝章?

电子检测报告如何盖骑缝章?使用e章宝(易友EU3000智能盖章软件)给电子检测报告盖骑缝章,可以遵循以下步骤进行: 一、准备工作 确保e章宝软件已安装: 在计算机上安装e章宝(易友EU3000智能盖章软件…