搭建vite项目
文章目录
- Vite 是一个基于 Webpack 的开发服务器,用于开发 Vue 3 和 Vite 应用程序
- 一、创建一个vite项目
- 二、集成Vue Router
- 1.安装 vue-router@next插件
- 2.在 src 目录下创建一个名为 router 的文件夹,并在其中创建一个名为 index.js 的文件。在这个文件中,我们将设置路由
- 3. 在 src/main.js 中,导入并使用刚刚创建的路由
- 4. 在 src/App.vue 中,添加一个 router-view 组件来显示当前路由的内容
- 总结
Vite 是一个基于 Webpack 的开发服务器,用于开发 Vue 3 和 Vite 应用程序
一、创建一个vite项目
Vite 需要 Node.js 版本 18+,20+。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。
npm create vite@latest
yarn create vite
yarn create vite my-vue-app --template vue
…
页面结构
↓↓↓

二、集成Vue Router
1.安装 vue-router@next插件
npm install vue-router@next
yarn add vue-router@next
2.在 src 目录下创建一个名为 router 的文件夹,并在其中创建一个名为 index.js 的文件。在这个文件中,我们将设置路由
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../view/home/index.vue'
import About from '../view/about/index.vue'const routes = [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}
]const router = createRouter({history: createWebHistory(),routes
})export default router
3. 在 src/main.js 中,导入并使用刚刚创建的路由
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'const app = createApp(App)
app.use(router)
app.mount('#app')
4. 在 src/App.vue 中,添加一个 router-view 组件来显示当前路由的内容
<template><div id="app"><router-view></router-view></div>
</template>
//-------------------
//vite.config.js 配置一下config
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({base: './',server: {host: '0.0.0.0'},plugins: [vue()],
})
…
总结
相关文章:
搭建vite项目
文章目录 Vite 是一个基于 Webpack 的开发服务器,用于开发 Vue 3 和 Vite 应用程序 一、创建一个vite项目二、集成Vue Router1.安装 vue-routernext插件2.在 src 目录下创建一个名为 router 的文件夹,并在其中创建一个名为 index.js 的文件。在这个文件中…...
Docker 安装mysql 主从复制
目录 1 MySql主从复制简介 1.1 主从复制的概念 1.2 主从复制的作用 2. 搭建主从复制 2.1 pull mysql 镜像 2.2 新建主服务器容器实例 3307 2.2.1 master创建 my.cnf 2.2.2 重启master 2.2.3 进入mysql 容器,创建同步用户 2.3 新建从服务器容器实例 3308…...
GPT每日面试题—如何实现二分查找
充分利用ChatGPT的优势,帮助我们快速准备前端面试。今日问题:如何实现二分查找? Q:如果在前端面试中,被问到如何实现二分查找,如果回答比较好,给出必要的代码示例 A:当被问到如何实…...
机器学习神经网络由哪些构成?
机器学习神经网络通常由以下几个主要组件构成: 1. **输入层(Input Layer)**:输入层接受来自数据源(例如图像、文本等)的原始输入数据。每个输入特征通常表示为输入层中的一个节点。 2. **隐藏层ÿ…...
代码随想录算法训练营day19 | 二叉树阶段性总结
各个部分题目的代码题解都在我往日的二叉树的博客中。 (day14到day22) 目录 二叉树理论基础二叉树的遍历方式深度优先遍历广度优先遍历 求二叉树的属性二叉树的修改与制造求二叉搜索树的属性二叉树公共最先问题二叉搜索树的修改与构造总结 二叉树理论基础 二叉树的理论基础参…...
数据库引论:3、中级SQL
一些更复杂的查询表达 3.1 连接表达式 拼接多张表的几种方式 3.1.1 自然连接 natural join,自动连接在所有共同属性上相同的元组 join… using( A 1 , A 2 , ⋯ A_1,A_2,\cdots A1,A2,⋯):使用括号里的属性进行自然连接,除了这些属性之外的共同…...
毕业设计:日志记录编写(3/17起更新中)
目录 3/171.配置阿里云python加速镜像:2. 安装python3.9版本3. 爬虫技术选择4. 数据抓取和整理5. 难点和挑战 3/241.数据库建表信息2.后续进度安排3. 数据处理和分析 3/17 当前周期目标:构建基本的python环境:运行爬虫程序 1.配置阿里云pytho…...
(一)基于IDEA的JAVA基础7
关系运算符 运算符 含义 范例 结果 等于 12 false ! 不等于 1!2 true > 大于 1>2 false < 小于 …...
MySQL数据库概念及MySQL的安装
文章目录 MySQL数据库一、数据库基本概念1、数据2、数据表3、数据库4、数据库管理系统(DBMS)4.1 数据库的建立和维护功能4.2 数据库的定义功能4.3 数据库的操纵功能4.4 数据库的运行管理功能4.5 数据库的通信功能(数据库与外界对接࿰…...
redis实际应用场景及并发问题的解决
业务场景 接下来要模拟的业务场景: 每当被普通攻击的时候,有千分之三的概率掉落金币,每回合最多爆出两个金币。 1.每个回合只有15秒。 2.每次普通攻击的时间间隔是0.5s 3.这个服务是一个集群(这个要求暂时不实现) 编写接口&…...
考研数学|汤家凤《1800》基础部分什么时候做完?
从我个人的经验来看,做完汤家凤1800的基础部分在第一轮复习中并不是必须的,但是可以作为一个有效的复习工具。 我认为汤家凤1800的基础部分确实涵盖了考研高数的基础知识点,并且题目难度适中,适合用来巩固基础。在第一轮复习中&a…...
JS的设计模式(23种)
JavaScript设计模式是指在JavaScript编程中普遍应用的一系列经过验证的最佳实践和可重用的解决方案模板,它们用来解决在软件设计中频繁出现的问题,如对象的创建、职责分配、对象间通信以及系统架构等。 设计模式并不特指某个具体的代码片段,…...
[自研开源] MyData v0.7.5 更新日志
开源地址:gitee | github 详细介绍:MyData 基于 Web API 的数据集成平台 部署文档:用 Docker 部署 MyData 使用手册:MyData 使用手册 试用体验:https://demo.mydata.work 交流Q群:430089673 介绍 MyData …...
3月份的倒数第二个周末有感
坐在图书馆的那一刻,忽然感觉时间的节奏开始放缓。今天周末因为我们两都有任务需要完成,所以就选了嘉定图书馆,不得不说嘉定新城远香湖附近的图书馆真的很有感觉。然我不经意回想起学校的时光,那是多么美好且短暂的时光。凝视着窗…...
Java 变得越来越像 Rust
Java 变得越来越像 Rust 介绍 随着编程的增强和复杂性越来越流行,许多编程语言也相互效仿。 Java 也不例外。 尽管社区内部存在问题,Rust 仍逐年赢得了开发人员的喜爱。并且有充分的理由:由于编译器,Rust 使开发人员能够避免整…...
通过git bash 或命令行ssh访问服务器 sftp上传下载文件
上传下载文件 sftp -P 端口 appywIP 示例:sftp -P 10022 appyw25.222.133.222 然后输入密码即可 ls 查看文件 lls 查看本地文件 cd 跳转 lcd 本地跳转 get ... 下载文件 put 本地文件名 远程文件夹 //上传文件 put -r 本地文件夹 远程文件夹 //上传文件夹服务器…...
27 OpenCV 凸包
文章目录 概念Graham扫描算法convexHull 凸包函数示例 概念 什么是凸包(Convex Hull),在一个多变形边缘或者内部任意两个点的连线都包含在多边形边界或者内部。 正式定义: 包含点集合S中所有点的最小凸多边形称为凸包 Graham扫描算法 首先选择Y方向最低…...
【GPT概念04】仅解码器(only decode)模型的解码策略
一、说明 在我之前的博客中,我们研究了关于生成式预训练转换器的整个概述,以及一篇关于生成式预训练转换器(GPT)的博客——预训练、微调和不同的用例应用。现在让我们看看所有仅解码器模型的解码策略是什么。 二、解码策略 在之前…...
蔚来-安全开发一面/二面
基本不怎么会渗透测试,本科期间有过大数据隐私保护(密码)的项目,硕士期间有个华为合作的项目一篇在投的ai安全论文 一面(45min) 1.介绍自己 2.介绍一下实习 3.场景题轰炸,主要针对实习中的场景,主要考察…...
Redis Cluster集群模式容器化部署
Redis Cluster集群模式容器化部署 安装Docker和docker-compose准备docker-compose文件准备Redis配置文件Linux内核参数优化启停Redis实例Redis集群搭建 环境准备: IP版本角色端口172.x.x.11RHEL 7.9master6379172.x.x.12RHEL 7.9master6379172.x.x.13RHEL 7.9maste…...
XCTF-web-easyupload
试了试php,php7,pht,phtml等,都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接,得到flag...
Android Wi-Fi 连接失败日志分析
1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分: 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析: CTR…...
日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻
在如今就业市场竞争日益激烈的背景下,越来越多的求职者将目光投向了日本及中日双语岗位。但是,一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧?面对生疏的日语交流环境,即便提前恶补了…...
简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...
Docker 运行 Kafka 带 SASL 认证教程
Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明:server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址:pdf 英文是纯手打的!论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误,若有发现欢迎评论指正!文章偏向于笔记,谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力
引言: 在人工智能快速发展的浪潮中,快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型(LLM)。该模型代表着该领域的重大突破,通过独特方式融合思考与非思考…...
ffmpeg(四):滤镜命令
FFmpeg 的滤镜命令是用于音视频处理中的强大工具,可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下: ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜: ffmpeg…...
微服务商城-商品微服务
数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...
让AI看见世界:MCP协议与服务器的工作原理
让AI看见世界:MCP协议与服务器的工作原理 MCP(Model Context Protocol)是一种创新的通信协议,旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天,MCP正成为连接AI与现实世界的重要桥梁。…...
