当前位置：首页 > news >正文

【大前端】Vue3 工程化项目使用详解

news 来源：原创 2025/5/6 14:18:43

一、前言

二、前置准备

2.1 环境准备

2.1.1 create-vue功能

2.1.2 nodejs环境

2.1.3 配置nodejs的环境变量

2.1.4 更换安装包的源

三、工程化项目创建与启动过程

3.1 创建工程化项目

3.2 项目初始化

3.3 项目启动

3.4 核心文件说明

四、VUE两种不同的API风格

4.1 选项式API风格

4.2 组合式API风格

4.2.1 自定义Vue文件

4.2.2 在App.vue文件中引入

五、写在文末

一、前言

在实际开发中，为了快速满足业务的需求，开发者往往不想投入过多的时间在搭建工程、配置环境上面，于是很多编程语言都逐渐推出合适的工程化项目的脚手架，开发者只需要按照要求输入一些命令即可，对于VUE来说也是如此，本文将通过实际案例详细分享一下VUE3中工程化项目的使用。

二、前置准备

2.1 环境准备

脚手架工具：create-vue，是vue官方提供的最新的脚手架工具，可用于快速生成一个工程化的Vue项目

2.1.1 create-vue功能

create-vue提供了如下功能：

统一的目录结构；
本地调试；
热部署；
单元测试；
集成打包；

2.1.2 nodejs环境

本地安装nodejs，这个比较简单就不再赘述了，安装完成后，通过下面的窗口命令检查一下

注意：vue3要求的最低nodejs的版本是18.16

2.1.3 配置nodejs的环境变量

使用下面的命令设置一下nodejs环境变量，方便后续执行相关的npm命令

npm config set prefix ""D:\dev-tools\node\place

2.1.4 更换安装包的源

设置使用下面的命令

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

检查是否设置成功

npm config get registry

三、工程化项目创建与启动过程

3.1 创建工程化项目

创建一个工程化VUE项目，执行下面的命令

npm init vue@latest

执行上面的命令之后，将会安装并执行 create-vue ，它是Vue官方的项目脚手架工具，第一次创建项目，先都使用默认的选项即可；

关于创建项目过程中的各个参数项做如下说明：

Project name：------》项目名称，默认值：vue-project，可输入想要的项目名称，此处我写的是：vueproject1。
Add TypeScript? ------》是否加入TypeScript组件？默认值：No。
Add JSX Support? ------》是否加入JSX支持？默认值：No。
Add Vue Router for Single Page Application development? ------》是否为单页应用程序开发添加Vue Router路由管理组件？默认值：No。
Add Pinia for state management? ------》是否添加Pinia组件来进行状态管理？默认值：No。
Add Vitest for Unit testing? ------》是否添加Vitest来进行单元测试？默认值：No。
Add an End-to-End Testing Solution?------》是否添加端到端测试？默认值No。
Add ESLint for code quality? ------》是否添加ESLint来进行代码质量检查？默认值：No。

执行完成之后，可以看到在当前目录下就产生了一个项目

目录结构如下

3.2 项目初始化

在上一步项目创建出来之后，窗口最后给出了下面的提示，即后续接下来的操作

我们按照提示的命令，依次进行命令执行即可

1）执行npm install

类比maven，即从仓库拉取项目运行依赖的相关组件包

2）使用vscode打开项目

在当前的窗口下，执行 code .命令，将会在vscode中打开项目

对于上面的工程目录，接下来简单说明一下各个目录的作用：

jsconfig.json
- 存放Vue项目的配置信息，比如端口号等；
package.json
- 项目配置文件，包括项目名称，版本号，依赖包，版本等；
index.html
- 默认首页；
public
- 公共资源目录
node_modules
- 下载的第三方包存放目录；
src
- 源代码存放目录
  - assets：静态资源目录，比如图片、字体；
  - components：组件目录，存放通用的组件；
  - App.vue ，根组件；
  - main.js，入口文件；

3.3 项目启动

执行下面的命令启动项目

npm run dev

正常启动的效果如下，默认分配了一个访问端口

浏览器访问上图中的地址： http://localhost:5173/ ，看到下面的主页展示效果

