vue项目开发流程
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,修改如下所示，添加server的host和port。 import { de…...
【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.…...
 [共16篇])
即时通讯技术文集（第37期）：IM代码入门实践(Part1) [共16篇]
为了更好地分类阅读 52im.net 总计1000多篇精编文章，我将在每周三推送新的一期技术文集，本次是第37 期。 [- 1 -] 一种Android端IM智能心跳算法的设计与实现探讨（含样例代码） [链接] http://www.52im.net/thread-783-1-1.html […...
UV胶具有哪些特点和优势
1. 快速固化：UV胶在紫外线照射下能够迅速固化，固化时间通常在几秒钟到几分钟之间，大大提高了生产效率。 2. 高粘接强度：UV胶固化后，具有较高的粘接强度，能够在各种材料上实现可靠的粘接，提供持…...
python面试之mysql引擎选择问题
MySQL数据库提供了多种存储引擎，每种存储引擎有其特定的优势和场景适用。以下是几种常见的MySQL存储引擎及其特点： InnoDB： 支持事务，有回滚和提交事务的功能。 支持行级锁定，提供更高的并发。 支持外键约束&#…...
MT3031 AK IOI
思路：把每个节点存到堆（大根堆）里。 如果节点放入后总时间没有超过m则放入堆中；如果总时间超过了，就看堆头元素是否比新元素大。如果大，则删除堆头（反悔贪心）。 注意别忘记开long l…...
UE5自动生成地形二：自动生成插件
UE5自动生成地形二：自动生成插件 Polycam使用步骤 本篇主要讲解UE5的一些自动生成地形的插件 Polycam 此插件是通过现实的多角度照片自动建模生成地形数据，也是免费的。这里感谢B站up主古道兮峰的分享 Polycam网站 插件下载地址 插件网盘下载 提取码&a…...
二分图（染色法与匈牙利算法）
二分图当且仅当一个图中不含奇数环 1.染色法 简单来说，将顶点分成两类，边只存在于不同类顶点之间，同类顶点之间没有边。 e.g. 如果判断一个图是不是二分图？ 开始对任意一未染色的顶点染色。 判断其相邻的顶点中，若未…...
ReactFlow的ReactFlow实例事件传参undefined处理状态切换
1.问题 ReactFlow的ReactFlow实例有些事件我们在不同的状态下并不需要，而且有时候传参会出现其它渲染效果，比如只读状态下我们不想要拖拉拽onEdgesChange连线重连或删除的功能。 2.思路 事件名称类型默认值onEdgesChange(changes: EdgeChange[]) >…...
Dockerfile 和 Docker Compose
Dockerfile 和 Docker Compose 是 Docker 生态系统中两个重要的组成部分，它们分别服务于不同的目的，但共同协助开发者和运维人员高效地管理和部署容器化应用。 Dockerfile Dockerfile 是一个文本文件，包含了构建 Docker 镜像所需的一系列指…...
多个文件 import 的相同模块里的对象
多个文件 import 的相同模块里的对象，是否永远都是同一个对象？ 在store的index.js中 import vue from ‘vue’ import Vuex from ‘vuex’ 并配置有关对象 然后再app.vue中配置vm 在不同的文件中 import一个vue对象，在任何情况下&#…...
面试经典150题——验证回文串
面试经典150题 day25 题目来源我的题解方法一 双指针方法二 双指针 空间优化 题目来源 力扣每日一题；题序：125 我的题解 方法一 双指针 首先去除掉字符串中的无用字符，并将英文字符转换为小写，然后使用双指针来判断是否是回文串…...
YOLOv8的训练、验证、预测及导出[目标检测实践篇]
这一部分内容主要介绍如何使用YOLOv8训练自己的数据集，并进行验证、预测及导出，采用代码和指令的两种方式，参考自官方文档：Detect - Ultralytics YOLOv8 Docs。实践篇不需要关注原理，只需要把流程跑通就行，…...
光伏远动通讯屏的组成
光伏远动通讯屏的组成 远动通讯屏主要用于电力系统数据采集与转发，远动通讯屏能够采集站内的各种数据，如模拟量、开关量和数字量等，并通过远动通讯规约将必要的数据上传至集控站或调度系统。这包括但不限于主变和输电线路的功率、电流、电压等…...
营销H5测试综述
H5页面是营销域最常见的一种运营形式，业务通过H5来提供服务，可以满足用户对于便捷、高效和低成本的需求。H5页面是业务直面用户的端点，其质量保证工作显得尤为重要。各业务的功能实现具有通用性，相应也有共性的测试方法࿰…...
【C++随记4】C++二进制位操作运算符
在C中，二进制位操作运算符允许你直接对整数类型的变量的位进行操作。这些运算符包括： 按位与（Bitwise AND）: & 按位或（Bitwise OR）: | 按位异或（Bitwise XOR）: ^ 按位取反&…...
风电厂数字孪生3D数据可视化交互展示构筑智慧化电厂管理体系
随着智慧电厂成为未来电力企业发展的必然趋势，深圳华锐视点紧跟时代步伐，引领技术革新，推出了能源3D可视化智慧管理系统。该系统以企业现有的数字化、信息化建设为基础，融合云平台、大数据、物联网、移动互联、机器人、VR虚拟现实…...
大模型市场爆发式增长，但生成式AI成功的关键是什么？
进入2024年，大模型市场正在爆发式增长。根据相关媒体的总结，2024年1-4 月被统计到的大模型相关中标金额已经达到2023年全部中标项目披露金额的77%左右；其中，从项目数量来看，应用类占63%、算力类占21%、大模型类占13%、…...
leetcode LCR088.使用最小花费爬楼梯
思路：DP 这道题相对来说比较基础，但是有时候容易出错的一点就是在dp递推的时候，由于我们的思路是从最后一步向着初始状态推的，所以在编写程序的时候也容易就直接推着走了。其实实际上我们倒着想只是为了推理，真正要递…...
【DevOps】怎么提升Elasticsearch 的搜索性能
一、怎么提升Elasticsearch 搜索性能 提升 Elasticsearch (ES) 的搜索性能可以从多个角度进行优化，包括硬件选择、配置调整、查询优化等。以下是一些具体的方法和建议： 1. 硬件优化 使用 SSDs： 使用固态硬盘（SSD）而…...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中，iftop是网络管理的得力助手，能实时监控网络流量、连接情况等，帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...
stm32G473的flash模式是单bank还是双bank？
今天突然有人stm32G473的flash模式是单bank还是双bank？由于时间太久，我真忘记了。搜搜发现，还真有人和我一样。见下面的链接：https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...
基于FPGA的PID算法学习———实现PID比例控制算法
基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容：参考网站： PID算法控制 PID即：Proportional（比例）、Integral（积分&…...
日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする
日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1） にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために ＆ ように（３）そう（４）にする3、…...
macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用
文章目录 问题现象问题原因解决办法 问题现象 macOS启动台（Launchpad）多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显，都是Google家的办公全家桶。这些应用并不是通过独立安装的…...
如何为服务器生成TLS证书
TLS（Transport Layer Security）证书是确保网络通信安全的重要手段，它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书，可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...
Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）
参考官方文档：https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java（供 Kotlin 使用） 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...
什么是Ansible Jinja2
理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具，可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板，允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板，并通…...
A2A JS SDK 完整教程：快速入门指南
目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库ÿ…...
MySQL JOIN 表过多的优化思路
当 MySQL 查询涉及大量表 JOIN 时，性能会显著下降。以下是优化思路和简易实现方法： 一、核心优化思路 减少 JOIN 数量 数据冗余：添加必要的冗余字段（如订单表直接存储用户名）合并表：将频繁关联的小表合并成…...