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

vue项目开发流程

news 2026/3/30 5:30:34

vue项目开发流程

环境配置

asdf plugin add nodejs
asdf install nodejs 16.20.2

创建项目

npm create vite@latest my-vue-app -- --template vue
npm install 
npm run dev

修改调试端口

修改vite.config.js,修改如下所示，添加server的host和port。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],server: {host: '0.0.0.0',port: 3000 // 设置 Vite 服务器监听的端口}
})

项目结构

  • index.html

项目入口是index.html,里面有一个app的div，就是vue里面的app,这个app指定了要运行的js入口，也就是main.js。

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite + Vue</title></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body>
</html>

这个html里的内容也是可以更改的，比如这里的 标签里的内容。

  • main,js

在index.html里指定入口是main.js后，就会在main.js里初始化vue相关的东西。

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'createApp(App).mount('#app')

在这个文件里主要是把vue接口导入进来，以及导入css，然后导入App.vue，到这里入口传到到App.vue。

main.js会将vue框架mount到界面。这些一般都不需要更改，除非需要引入其他的东西。

  • App.vue

App.vue就是vue的核心开发文件，这里就是整个页面的展示，对于单页面应用来说，这个就是页面对应的代码。

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script><template><HelloWorld msg="anycode开发环境" />
</template>

vue采用组件化和模板化来开发，在开头可以引入其他的组件，这个一般是封装好的组件，放在components目录下。

比如上面的例子中就导入了HelloWorld这个组件。

然后对于这个App来说，有一个模板，这个template可以简单理解为页面的body。

然后里面会显示HelloWorld这个组件，这个时候控制权就到了./components/HelloWorld.vue。

app.vue给它传了一个msg的参数。

  • ./components/HelloWorld.vue
<script setup>
defineProps({msg: String,
})
</script><template><h1>{{ msg }}</h1><p>hello,anycode.</p>
</template>

相关文章：

vue项目开发流程

vue项目开发流程 环境配置 asdf plugin add nodejs asdf install nodejs 16.20.2创建项目 npm create vitelatest my-vue-app -- --template vue npm install npm run dev修改调试端口 修改vite.config.js,修改如下所示&#xff0c;添加server的host和port。 import { de…...

编程日记 2024/5/8 14:03:28

【Django学习笔记（十）】Django的创建与运行

Django的创建与运行 前言正文1、安装Django2、创建项目2.1 基于终端创建项目2.2 基于Pycharm创建项目2.3 两种方式对比 3、默认项目文件介绍4、APP5、启动运行Django5.1 激活App5.2 编写URL和视图函数对应关系5.3 启动Django项目5.3.1 命令行启动5.3.2 Pycharm启动5.3.3 views.…...

编程日记 2024/5/8 14:02:27

即时通讯技术文集（第37期）：IM代码入门实践(Part1) [共16篇]

为了更好地分类阅读 52im.net 总计1000多篇精编文章&#xff0c;我将在每周三推送新的一期技术文集&#xff0c;本次是第37 期。 [- 1 -] 一种Android端IM智能心跳算法的设计与实现探讨&#xff08;含样例代码&#xff09; [链接] http://www.52im.net/thread-783-1-1.html […...

编程日记 2024/5/8 14:00:24

UV胶具有哪些特点和优势

1. 快速固化&#xff1a;UV胶在紫外线照射下能够迅速固化&#xff0c;固化时间通常在几秒钟到几分钟之间&#xff0c;大大提高了生产效率。 2. 高粘接强度&#xff1a;UV胶固化后&#xff0c;具有较高的粘接强度&#xff0c;能够在各种材料上实现可靠的粘接&#xff0c;提供持…...

编程日记 2024/5/8 13:59:23

python面试之mysql引擎选择问题

MySQL数据库提供了多种存储引擎&#xff0c;每种存储引擎有其特定的优势和场景适用。以下是几种常见的MySQL存储引擎及其特点&#xff1a; InnoDB&#xff1a; 支持事务&#xff0c;有回滚和提交事务的功能。 支持行级锁定&#xff0c;提供更高的并发。 支持外键约束&#…...