3.4 核心文件说明

如下是默认的工程启动之后页面展示依赖的几个核心文件

index.html，展示主页信息；
main.js，入口文件，被index.html所引用；
App.vue，根组件；
- .vue文件是Vue项目中的组件文件，在Vue项目中也称为单文件组件，Vue的单文件组件会将一个组件的逻辑（JS），模板（HTML）和样式（CSS）封装在同一个文件里（.vue）

四、VUE两种不同的API风格

4.1 选项式API风格

在我们刚开始学习VUE的时候，下面这样的写法是不是很熟悉，这就是传统的选项式API的风格

选项式API，可以用包含多个选项的对象来描述组件的逻辑，比如：data，methods，mounted等

<script>export default {name: "old",data() {return {msg: "Welcome to Your Vue.js App"}},methods: {点我增加: function () {alert(this.msg);}},mounted() {console.log("vue mounted");}}</script><template><button @click="incr">点我增加</button>
</template>

但是这种写法也有一个明显的缺点就是风格比较死板，不够灵活，所以就出现了下面这种组合式的风格

4.2 组合式API风格

比如像下面这样的代码，就属于组合式API风格的写法，关于代码中几个核心的模块分别做说明：

setup，作为一个关键标识，告诉VUE需要做一些处理，让开发者可以更加简洁的使用组合式API；
ref()，接收一个内部值，返回一个响应的ref对象，此对象只有一个指向内部值的属性value；
onMounted()，在组合式API中的钩子方法，注册一个回调函数，在组件挂载完成后执行；

<script setup>import { onMounted,ref } from 'vue'const count = ref(0)function incr() {count.value++}onMounted(() => {console.log('mounted')})</script><template><button @click="incr">点我增加</button>
</template>

下面通过一个简单的案例体验下组合式API风格的写法。

4.2.1 自定义Vue文件

在src目录下创建一个Api.vue文件，参照组合式API风格的写法，代码如下：

<script setup>//声明响应式数据import { ref,onMounted } from 'vue';const conut = ref(0);function incr() {conut.value++};onMounted(() => {console.log('组件挂载完毕')})
</script><!-- 编写html元素 -->
<template><button @click="incr">count : {{conut}}</button>
</template>

4.2.2 在App.vue文件中引入

主要包括两个地方的引入，第一在script标签中引入

然后在template标签中的合适位置用Api标签导入

最后运行工程，在界面上可以看到自定义的这个Api.vue组件就生效了

五、写在文末

本文详细介绍了VUE3工程化项目的完整过程，希望对看到的同学有用哦，本篇到此结束，感谢观看。

【大前端】Vue3 工程化项目使用详解

目录一、前言二、前置准备 2.1 环境准备 2.1.1 create-vue功能 2.1.2 nodejs环境 2.1.3 配置nodejs的环境变量 2.1.4 更换安装包的源三、工程化项目创建与启动过程 3.1 创建工程化项目 3.2 项目初始化 3.3 项目启动 3.4 核心文件说明四、VUE两种不同的API风格 …...

编程日记 2025/5/6 14:18:43

window.print()预览时表格显示不全

