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）而…...
Python爬虫实战：研究MechanicalSoup库相关技术
一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...
铭豹扩展坞 USB转网口 突然无法识别解决方法
当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...
Cesium1.95中高性能加载1500个点
一、基本方式： 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...
-----深度优先搜索（DFS）实现)
c++ 面试题(1)-----深度优先搜索（DFS）实现
操作系统：ubuntu22.04 IDE:Visual Studio Code 编程语言：C11 题目描述 地上有一个 m 行 n 列的方格，从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子，但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...
DBAPI如何优雅的获取单条数据
API如何优雅的获取单条数据 案例一 对于查询类API，查询的是单条数据，比如根据主键ID查询用户信息，sql如下： select id, name, age from user where id #{id}API默认返回的数据格式是多条的，如下： {&qu…...
Linux-07 ubuntu 的 chrome 启动不了
文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了，报错如下四、启动不了，解决如下 总结 问题原因 在应用中可以看到chrome，但是打不开(说明：原来的ubuntu系统出问题了，这个是备用的硬盘&a…...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例，模拟20个网页的爬取，每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程：允许程序同时执行多个任务，提高IO密集型任务（如网络请求）的效率…...
pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)
目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关࿰…...
使用 SymPy 进行向量和矩阵的高级操作
在科学计算和工程领域，向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能，能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作，并通过具体…...
面向无人机海岸带生态系统监测的语义分割基准数据集
描述：海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而，目前该领域仍面临一个挑战，即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...