编程日记 2024/5/8 13:58:22

MT3031 AK IOI

思路&#xff1a;把每个节点存到堆&#xff08;大根堆&#xff09;里。 如果节点放入后总时间没有超过m则放入堆中&#xff1b;如果总时间超过了&#xff0c;就看堆头元素是否比新元素大。如果大&#xff0c;则删除堆头&#xff08;反悔贪心&#xff09;。 注意别忘记开long l…...

编程日记 2024/5/8 13:57:21

UE5自动生成地形二：自动生成插件

UE5自动生成地形二&#xff1a;自动生成插件 Polycam使用步骤 本篇主要讲解UE5的一些自动生成地形的插件 Polycam 此插件是通过现实的多角度照片自动建模生成地形数据&#xff0c;也是免费的。这里感谢B站up主古道兮峰的分享 Polycam网站 插件下载地址 插件网盘下载 提取码&a…...

编程日记 2024/5/8 13:56:19

二分图（染色法与匈牙利算法）

二分图当且仅当一个图中不含奇数环 1.染色法 简单来说&#xff0c;将顶点分成两类&#xff0c;边只存在于不同类顶点之间&#xff0c;同类顶点之间没有边。 e.g. 如果判断一个图是不是二分图&#xff1f; 开始对任意一未染色的顶点染色。 判断其相邻的顶点中&#xff0c;若未…...

编程日记 2024/5/8 13:55:18

ReactFlow的ReactFlow实例事件传参undefined处理状态切换

1.问题 ReactFlow的ReactFlow实例有些事件我们在不同的状态下并不需要&#xff0c;而且有时候传参会出现其它渲染效果&#xff0c;比如只读状态下我们不想要拖拉拽onEdgesChange连线重连或删除的功能。 2.思路 事件名称类型默认值onEdgesChange(changes: EdgeChange[]) >…...

编程日记 2024/5/8 13:51:12

Dockerfile 和 Docker Compose

Dockerfile 和 Docker Compose 是 Docker 生态系统中两个重要的组成部分&#xff0c;它们分别服务于不同的目的&#xff0c;但共同协助开发者和运维人员高效地管理和部署容器化应用。 Dockerfile Dockerfile 是一个文本文件&#xff0c;包含了构建 Docker 镜像所需的一系列指…...

编程日记 2024/5/8 13:50:11

多个文件 import 的相同模块里的对象

多个文件 import 的相同模块里的对象&#xff0c;是否永远都是同一个对象&#xff1f; 在store的index.js中 import vue from ‘vue’ import Vuex from ‘vuex’ 并配置有关对象 然后再app.vue中配置vm 在不同的文件中 import一个vue对象&#xff0c;在任何情况下&#…...

编程日记 2024/5/8 13:49:10

面试经典150题——验证回文串

面试经典150题 day25 题目来源我的题解方法一 双指针方法二 双指针 空间优化 题目来源 力扣每日一题&#xff1b;题序&#xff1a;125 我的题解 方法一 双指针 首先去除掉字符串中的无用字符&#xff0c;并将英文字符转换为小写&#xff0c;然后使用双指针来判断是否是回文串…...

编程日记 2024/5/8 13:48:08

YOLOv8的训练、验证、预测及导出[目标检测实践篇]

这一部分内容主要介绍如何使用YOLOv8训练自己的数据集&#xff0c;并进行验证、预测及导出&#xff0c;采用代码和指令的两种方式&#xff0c;参考自官方文档&#xff1a;Detect - Ultralytics YOLOv8 Docs。实践篇不需要关注原理&#xff0c;只需要把流程跑通就行&#xff0c;…...

编程日记 2024/5/8 13:47:07

光伏远动通讯屏的组成