问题描述：使用element的table组件，表格列宽为自适应，但使用window.print()方法预览的页面会直接按预览宽度截取表格内容进行展示，造成表格可能的显示不全问题解决方法：添加如下样式 media print {::v-deep {// 表头…...

编程日记 2025/5/1 2:16:08

《解锁鸿蒙Next系统人工智能语音助手开发的关键步骤》

在当今数字化时代，鸿蒙Next系统与人工智能的融合为开发者带来了前所未有的机遇，开发一款人工智能语音助手应用更是备受关注。以下是在鸿蒙Next系统上开发人工智能语音助手应用的关键步骤： 环境搭建与权限申请安装开发工具：首先需…...

编程日记 2025/4/29 20:17:18

计算机网络之---MAC协议

MAC协议的作用在数据链路层中，MAC（媒介访问控制）协议负责控制设备如何访问共享的通信介质（如以太网、无线电波等），确保在多台设备共享同一传输媒介时能够有效地进行数据传输，避免冲突、控制流…...

编程日记 2025/5/6 14:14:20

系统思考—要素连接

“改变你的思维，就能改变你的世界”— 诺曼皮尔世界上的所有事物，都在规律的支配下，以系统的方式运转。显性的部分是我们能看到的“要素”，而那些看不见的力量，正是推动系统运作的要素之间的相互作用。更隐秘的&…...

编程日记 2025/4/29 20:17:30

influxdb 采集node_exporter数据

一、打开Scrapers添加 node_exporter地址：http://192.168.31.135:9100/metrics 查看数据...

编程日记 2025/5/4 7:37:28

数据链路层-STP

生成树协议STP（Spanning Tree Protocol） 它的实现目标是：在包含有物理环路的网络中，构建出一个能够连通全网各节点的树型无环逻辑拓扑。选举根交换机： 选举根端口： 选举指定端口： 端口名字&…...

编程日记 2025/5/4 18:51:18

学技术学英语：ELK是什么

📢📢📢： 先看关键单词，再看英文，最后看中文总结，再回头看一遍英文原文，效果更佳！！ 关键词 aggregate 聚合 /ˈɡrɪɡeɪt/ analytics 分析学 /ˌnəˈl…...

编程日记 2025/4/24 15:15:47

快速实现一个快递物流管理系统：实时更新与状态追踪

物流管理是电商、仓储和配送等行业的重要组成部分。随着电子商务的快速发展，快递物流的高效管理和实时状态更新变得尤为关键。本文将演示如何使用Node.js、Express、MongoDB等技术快速构建一个简单的快递物流管理系统，该系统支持快递订单的实时更新和追踪…...

编程日记 2025/5/4 15:32:21

android分区和root

线刷包内容： 线刷包是一个完整的android镜像，不但包括android、linux和用户数据，还包括recovery等。当然此图中没有recovery,但是我们可以自己刷入一个。主要分区 system.img 系统分区，包括linux下主要的二进制程序。 boot.img…...

编程日记 2025/5/6 9:19:22

【Go】：深入解析 Go 1.24：新特性、改进与最佳实践

前言 Go 1.24 尚未发布。这些是正在进行中的发布说明。Go 1.24 预计将于 2025 年 2 月发布。本文将深入探讨 Go 1.24 中引入的各项更新，并通过具体示例展示这些变化如何影响日常开发工作，确保为读者提供详尽而有价值的参考。新特性及改进综述 HTTP/2 …...

编程日记 2025/5/6 13:35:59

Vue3组件通讯——自定义事件（子-＞父）

需求如下： 1.在子组件中，当用户点击提交按钮后，更新数据库 2.数据更新成功后，子组件通知父组件getUserInfo函数，重新获取数据，同步更新 3.子组件等待getUserInfo函数执行完毕后，调用init函数…...

编程日记 2025/5/6 13:51:19

【Rust自学】12.2. 读取文件

12.2.0. 写在正文之前第12章要做一个实例的项目——一个命令行程序。这个程序是一个grep(Global Regular Expression Print)，是一个全局正则搜索和输出的工具。它的功能是在指定的文件中搜索出指定的文字。这个项目分为这么几步： 接收命令行参数读…...

编程日记 2025/5/6 10:27:17

《OpenCV计算机视觉实战项目》——银行卡号识别

文章目录项目任务及要求项目实现思路项目实现及代码导入模块设置参数对模版图像中数字的定位处理银行卡的图像处理读取输入图像，预处理找到数字边框使用模版匹配，计算匹配得分画出并打印结果项目任务及要求任务书： 要为某家银行设计一套…...

编程日记 2025/5/6 13:58:51

Windows 下Mamba2 / Vim / Vmamba 环境安装问题记录及解决方法终极版（无需绕过triton）

导航安装教程导航 Mamba 及 Vim 安装问题参看本人博客：Mamba 环境安装踩坑问题汇总及解决方法（初版）Linux 下Mamba 及 Vim 安装问题参看本人博客：Mamba 环境安装踩坑问题汇总及解决方法（重置版）Windows …...

编程日记 2025/5/4 9:39:18

OpenCV的一种改进型的素描特效算法

实现素描特效的原理主要基于图像处理中的边缘检测和灰度反转等技术。边缘检测能够突出图像中的轮廓信息，而灰度反转则用于增强对比，使图像看起来更像手绘素描。 1 素描特效的常规算法图像读取与预处理使用图像处理库（如OpenCV）…...

编程日记 2025/5/4 23:22:58

Maven核心插件之maven-resources-plugin

前言 Maven 插件是 Maven 构建系统的重要组成部分，它们为 Maven 提供了丰富的功能和扩展能力，使得 Maven 不仅是一个构建工具，更是一个强大的项目管理平台。在 Maven 项目中，插件的使用通常通过配置 pom.xml 文件来完成。每个插件…...

编程日记 2025/5/1 20:23:15

LeetCode 283题：移动零

LeetCode 283题：移动零 (Move Zeroes) LeetCode 第283题要求将数组中的所有零移动到数组的末尾，同时保持非零元素的相对顺序。题目描述给定一个数组 nums，编写一个函数将所有的 0 移动到数组的末尾，同时保持非零元素的相对顺序…...

编程日记 2025/5/5 4:22:59

常见的开源协议及注意事项【精简版】

注： 以下内容出自Github Copilot。常见的开源协议有以下几种，每种协议都有其特定的使用场景和注意事项： MIT许可证： 特点：非常宽松，允许用户自由使用、复制、修改、合并、发布、分发、再许可和/或销售软件…...

编程日记 2025/5/6 13:48:22

【Oracle专栏】2个入参，生成唯一码处理

Oracle相关文档，希望互相学习，共同进步风123456789～-CSDN博客 1.背景业务需要：2个参数，如 aidbankid ，两个值是联合主键，需要生成一个固定唯一码，长度有限制32位，为了…...

编程日记 2025/5/6 14:07:32

component-动态控制 div width 的值根据传入的变量决定width的值 vue

1.实现根据参数的值，div显示不同的长度 <div class"node-line" :style"lineProgress"></div> <script>export default {name: "trainSummaryInfo",data(){return{linePercentage:200,}},computed:{lineProgress…...

编程日记 2025/5/6 9:29:14

＜2025 网络安全＞《网络安全政策法规-关键信息基础设施安全保护条例》

1 政策出台背景 ‌《关键信息基础设施安全保护条例》的实施背景主要包括以下几个方面‌： 首先，‌关键信息基础设施在经济社会中的重要地位使其成为网络安全的核心保护对象‌。关键信息基础设施包括公共通信和信息服务、能源、交通、水利、金融、公共服…...

编程日记 2025/5/4 14:00:49

【MySQL数据库】基础总结

目录前言一、概述二、 SQL 1. SQL通用语法 2. SQL分类 3. DDL 3.1 数据库操作 3.2 表操作 4. DML 5. DQL 5.1 基础查询 5.2 条件查询 5.3 聚合函数 5.4 分组查询 5.5 排序查询 5.6 分页查询 6. DCL 6.1 管理用户 6.2 权限控制三、数据类型 1. 数值类…...

编程日记 2025/4/27 17:50:04

acwing_5721_化学方程式配平

acwing_5721_化学方程式配平这是一道T3的题目，操作起来可能有些棘手，但是耐下心来做一遍会有收获的！ 下面是对于大佬的题解进行的注释 #include <iostream> #include <string> #include <map> #include <vector>…...

编程日记 2025/5/6 13:16:43

C++ 中的 template ＜typename T＞用法 ← 泛型

【语法解析】 ● C 中的 template <typename T> 用法 template <typename T> 是C编程语言中的一个模板声明，用于定义一个模板，其中 T 是一个模板参数，可以是任何类型。这种机制允许程序员编写与类型无关的代码，从而提…...

编程日记 2025/5/3 9:08:58

C语言操作符_位操作符、赋值操作符、单目操作符

1.位操作符 & - 按（2进制）位与 | - 按（2进制）位或 ^ - 按（2进制）位异或只适用于整型例：实现交换两个变量的值，要求不能新建变量 //3^3 0 -> a^a 0 //011 //011 //000 …...

编程日记 2025/5/6 13:34:37

C++ 鼠标轨迹算法 - 防止游戏检测

一.简介鼠标轨迹算法是一种模拟人类鼠标操作的程序，它能够模拟出自然而真实的鼠标移动路径。鼠标轨迹算法的底层实现采用C/C语言，原因在于C/C提供了高性能的执行能力和直接访问操作系统底层资源的能力。鼠标轨迹算法具有以下优势： 模拟…...

编程日记 2025/5/5 17:24:21

计算机网络笔记数据链路层3（局域网，广域网，网桥，交换机）

局域网: LAN:在某一区域内由多台计算机互联成的计算机组，使用广播信道特点： 覆盖范围有限：通常局限在几千米范围内，比如一栋办公楼、一个校园或一个工厂等相对较小的地理区域。数据传输速率高：一般能达到 10Mbps…...

编程日记 2025/5/6 14:04:43

【Qnx】Qnx常用工具

Qnx常用分析工具近期项目中Qnx端常用到的工具，总结一下。查看进程 Display information about the processes in the system (QNX Neutrino) pidin使用pidin命令，可以查看Qnx系统运行的进程信息，包括PID、TID、NAME、PRIO(优先级)、STATE…...

编程日记 2025/5/6 13:26:39

基于 Selenium 实现上海大学校园网自动登录

基于 Selenium 实现上海大学校园网自动登录一、技术方案核心工具： Selenium：一个用于自动化测试的工具，能够模拟用户在浏览器上的操作。Edge WebDriver：用于控制 Edge 浏览器的驱动程序。功能设计： 检测网络状…...

编程日记 2025/5/6 13:43:39

相机小孔成像模型与透视变换

0 背景本文用于记录小孔相机成像的数学模型推导，并讨论特定条件下两个相机之间看到图像的变换关系。 1 小孔成像模型小孔成像模型如上图所示。物理世界发光点P，经过小孔O投影到物理成像平面，形成像点I’。简易起见，构造虚拟成…...

编程日记 2025/5/6 14:14:20

微信小程序订阅消息提醒-云函数

微信小程序消息订阅分2种： 1.一次性订阅：用户订阅一次就可以推送一次，如果需要多次提醒需要多次订阅。 2.长期订阅：只有公共服务领域，如政务、医疗、交通、金融和教育等。‌在用户订阅后，在很长一段时间内…...

编程日记 2025/5/4 8:12:17

语音技术与人工智能：智能语音交互的多场景应用探索

引言近年来，智能语音技术取得了飞速发展，逐渐渗透到日常生活和各行各业中。从语音助手到智能家居控制，再到企业客服和教育辅导，语音交互正以前所未有的速度改变着人机沟通的方式。这一变革背后，人工智能技术无疑是关键…...

编程日记 2025/4/27 19:51:20

ros2笔记-6.2 使用urdf创建机器人模型

本节主要跟着小鱼老师的视频操作，不同的仿真平台有不同的建模语言，但是几乎都支持URDF。本节使用URDF创建一个机器人模型。 6.2.1 帮机器人创建一个身体 URDF使用XML来描述机器人的结构和传感器、执行器等信息。在chapt6/chap6_ws/src创建功能包:r…...

编程日记 2025/5/6 13:28:30

SQL刷题快速入门（二）

其他章节：SQL刷题快速入门（一） 承接上一章节，本章主要讲SQL的运算符、聚合函数、SQL保留小数的几种方式三个部分运算符 SQL 支持多种运算符，用于执行各种操作，如算术运算、比较、赋值、逻辑运算等。以下…...

编程日记 2025/5/4 18:00:24

大数据技术实训：Zookeeper集群配置

一、本地模式安装部署 1）安装前准备 （1）安装jdk （2）拷贝Zookeeper安装包到Linux系统下 （3）解压到指定目录 tar -zxvf zookeeper-3.5.7.tar.gz -C /opt/module/ 2）配置修改 &am…...

编程日记 2025/4/26 4:28:39

SpringBoot日常：集成Kafka

文章目录 1、pom.xml文件2、application.yml3、生产者配置类4、消费者配置类5、消息订阅6、生产者发送消息7、测试发送消息本章内容主要介绍如何在springboot项目对kafka进行整合，最终能达到的效果就是能够在项目中通过配置相关的kafka配置，就能进行消息…...

编程日记 2025/5/1 17:25:03

初学stm32 --- DAC输出三角波和正弦波

输出三角波实验简要： 1，功能描述通过DAC1通道1(PA4)输出三角波，然后通过DS100示波器查看波形 2，关闭通道1触发(即自动) TEN1位置0 3，关闭输出缓冲 BOFF1位置1 4，使用12位右对齐模式将数字量写入DAC_…...

编程日记 2025/5/1 7:57:51

从绝对误差到相对误差：C++ 浮点数比较详解

一般情况下,对于比较两个整数的大小关系,我们通常使用简单的比较运算符进行比较即可得出结论; 考虑下面的程序: #include <iostream> #include<cmath> #include <algorithm>int main() {int a {1};int b {2};std::cout << std::boolalpha;std::cout …...

编程日记 2025/4/29 21:00:34

Chrome_60.0.3112.113_x64 单文件版下载

单文件，免安装，直接用~ Google Chrome, 免費下載. Google Chrome 60.0.3112.113: Chrome 是 Google 開發的網路瀏覽器。它的特點是速度快,功能多。下载地址: https://blog.s3.sh.cn/thread-150-1-1.htmlhttps://blog.s3.sh.cn/thread-150-1-1.html...

编程日记 2025/4/30 21:16:51

《自动驾驶与机器人中的SLAM技术》ch1：自动驾驶

目录 1.1 自动驾驶技术 1.2 自动驾驶中的定位与地图 1.1 自动驾驶技术 1.2 自动驾驶中的定位与地图 L2 在技术实现上会更倾向于实时感知，乃至可以使用感知结果直接构建鸟瞰图（bird eye view, BEV），而 L4 则依赖离线地图。高精地…...

编程日记 2025/4/25 20:46:47

httpx.AsyncClient报错ProxyError: 504 Gateway Time-out

## 场景： 同一个URL，用requests.get能正常获取网页内容，用httpx.get和httpx.AsyncClient.get就不行，要么就报超时，要么就报ProxyError: 504 Gateway Time-out import anyio, httpx, requestsurl https://my-domain.…...

编程日记 2025/5/6 14:12:07

常见的http状态码 + ResponseEntity

常见的http状态码 ResponseStatus(HttpStatus.CREATED) 是 Spring Framework 中的注解，用于指定 HTTP 响应状态码。 1. 基本说明 HttpStatus.CREATED 对应 HTTP 状态码 201表示请求成功且创建了新的资源通常用于 POST 请求的处理方法上 2. 使用场景和示例基本…...

编程日记 2025/5/4 13:56:58

完全自定义Qt翻译功能，不使用Qt Linguist的.ts 和 .qm类型翻译

这篇文章展示了集成Qt Linguist 的功能。但是有时候Qt的翻译功能比较繁琐，我们简单项目只需要使用本地化功能，将中文字符串导入到项目中，避免编码格式问题导致的乱码。只需要使用一个简单的json或者其他格式的本地文件作为映射的key/value.…...

编程日记 2025/5/4 22:07:08

std::array

std::array 是 C 标准库中的一个容器，定义在 <array> 头文件中。它是一个固定大小的数组容器，封装了 C 风格数组，并提供了更多的功能和安全性。与 C 风格数组相比，std::array 具有以下优点： （1&#…...

编程日记 2025/5/3 6:41:46

Go语言中的接收器（Receiver）详解

在 Go 语言中，接收器（Receiver） 是指在方法声明中与方法绑定的对象。它是 Go 语言实现面向对象编程（OOP）特性的核心之一。接收器的作用是将方法绑定到某个类型的实例（值或者指针），让…...

编程日记 2025/4/30 21:55:33

linux下实现U盘和sd卡的自动挂载

linux下实现U盘和sd卡的自动挂载 Chapter0 linux下实现U盘和sd卡的自动挂载 Chapter0 linux下实现U盘和sd卡的自动挂载原文链接：https://blog.csdn.net/EmSoftEn/article/details/45099699 目的：使U盘和SD卡在Linux系统中进行插入和拔除时能自动挂载和…...

编程日记 2025/5/5 14:45:50