VUE CLI - 使用VUE脚手架创建前端项目工程

news2025/7/19 16:50:08

前言

        前端从这里开始,本文将介绍如何使用VUE脚手架创建前端工程项目

1.预准备(编辑器和管理器)

  • 编辑器:推荐使用Vscode,WebStorm,或者Hbuilder(适合刚开始练手使用),个人感觉上面这些编辑器都比较方便~看个人习惯吧,我使用的是WebStorm(需要破解)。
  • Node.JS:Vue 脚手架是基于 Node.js 的环境来运行的,它需要 Node.js 提供的运行时环境和包管理工具 npm 来进行项目的创建、依赖安装等操作。下载地址:Node.js 中文网
  • 包管理工具npm:随 Node.js 一起安装,无需额外操作。它是 JavaScript 的默认包管理工具,能方便地安装、更新和卸载 Vue 脚手架以及项目所需的各类依赖包。使用上相对简单直接,对于一般的 Vue 项目开发完全能够满足需求。当然如果你习惯Yarn,也可以使用Yarn代替。

2.安装VUE脚手架

在Windows系统终端中,输入如下命令,进行脚手架的安装:

npm install -g @vue/cli
// 如果需要更换npm的下载源,可以先使用以下命令进行换源
npm config set registry https://registry.npmmirror.com  // 换为淘宝源
npm config get registry  // 查看淘宝镜像

使用 Vue -V,查看VUE脚手架是否安装成功,显示版本信息

3.使用脚手架创建VUE工程 

在你的工程目录下,使用 vue create 【项目名】创建工程 ,需要注意项目名不能有大写字母。

接着界面提示你选择一个预设配置(preset),主要有以下选项:

  • Default ([Vue 3] babel, eslint):使用 Vue 3 的默认配置,包含 Babel 和 ESLint。
  • Default ([Vue 2] babel, eslint):使用 Vue 2 的默认配置,包含 Babel 和 ESLint。
  • Manually select features:手动选择功能,可以自定义项目配置。

 

 选择第三个自定义选项,回车。接着出现下面的选项,分别代表:

  • Babel:JavaScript 编译工具,用于将 ES6+ 代码转换为向后兼容的 JavaScript 版本。
  • TypeScript:一种静态类型检查语言,编译为 JavaScript。
  • Progressive Web App (PWA) Support:为项目添加 PWA 支持,使网页应用可以像原生应用一样工作。
  • Router:Vue 的官方路由管理器,用于构建单页应用(SPA)。
  • Vuex:Vue 的状态管理库,用于管理应用的状态。(不过现在一般使用Pinia~)
  • CSS Pre-processors:CSS 预处理器(如 Sass、Less 等)。
  • Linter / Formatter:代码检查和格式化工具,用于保持代码风格一致。
  • Unit Testing:单元测试工具,用于测试代码的各个部分。
  • E2E Testing:端到端测试工具,用于测试整个应用流程。

依据你的项目需要选择需要的部分,使用键盘上的 空格键 选择或取消选择功能。按 A 可以全选所有功能。 选择完之后,直接回车。