光伏远动通讯屏的组成 远动通讯屏主要用于电力系统数据采集与转发&#xff0c;远动通讯屏能够采集站内的各种数据&#xff0c;如模拟量、开关量和数字量等&#xff0c;并通过远动通讯规约将必要的数据上传至集控站或调度系统。这包括但不限于主变和输电线路的功率、电流、电压等…...

编程日记 2024/5/8 13:46:05

营销H5测试综述

H5页面是营销域最常见的一种运营形式&#xff0c;业务通过H5来提供服务&#xff0c;可以满足用户对于便捷、高效和低成本的需求。H5页面是业务直面用户的端点&#xff0c;其质量保证工作显得尤为重要。各业务的功能实现具有通用性&#xff0c;相应也有共性的测试方法&#xff0…...

编程日记 2024/5/8 13:45:04

【C++随记4】C++二进制位操作运算符

在C中&#xff0c;二进制位操作运算符允许你直接对整数类型的变量的位进行操作。这些运算符包括&#xff1a; 按位与&#xff08;Bitwise AND&#xff09;: & 按位或&#xff08;Bitwise OR&#xff09;: | 按位异或&#xff08;Bitwise XOR&#xff09;: ^ 按位取反&…...

编程日记 2024/5/8 13:43:01

风电厂数字孪生3D数据可视化交互展示构筑智慧化电厂管理体系

随着智慧电厂成为未来电力企业发展的必然趋势&#xff0c;深圳华锐视点紧跟时代步伐&#xff0c;引领技术革新&#xff0c;推出了能源3D可视化智慧管理系统。该系统以企业现有的数字化、信息化建设为基础&#xff0c;融合云平台、大数据、物联网、移动互联、机器人、VR虚拟现实…...

编程日记 2024/5/8 13:40:58

大模型市场爆发式增长，但生成式AI成功的关键是什么？

进入2024年&#xff0c;大模型市场正在爆发式增长。根据相关媒体的总结&#xff0c;2024年1-4 月被统计到的大模型相关中标金额已经达到2023年全部中标项目披露金额的77%左右&#xff1b;其中&#xff0c;从项目数量来看&#xff0c;应用类占63%、算力类占21%、大模型类占13%、…...

编程日记 2024/5/8 13:39:56

leetcode LCR088.使用最小花费爬楼梯

思路&#xff1a;DP 这道题相对来说比较基础&#xff0c;但是有时候容易出错的一点就是在dp递推的时候&#xff0c;由于我们的思路是从最后一步向着初始状态推的&#xff0c;所以在编写程序的时候也容易就直接推着走了。其实实际上我们倒着想只是为了推理&#xff0c;真正要递…...

编程日记 2024/5/8 13:38:55

【DevOps】怎么提升Elasticsearch 的搜索性能

一、怎么提升Elasticsearch 搜索性能 提升 Elasticsearch (ES) 的搜索性能可以从多个角度进行优化&#xff0c;包括硬件选择、配置调整、查询优化等。以下是一些具体的方法和建议&#xff1a; 1. 硬件优化 使用 SSDs&#xff1a; 使用固态硬盘&#xff08;SSD&#xff09;而…...

编程日记 2024/5/8 13:37:54

互联网产品创新：基于Qwen3-ASR-0.6B的在线教育实时字幕解决方案

互联网产品创新&#xff1a;基于Qwen3-ASR-0.6B的在线教育实时字幕解决方案 1. 引言 想象一下&#xff0c;你正在上一节重要的在线直播课&#xff0c;老师讲得飞快&#xff0c;有些专业术语没听清&#xff0c;或者因为网络波动声音断断续续。又或者&#xff0c;你身处一个嘈杂…...

编程新知 2026/3/30 5:24:20

Spring AI实战：从零构建智能聊天与图像生成应用

1. Spring AI初探&#xff1a;你的第一个智能聊天应用 记得第一次接触AI聊天功能时&#xff0c;我盯着那个能对答如流的对话框看了足足十分钟。现在用Spring AI框架&#xff0c;只需要四步就能实现同样的效果。先创建一个标准的Spring Boot项目&#xff0c;这个不用多说&#x…...

