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

使用 Vue 和 Create-Vue 构建工程化前端项目

目录

  • 前言
  • 1. 工程化的意义与 Vue 的生态支持
  • 2. 搭建 Vue 工程化项目
    • 2.1 环境准备
    • 2.2 使用 `create-vue` 创建项目
      • 2.2.1 初始化项目
      • 2.2.2 安装依赖
      • 2.2.3 本地运行
  • 3. Vue 项目的目录结构解析
  • 4. Vue 开发流程详解
    • 4.1 项目入口与根组件
      • 4.1.1 `main.js` 的作用
      • 4.1.2 `App.vue` 的结构
    • 4.2 单文件组件(SFC)
    • 4.3 本地调试与热部署
    • 4.4 项目构建与部署
  • 5. 扩展与优化
    • 5.1 引入 Vue Router
    • 5.2 状态管理
  • 结语

前言

随着前端技术的发展,工程化已成为现代前端项目开发的必然趋势。Vue 作为一款流行的前端框架,其生态系统提供了强大的工具来支持项目的工程化开发。本文将介绍如何使用 Vue 官方最新脚手架工具 create-vue 快速生成一个工程化的 Vue 项目,并详细讲解项目的开发流程及关键技术点。

在这里插入图片描述

1. 工程化的意义与 Vue 的生态支持

在现代前端开发中,工程化主要是通过工具链和规范来提高开发效率、代码质量和团队协作能力。Vue 的生态系统为工程化提供了良好的支持,包括脚手架工具、组件化开发、单文件组件(SFC)模式以及丰富的插件库等。

create-vue 是 Vue 官方提供的一款最新脚手架工具,旨在帮助开发者快速创建一个标准化、工程化的 Vue 项目。与传统的脚手架工具相比,create-vue 提供了更现代化的功能,比如统一的目录结构、模块化管理、本地调试、热部署、单元测试和打包优化,能够大幅提升开发体验。

2. 搭建 Vue 工程化项目

2.1 环境准备

在开始项目创建之前,需要确保系统环境中已经安装了以下工具:

  1. Node.js:Vue 的运行环境和工具链依赖于 Node.js,建议安装最新版以获得更好的性能和功能支持。
  2. npmyarn:作为 Node.js 的包管理工具,用于安装项目所需的依赖包。

可以通过以下命令检查 Node.js 和 npm 是否已正确安装:

node -v
npm -v

如果尚未安装 Node.js,可前往 Node.js 官方网站 下载并安装。

2.2 使用 create-vue 创建项目

2.2.1 初始化项目

create-vue 提供了一种快速初始化项目的方式。通过以下命令即可创建一个新的 Vue 项目:

npm init vue@latest

在命令执行过程中,脚手架会引导用户完成项目的配置,包括:

  • 选择是否使用 TypeScript
  • 是否支持 JSX
  • 是否集成 Vue Router
  • 是否配置 Pinia 状态管理
  • 是否启用单元测试或端到端测试

根据实际需求完成选项选择后,脚手架会自动生成项目的基本结构。

2.2.2 安装依赖

项目初始化完成后,需要安装相关依赖:

npm install

2.2.3 本地运行

完成依赖安装后,可以通过以下命令启动本地开发服务器:

npm run dev

此时,浏览器会自动打开一个页面,展示 Vue 项目的初始界面。开发者可以直接在这个基础上进行功能开发。

3. Vue 项目的目录结构解析

一个典型的 create-vue 项目包含以下目录和文件:

  • src/:存放项目的主要代码,包括组件、样式、路由等。
  • public/:静态资源目录,存放不会被 Webpack 处理的文件。
  • package.json:记录项目的依赖包和脚本命令。
  • vite.config.js:Vite 的配置文件,用于调整开发服务器和构建行为。

其中,src/ 是项目开发的核心目录,包含以下重要文件:

  1. main.js:项目的入口文件,用于初始化应用并挂载到 DOM。
  2. App.vue:根组件,定义了整个应用的基础布局和逻辑。
  3. components/:存放项目中的子组件,用于实现模块化开发。

在这里插入图片描述

4. Vue 开发流程详解

4.1 项目入口与根组件

4.1.1 main.js 的作用

main.js 是 Vue 应用的入口文件,其主要任务是:

  • 创建 Vue 应用实例
  • 引入全局插件(如路由、状态管理)
  • 挂载应用到指定的 DOM 节点

典型的 main.js 内容如下:

import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // 引入路由配置
import store from './store';  // 引入状态管理const app = createApp(App);app.use(router);
app.use(store);
app.mount('#app');

4.1.2 App.vue 的结构

App.vue 是 Vue 项目的根组件,包含模板、脚本和样式三部分:

