前端工程化-Vue3脚手架安装

        在现代前端开发中,Vue.js已成为一个流行的框架,而Vue CLI(脚手架)则为开发者提供了一个方便的工具,用于快速创建和管理Vue项目。本文将详细介绍如何安装Vue脚手架,创建新项目以及常见问题的解决方法。

什么是Vue脚手架?

        Vue脚手架是官方提供的标准化开发工具,其主要功能是简化Vue项目的创建和配置,从而提升开发效率。它支持命令行和UI界面,能自动生成项目结构、配置第三方依赖和进行开发环境管理等。

Node.js环境安装

Node.js — 在任何地方运行 JavaScript (nodejs.org) 去官网下载,按照步骤安装,没有什么难度,我不过多赘述,因为Vue CLI依赖于它。

安装好后,验证一下是否安装成功,安装时记得勾选环境变量的配置 ……

 配置npm全局安装路径

1.以管理员身份打开cmd

2.设置全局路径

注意这个双引号里的路径就是你安装Node.js时的安装路径,每个人根据自己路径不同判断

npm config set prefix "E:\develop\NodeJs"

npm config get prefix

设置代理镜像

腾讯云镜像

npm config set registry https://mirrors.cloud.tencent.com/npm/

淘宝镜像:

npm config set registry https://registry.npm.taobao.org

华为云镜像:

npm config set registry https://mirrors.huaweicloud.com/repository/npm/

这里解释一下为什么要设置 镜像代理

  1. 网络限制:在某些网络环境(如公司、学校或特定地区),直接访问外部网站可能受到限制,导致无法下载 npm 包或其他依赖。这时,通过设置代理,可以绕过这些限制,顺利访问所需资源。
  2. 提高下载速度:由于国际带宽的限制,直接从国外的 npm 源下载包可能会非常慢。国内的代理镜像(如淘宝镜像、阿里云镜像等)通常提供更快的下载速度,能够显著提高安装效率。
  3. 避免连接超时:由于网络不稳定,直接访问外部源时可能会遇到连接超时的问题。使用国内的代理镜像可以减少这种情况的发生,从而提高成功下载的概率。
  4. 简化配置:通过设置代理镜像,可以在 npm 配置中统一管理源地址,避免在每次安装时都需要手动调整。这对于频繁使用 npm 的开发者来说,能够节省时间和精力。
  5. 安全性:在某些情况下,使用代理可以增加连接的安全性,尤其是在需要身份验证的网络环境中。通过设置代理,可以确保所有流量都经过安全通道。

安装脚手架

npm install -g @vue/cli

安装完成后验证一下

到此,脚手架安装完成……

总结

        通过以上步骤,你可以顺利安装Vue CLI和创建新的Vue项目。Vue脚手架不仅能简化开发流程,还能帮助你快速配置项目环境,提升开发效率。

上一篇:【C++】多态


下一篇:Qt-QVBoxLayout布局类控件(41)