编程新知 2026/3/30 5:04:04

从零开始：用STM32CubeMX+Keil5开发计算器的5个关键陷阱与解决方案

从零开始&#xff1a;用STM32CubeMXKeil5开发计算器的5个关键陷阱与解决方案 当你第一次尝试用STM32CubeMX和Keil5开发一个计算器时&#xff0c;可能会觉得这不过是几个简单数学运算的组合。但真正动手后&#xff0c;你会发现从工具链配置到算法实现&#xff0c;处处都是"…...

编程新知 2026/3/30 3:22:48

570-‘基于坠落机制改进的混沌麻雀算法SSACD‘在23个标准测试函数上可直接运行Matlab语言

570-基于坠落机制改进的混沌麻雀算法SSACD在23个标准测试函数测试可直接运行 Matlab语言 改进点如下&#xff1a; 1.首先&#xff0c;引入Sinusoidal混沌映射和变尺度混沌策略对种群进行初始化&#xff0c;提高种群多样性使算法具备跳出局部最优解的能力 2.其次&#xff0c;引入…...

编程新知 2026/3/30 3:04:42

Windows Cleaner终极指南：三步解决C盘爆红，让电脑重获新生

Windows Cleaner终极指南&#xff1a;三步解决C盘爆红&#xff0c;让电脑重获新生 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服&#xff01; 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner 当你的C盘进度条变成刺眼的红色…...

编程新知 2026/3/30 2:52:39

别再手动组合特征了！用GBDT+LR搞定CTR预估，附Python实战代码与调参心得

GBDTLR&#xff1a;自动化特征工程的CTR预估实战指南 在推荐系统和广告投放领域&#xff0c;点击率&#xff08;CTR&#xff09;预估的准确性直接影响着平台的核心商业指标。传统手动特征工程方法在面对高维稀疏特征时往往力不从心&#xff0c;而GBDTLR的组合策略为我们提供了一…...

编程新知 2026/3/30 2:28:34

Transformers音频分类终极指南：3步实现智能环境音识别

Transformers音频分类终极指南&#xff1a;3步实现智能环境音识别 【免费下载链接】transformers huggingface/transformers: 是一个基于 Python 的自然语言处理库&#xff0c;它使用了 PostgreSQL 数据库存储数据。适合用于自然语言处理任务的开发和实现&#xff0c;特别是对于…...

编程新知 2026/3/30 2:22:31

chronyd服务端123端口未启动的深度排查与修复指南

1. 问题现象与初步判断 最近在搭建NTP时间同步架构时遇到了一个典型问题&#xff1a;作为中转节点的Master服务器123端口未启动&#xff0c;导致下游ServerA设备无法同步时间。具体表现为执行chronyc sources命令时&#xff0c;客户端显示^?符号&#xff08;表示无法连接服务端…...

编程新知 2026/3/30 2:14:29

保姆级移植教程：将正点原子ATK-IMU901官方例程从STM32 HAL库迁移到MSPM0G3507

跨平台传感器驱动移植实战&#xff1a;从STM32 HAL到MSPM0的代码重构方法论 当我们需要将成熟的传感器驱动迁移到新硬件平台时&#xff0c;往往面临底层接口差异带来的适配难题。本文将以正点原子ATK-IMU901十轴陀螺仪模块为例&#xff0c;详解如何将其官方STM32 HAL驱动移植到…...

编程新知 2026/3/30 1:56:23

别再踩坑了！Win10下从零编译Mamba-SSM 2.2.2的保姆级避坑指南（含修改好的源码包）

Win10平台Mamba-SSM 2.2.2终极编译指南&#xff1a;避开90%开发者踩过的坑 在深度学习领域&#xff0c;Mamba-SSM因其高效的状态空间模型架构而备受关注。然而&#xff0c;当开发者们兴冲冲地想在Windows 10平台上搭建这一环境时&#xff0c;往往会遭遇各种"玄学报错"…...

编程新知 2026/3/30 1:48:18