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）而…...
)
Java 语言特性(面试系列1)
一、面向对象编程 1. 封装（Encapsulation） 定义：将数据（属性）和操作数据的方法绑定在一起，通过访问控制符（private、protected、public）隐藏内部实现细节。示例： public …...
可靠性+灵活性：电力载波技术在楼宇自控中的核心价值
可靠性灵活性：电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中，电力载波技术（PLC）凭借其独特的优势，正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据，无需额外布…...
1.3 VSCode安装与环境配置
进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件，然后打开终端，进入下载文件夹，键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...
SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现
摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序，以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务，提供稳定高效的数据处理与业务逻辑支持；利用 uniapp 实现跨平台前…...
CMake控制VS2022项目文件分组
我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种） 方法描述是否推荐…...
Web 架构之 CDN 加速原理与落地实践
文章目录 一、思维导图二、正文内容（一）CDN 基础概念1. 定义2. 组成部分 （二）CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 （三）CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 …...
深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用
文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么？1.1.2 感知机的工作原理 1.2 感知机的简单应用：基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...
tomcat入门
1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效，稳定，易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...
Oracle11g安装包
Oracle 11g安装包 适用于windows系统，64位 下载路径 oracle 11g 安装包...
uniapp 实现腾讯云IM群文件上传下载功能
UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中，群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS，在uniapp中实现： 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...