<template><div id="app"><router-view /></div>
</template><script>
export default {name: 'App',
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;text-align: center;color: #2c3e50;
}
</style>

根组件通常用于定义全局布局结构,其他功能模块会作为子组件插入到 router-view 中。

4.2 单文件组件(SFC)

Vue 的单文件组件(SFC)将组件的逻辑(JavaScript)、模板(HTML)和样式(CSS)封装在同一个文件中,以 .vue 为后缀。例如:

<template><div class="hello"><h1>{{ msg }}</h1></div>
</template><script>
export default {props: {msg: String,},
};
</script><style scoped>
h1 {color: #42b983;
}
</style>

这种结构使得组件的逻辑和样式更加清晰,同时也方便了团队协作。

4.3 本地调试与热部署

使用 npm run dev 启动的开发服务器支持热部署(Hot Module Replacement, HMR),即代码修改后无需刷新浏览器,页面会实时更新。这极大地提高了开发效率。

4.4 项目构建与部署

开发完成后,可以通过以下命令对项目进行构建:

npm run build

构建后的文件会生成在 dist/ 目录下,可以直接部署到生产环境。

5. 扩展与优化

5.1 引入 Vue Router

在大型项目中,路由管理是不可或缺的。Vue Router 提供了简单且灵活的方式来实现单页面应用的导航。

在项目初始化时,可以选择集成 Vue Router;也可以通过以下命令手动安装:

npm install vue-router

5.2 状态管理

对于复杂的状态管理需求,推荐使用 Pinia 或 Vuex。Pinia 是 Vue 官方推荐的新一代状态管理工具,简单易用且性能更佳。

结语

通过 create-vue 脚手架工具,我们可以快速搭建一个现代化、工程化的 Vue 项目。无论是目录结构、组件化开发,还是调试与构建功能,create-vue 都为开发者提供了强有力的支持。随着 Vue 生态的不断完善,使用 Vue 进行工程化开发将变得更加高效和便捷。希望本文能够为 Vue 项目的开发者提供一些实用的指导和启发。

相关文章:

使用 Vue 和 Create-Vue 构建工程化前端项目

目录 前言1. 工程化的意义与 Vue 的生态支持2. 搭建 Vue 工程化项目2.1 环境准备2.2 使用 create-vue 创建项目2.2.1 初始化项目2.2.2 安装依赖2.2.3 本地运行 3. Vue 项目的目录结构解析4. Vue 开发流程详解4.1 项目入口与根组件4.1.1 main.js 的作用4.1.2 App.vue 的结构 4.2…...

opencv图片明暗度判断方法

OpenCV 的LAB 颜色空间&#xff08;也称为 CIELAB&#xff09;是一种颜色对手的颜色模型&#xff0c;它旨在模仿人类的色彩感知。LAB 颜色空间由三个分量组成&#xff1a; L: 亮度分量 (Lightness)&#xff0c;范围从 0&#xff08;黑色&#xff09;到 100&#xff08;白色&…...

QT6学习第三天

QT6学习第三天 第一个Widgets项目创建项目项目界面简单介绍编译文件介绍 我在第一天中将重点标了颜色&#xff0c;后边我把一些简单的东西都不写了&#xff0c;写了的都是实际用的东西&#xff0c;就不标颜色了。 第一个Widgets项目 首先我们创建一个widgets项目&#xff0c;…...

计算机网络-MSTP基础实验一(单域多实例)

前面我们已经大致了解了MSTP的基本概念和工作原理&#xff0c;但是我自己也觉得MSTP的理论很复杂不结合实验是很难搞懂的&#xff0c;今天来做一个配套的小实验以及一些配置命令。 一、网络拓扑 单域多实例拓扑 基本需求&#xff1a;SW1为VLAN10的网关&#xff0c;SW2为VLAN20的…...

React合成事件及其核心思想详解

相关联Javascript知识 1.JavaScript 的事件流 事件流是 JavaScript 处理事件的机制&#xff0c;它描述了事件从发生到被处理的过程。事件流主要包括两个阶段&#xff1a;捕获阶段和冒泡阶段。在捕获阶段&#xff0c;事件从文档的根元素开始&#xff0c;逐层向下传播到目标元素&…...

Datawhale模型减肥秘籍Tasking之模型量化

Datawhale模型减肥秘籍Tasking之模型量化 什么是量化&#xff1f;为什么量化&#xff1f;量化基本方法基于k-means的量化线性量化 训练后量化量化粒度动态量化参数的计算 ( Cliping )指数移动平均&#xff08;EMA&#xff09;Min-MaxKL 量化均方误差&#xff08;MSE&#xff09…...

在云服务器搭建 Docker