选择你的VUE版本,是VUE2还是VUE3 

 接着会跳出几个问题,是否使用类组件语法,是否使用TS语言,是否启用路由的历史模式(history mode),使 URL 更美观(去掉 #)。最后选择错误检查和代码风格规范,如果你希望代码自动格式化且减少风格争议,建议选择 ESLint + Prettier。

 

 

 

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

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

相关文章

Java EE初阶——初识多线程

1. 认识线程 线程是操作系统能够进行运算调度的最小单位。它被包含在进程之中,是进程中的实际运作单位。 基本概念:一个进程可以包含多个线程,这些线程共享进程的资源,如内存空间、文件描述符等,但每个线程都有自己独…

如何删除网上下载的资源后面的文字

这是我在爱给网上下载的音效资源,但是发现资源后面跟了一大段无关紧要的文本,但是修改资源名称后还是有。解决办法是打开属性然后删掉资源的标签即可。

FPGA图像处理(5)------ 图片水平镜像

利用bram形成双缓冲,如下图配置所示: wr_flag 表明 buffer0写 还是 buffer1写 rd_flag 表明 buffer0读 还是 buffer1读 通过写入逻辑控制(结合wr_finish) 写哪个buffer ;写地址 进而控制ip的写使能 通过状态缓存来跳转buffer的…

day21python打卡

知识点回顾: LDA线性判别PCA主成分分析t-sne降维 还有一些其他的降维方式,也就是最重要的词向量的加工,我们未来再说 作业: 自由作业:探索下什么时候用到降维?降维的主要应用?或者让ai给你出题&…

ERP学习(一): 用友u8安装

安装: https://www.bilibili.com/video/BV1Pp4y187ot/?spm_id_from333.337.search-card.all.click&vd_sourced514093d85ee628d1f12310b13b1e59b 我个人用vmware16,这位up已经把用友软件和环境(sqlserver2008) 都封城vmx文件了…

01 | 大模型微调 | 从0学习到实战微调 | AI发展与模型技术介绍

一、导读 作为非AI专业技术开发者(我是小小爬虫开发工程师😋) 本系列文章将围绕《大模型微调》进行学习(也是我个人学习的笔记,所以会持续更新),最后以上手实操模型微调的目的。 (本文如若有…

海康相机无损压缩

设置无损压缩得到更高的带宽和帧率!

从机器人到调度平台:超低延迟RTMP|RTSP播放器系统级部署之道

✅ 一、模块定位:跨平台、超低延迟、系统级稳定的音视频直播播放器内核 在无人机、机器人、远程操控手柄等场景中,低延迟的 RTSP/RTMP 播放器并不是“可有可无的体验优化”,而是系统能否闭环、操控是否安全的关键组成。 Windows和安卓播放RT…

研发效率破局之道阅读总结(5)管理文化

研发效率破局之道阅读总结(5)管理文化 Author: Once Day Date: 2025年5月10日 一位热衷于Linux学习和开发的菜鸟,试图谱写一场冒险之旅,也许终点只是一场白日梦… 漫漫长路,有人对你微笑过嘛… 全系列文章可参考专栏: 程序的艺术_Once-Day…

单因子实验 方差分析

本文是实验设计与分析(第6版,Montgomery著傅珏生译)第3章单因子实验 方差分析python解决方案。本文尽量避免重复书中的理论,着于提供python解决方案,并与原书的运算结果进行对比。您可以从 下载实验设计与分析(第6版&a…

Bitacora:基因组组件中基因家族识别和注释的综合工具

软件教程 | Bitacora:基因组组件中基因家族识别和注释的综合工具 https://zhangzl96.github.io/tags#生物信息工具) 📅 官方地址:https://github.com/molevol-ub/bitacora 🔬 教程版本:BITACORA 1.4 📋 …

【WebRTC-13】是在哪,什么时候,创建编解码器?

Android-RTC系列软重启,改变以往细读源代码的方式 改为 带上实际问题分析代码。增加实用性,方便形成肌肉记忆。同时不分种类、不分难易程度,在线征集问题切入点。 问题:编解码器的关键实体类是什么?在哪里&什么时候…

青少年编程与数学 02-019 Rust 编程基础 01课题、环境准备

青少年编程与数学 02-019 Rust 编程基础 01课题、环境准备 一、Rust核心特性应用场景开发工具社区与生态 二、Rust 和 Python 比较1. **内存安全与并发编程**2. **性能**3. **零成本抽象**4. **跨平台支持**5. **社区与生态系统**6. **错误处理**7. **安全性**适用场景总结 三、…

Redis持久化存储介质评估:NFS与Ceph的适用性分析

#作者:朱雷 文章目录 一、背景二、Redis持久化的必要性与影响1. 持久化的必要性2. 性能与稳定性问题 三、NFS作为持久化存储介质的问题1. 性能瓶颈2. 数据一致性问题3. 存储服务单点故障4. 高延迟影响持久化效率.5. 吞吐量瓶颈 四、Ceph作为持久化存储介质的问题1.…

Ceph 原理与集群配置

一、Ceph 工作原理 1.1.为什么学习 Ceph? 在学习了 NFS 存储之后,我们仍然需要学习 Ceph 存储。这主要是因为不同的存储系统适用于不同的场景,NFS 虽然有其适用之处,但也存在一定的局限性。而 Ceph 能够满足现代分布式、大规模、…

天线的PCB设计

目录 天线模块设计的重要性 天线模块的PCB设计 天线模块设计的重要性 当智能手表突然断连、无人机信号飘忽不定——你可能正在经历一场来自天线模块的"无声抗议"。这个隐藏在电子设备深处的关键组件,就像数字世界的隐形信使,用毫米级的精密结…

C++笔记-set和map的使用(包含multiset和multimap的讲解)

1.序列式容器和关联式容器 前面我们已经接触过STL中的部分容器如:string、vector、list、deque、array、forward_list等,这些容器统称为序列式容器,因为逻辑结构为线性序列的数据结构,两个位置存储的值之间一般没有紧密的关联关系&#xff0…

Linux `ifconfig` 指令深度解析与替代方案指南

Linux `ifconfig` 指令深度解析与替代方案指南 一、核心功能与现状1. 基础作用2. 版本适配二、基础语法与常用操作1. 标准语法2. 常用操作速查显示所有接口信息启用/禁用接口配置IPv4地址修改MAC地址(临时)三、高级配置技巧1. 虚拟接口创建2. MTU调整3. 多播配置4. ARP控制四…

Python pandas 向excel追加数据,不覆盖之前的数据

最近突然看了一下pandas向excel追加数据的方法,发现有很多人出了一些馊主意; 比如用concat,append等方法,这种方法的会先将旧数据df_1读取到内存,再把新数据df_2与旧的合并,形成df_new,再覆盖写入,消耗和速…

【金仓数据库征文】政府项目数据库迁移:从MySQL 5.7到KingbaseES的蜕变之路

摘要:本文详细阐述了政府项目中将 MySQL 5.7 数据库迁移至 KingbaseES 的全过程,涵盖迁移前的环境评估、数据梳理和工具准备,迁移实战中的数据源与目标库连接配置、迁移任务详细设定、执行迁移与过程监控,以及迁移后的质量验证、系…