操作场景 本文档介绍如何在腾讯云云服务器上搭建和使用 Docker。本文适用于熟悉 Linux 操作系统&#xff0c;刚开始使用腾讯云云服务器的开发者。如需了解更多关于 Docker 相关信息&#xff0c;请参见 Docker 官方。 说明&#xff1a; Windows Subsystem for Linux&#xff…...

Redis 的代理类注入失败,连不上 redis

在测试 redis 是否成功连接时&#xff0c;发现 bean 没有被创建成功&#xff0c;导致报错 根据报错提示&#xff0c;需要我们添加依赖&#xff1a; <dependency><groupId>org.apache.commons</groupId><artifactId>commons-pool2</artifactId>&l…...

版本控制【Git Bash】【Gitee】

目录 一、什么是版本控制&#xff1f; 二、版本控制的种类&#xff1a; 1、本地版本控制 2、集中版本控制 3、分布式版本控制 三、下载Git Bash 四、Git Bash 配置 五、Git Bash使用 1、切换目录&#xff1a;cd 2.查看当前文件路径&#xff1a;pwd 3.列出当前目录下文件…...

Neo4j Desktop 和 Neo4j Community Edition 区别

Neo4j Desktop 和 Neo4j Community Edition 的主要区别在于它们的用途、功能以及安装和管理方式。以下是这两者的详细对比&#xff1a; 1. Neo4j Desktop Neo4j Desktop 是一个图形化的桌面应用程序&#xff0c;主要为开发人员和个人使用提供了一个便捷的环境来安装、管理和运…...

使用uniapp开发微信小程序使用uni_modules导致主包文件过大,无法发布的解决方法

在使用uniapp开发微信小程序时候&#xff0c;过多的引入uni_modules的组件库&#xff0c;会导致主包文件过大&#xff0c;导致无法上传微信小程序&#xff0c;主包要求大小不超过1.5MB.分包大小每个不能超过2M。 解决方法&#xff1a;分包。 1.对每个除了主页面navbar的页面进…...

HarmonyOS NEXT应用元服务开发Intents Kit(意图框架服务)事件推荐开发者测试

意图框架向开发者提供真机测试能力&#xff0c;即开发者可连接设备进行调测。开发者完成代码开发之后&#xff0c;功能正式上架应用市场前&#xff0c;可以在HarmonyOS NEXT设备上面进行自验证&#xff0c;打磨体验。真机测试分为三个步骤&#xff1a;基础信息提供&#xff0c;…...

GD32F103 实践-- MCU编译运行

编译 打开固件库示例工程&#xff1a;在SDK路径下找到固件库示例工程&#xff0c;路径通常是SDK\GD32F10x_Firmware_Library_Template\Keil5_project\Project 选择芯片型号&#xff1a;根据你的MCU型号选择&#xff0c;例如GD32F103RCT6 修改宏定义&#xff1a;根据MCU型号修…...

SQL复杂数据类型处理

背景 数据处理中&#xff0c;经常碰到复杂数据类型&#xff0c;需要将他们进行解析才能利用。 复杂数据类型 1、MAP结构转为列 WITH tmp AS ( SELECT {"Users":{"4418":{"UserId":4418,"Score":0,"IsStudent":true},&q…...

ROS第九梯:ROS+VSCode+Python+C++自定义消息发布和订阅

首先,Python版本的ROS项目和C++版本的ROS项目前期创建功能包的步骤基本一致,具体可参考第二章。 费一步:新建msg文件 在功能包(data_input)目录下创建一个msg文件夹,并在msg文件夹下创建一个名为Box的msg文件,具体如下图所示: 该msg文件为一个用于描述3D Box的文件,…...

【Linux】指令 + 压缩与解压

Linux 一.Linux基本指令1.grep2.zip和unzip1.Linux中的压缩文件发送Windows中2.Linux中接收Windows中压缩文件 3.tar&#xff08;重要&#xff09;1.Linux与Linux互传压缩文件 4.bc5.uname 二.Linux相关知识点1.Linux常用热键2.关机操作 一.Linux基本指令 1.grep 行文本过滤工…...

力扣(leetcode)题目总结——动态规划篇

leetcode 经典题分类 链表数组字符串哈希表二分法双指针滑动窗口递归/回溯动态规划二叉树辅助栈 本系列专栏&#xff1a;点击进入 leetcode题目分类 关注走一波 前言&#xff1a;本系列文章初衷是为了按类别整理出力扣&#xff08;leetcode&#xff09;最经典题目&#xff0c…...

数据仓库数据湖湖仓一体解决方案

一、资料介绍 数据仓库与数据湖是现代数据管理的两大核心概念。数据仓库是结构化的数据存储仓库&#xff0c;用于支持企业的决策分析&#xff0c;其数据经过清洗、整合&#xff0c;以固定的模式存储&#xff0c;适合复杂查询。数据湖则是一个集中存储大量原始数据的存储库&…...

微信小程序 最新获取用户头像以及用户名

一.在小程序改版为了安全起见 使用用户填写来获取头像以及用户名 二.代码实现 <view class"login_box"><!-- 头像 --><view class"avator_box"><button wx:if"{{ !userInfo.avatarUrl }}" class"avatorbtn" op…...

无人机在森林中的应用!

一、森林资源调查 无人机可以利用遥感技术快速获取所需区域高精度的空间遥感信息&#xff0c;对森林图斑进行精确区划。相较于传统手段&#xff0c;无人机调查具有低成本、高效率、高时效的特点&#xff0c;尤其在地理环境条件不好的区域&#xff0c;调查人员无法或难以到达的…...

Seatunnel解决Excel中无法将数字类型转换成字符串类型以及源码打包

需求 需要实现将Excel中的数字类型的单元格像数据库中字符串类型的字段中推送 问题原因 Seatunnel在读取字段类型的时候都是使用强转的形式去获取数据的 假如说数据类型不一样的话直接强转就会报错 修改位置 org/apache/seatunnel/api/table/type/SeaTunnelRow.java org…...

在阿里云快速启动Appsmith搭建前端页面

什么是Appsmith Appsmith是一个开源的低代码开发平台&#xff0c;它使得开发者能够快速地构建内部工具、业务管理系统、CRM系统等。Appsmith通过提供一系列预建的UI组件&#xff08;如表格、图表、表单等&#xff09;&#xff0c;以及对数据库、API调用的直接支持&#xff0c;…...

「51媒体」:企业成长助推器

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 「51媒体」&#xff08;51meiti media PR&#xff09;作为国内具有影响力的媒体邀约服务商&#xff0c;确实在助力企业成长方面发挥着重要作用。以下是对「51媒体」的详细介绍&#xff0…...

安全、便捷、效率高,明达边缘计算网关助力制药装备企业远程调机

随着药厂对设备运维需求的增长&#xff0c;制药装备企业需要在提高运维效率的同时&#xff0c;降低人工及差旅成本。制药装备因其数据具有高度的保密性&#xff0c;要求运维工程师提供安全可靠的远程调试方式。本案例介绍了明达技术MBox20系列5口WIFI通用网关在制药装备上的应用…...

海康威视和大华视频设备对接方案

目录 一、海康威视 【老版本】 【新版本】 二、大华 一、海康威视 【老版本】 URL规定&#xff1a; rtsp://username:password[ipaddress]/[videotype]/ch[number]/[streamtype] 注&#xff1a;VLC可以支持解析URL里的用户名密码&#xff0c;实际发给设备的RTSP请求不支…...

用DMA来自动控制PWM的输出(音频输出,交直流转换)

一、前提分析 举例&#xff1a;一首歌所包含的音阶有高有低&#xff0c;而按照某种编曲的顺序排列也就对应了不同的频率&#xff08;五线谱&#xff1a;1234567 对应的音阶各不相同&#xff09;所以频率可以理解为它的源头。频率的来源又可由PWM来控制故而一首歌所包含的频率序…...

利用hive元数据统计数据量

对于数据量的统计&#xff0c;从表是否分区分为分区表和非分区表两者有着不同的统计方式 非分区表 1. 利用传统方法count 2. 利用元数据计算&#xff1a; select sum(tb.param_value) AS TOTAL from sys.tbls t left join sys.dbs d on t.db_id d.db_id left join sys.tabl…...

平均值(水题???)

今天刷题时发现了一道十分难简单的题。大家仔细看看题目。 题目 5. K11937 平均值 题目描述 在演讲比赛中&#xff0c;当参赛者完成演讲时&#xff0c;评委会对他的表演进行评分。工作人员会去掉一个最高分&#xff0c;一个最低分&#xff0c;然后计算其余的平均值作为参赛者…...

免费开源!DBdoctor推出开源版系统诊断工具systool

​前言 在开发和运维过程中&#xff0c;经常会遇到难以定位的应用问题&#xff0c;我们通常需要借助Linux系统资源监控工具来辅助诊断。然而&#xff0c;系统的IO、网络、CPU使用率以及文件句柄等信息通常需要通过多个独立的命令工具来获取。在没有部署如Prometheus这样的综合…...

Bufferevent and SSL

bufferevent可以使用OpenSSL库实现SSL/TLS安全传输层。因为很多应用不需要或者不想链接OpenSSL&#xff0c;这部分功能在单独的libevent_openssl库中实现。未来版本的libevent可能会添加其他SSL/TLS库&#xff0c;如NSS或者GnuTLS&#xff0c;但是当前只有OpenSSL。 OpenSSL功能…...