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

搭建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 的开发服务器&#xff0c;用于开发 Vue 3 和 Vite 应用程序 一、创建一个vite项目二、集成Vue Router1.安装 vue-routernext插件2.在 src 目录下创建一个名为 router 的文件夹&#xff0c;并在其中创建一个名为 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 容器&#xff0c;创建同步用户 2.3 新建从服务器容器实例 3308…...

GPT每日面试题—如何实现二分查找

充分利用ChatGPT的优势&#xff0c;帮助我们快速准备前端面试。今日问题&#xff1a;如何实现二分查找&#xff1f; Q&#xff1a;如果在前端面试中&#xff0c;被问到如何实现二分查找&#xff0c;如果回答比较好&#xff0c;给出必要的代码示例 A&#xff1a;当被问到如何实…...

机器学习神经网络由哪些构成?

机器学习神经网络通常由以下几个主要组件构成&#xff1a; 1. **输入层&#xff08;Input Layer&#xff09;**&#xff1a;输入层接受来自数据源&#xff08;例如图像、文本等&#xff09;的原始输入数据。每个输入特征通常表示为输入层中的一个节点。 2. **隐藏层&#xff…...

代码随想录算法训练营day19 | 二叉树阶段性总结

各个部分题目的代码题解都在我往日的二叉树的博客中。 (day14到day22) 目录 二叉树理论基础二叉树的遍历方式深度优先遍历广度优先遍历 求二叉树的属性二叉树的修改与制造求二叉搜索树的属性二叉树公共最先问题二叉搜索树的修改与构造总结 二叉树理论基础 二叉树的理论基础参…...

数据库引论:3、中级SQL

一些更复杂的查询表达 3.1 连接表达式 拼接多张表的几种方式 3.1.1 自然连接 natural join&#xff0c;自动连接在所有共同属性上相同的元组 join… using( A 1 , A 2 , ⋯ A_1,A_2,\cdots A1​,A2​,⋯):使用括号里的属性进行自然连接&#xff0c;除了这些属性之外的共同…...

毕业设计:日志记录编写(3/17起更新中)

目录 3/171.配置阿里云python加速镜像&#xff1a;2. 安装python3.9版本3. 爬虫技术选择4. 数据抓取和整理5. 难点和挑战 3/241.数据库建表信息2.后续进度安排3. 数据处理和分析 3/17 当前周期目标&#xff1a;构建基本的python环境&#xff1a;运行爬虫程序 1.配置阿里云pytho…...

(一)基于IDEA的JAVA基础7

关系运算符 运算符 含义 范例 结果 等于 12 false &#xff01; 不等于 1&#xff01;2 true > 大于 1>2 false < 小于 …...

MySQL数据库概念及MySQL的安装

文章目录 MySQL数据库一、数据库基本概念1、数据2、数据表3、数据库4、数据库管理系统&#xff08;DBMS&#xff09;4.1 数据库的建立和维护功能4.2 数据库的定义功能4.3 数据库的操纵功能4.4 数据库的运行管理功能4.5 数据库的通信功能&#xff08;数据库与外界对接&#xff0…...

redis实际应用场景及并发问题的解决

业务场景 接下来要模拟的业务场景: 每当被普通攻击的时候&#xff0c;有千分之三的概率掉落金币&#xff0c;每回合最多爆出两个金币。 1.每个回合只有15秒。 2.每次普通攻击的时间间隔是0.5s 3.这个服务是一个集群&#xff08;这个要求暂时不实现&#xff09; 编写接口&…...

考研数学|汤家凤《1800》基础部分什么时候做完?

从我个人的经验来看&#xff0c;做完汤家凤1800的基础部分在第一轮复习中并不是必须的&#xff0c;但是可以作为一个有效的复习工具。 我认为汤家凤1800的基础部分确实涵盖了考研高数的基础知识点&#xff0c;并且题目难度适中&#xff0c;适合用来巩固基础。在第一轮复习中&a…...

JS的设计模式(23种)

JavaScript设计模式是指在JavaScript编程中普遍应用的一系列经过验证的最佳实践和可重用的解决方案模板&#xff0c;它们用来解决在软件设计中频繁出现的问题&#xff0c;如对象的创建、职责分配、对象间通信以及系统架构等。 设计模式并不特指某个具体的代码片段&#xff0c;…...

[自研开源] MyData v0.7.5 更新日志

开源地址&#xff1a;gitee | github 详细介绍&#xff1a;MyData 基于 Web API 的数据集成平台 部署文档&#xff1a;用 Docker 部署 MyData 使用手册&#xff1a;MyData 使用手册 试用体验&#xff1a;https://demo.mydata.work 交流Q群&#xff1a;430089673 介绍 MyData …...

3月份的倒数第二个周末有感

坐在图书馆的那一刻&#xff0c;忽然感觉时间的节奏开始放缓。今天周末因为我们两都有任务需要完成&#xff0c;所以就选了嘉定图书馆&#xff0c;不得不说嘉定新城远香湖附近的图书馆真的很有感觉。然我不经意回想起学校的时光&#xff0c;那是多么美好且短暂的时光。凝视着窗…...

Java 变得越来越像 Rust

Java 变得越来越像 Rust 介绍 随着编程的增强和复杂性越来越流行&#xff0c;许多编程语言也相互效仿。 Java 也不例外。 尽管社区内部存在问题&#xff0c;Rust 仍逐年赢得了开发人员的喜爱。并且有充分的理由&#xff1a;由于编译器&#xff0c;Rust 使开发人员能够避免整…...

通过git bash 或命令行ssh访问服务器 sftp上传下载文件

上传下载文件 sftp -P 端口 appywIP 示例&#xff1a;sftp -P 10022 appyw25.222.133.222 然后输入密码即可 ls 查看文件 lls 查看本地文件 cd 跳转 lcd 本地跳转 get ... 下载文件 put 本地文件名 远程文件夹 //上传文件 put -r 本地文件夹 远程文件夹 //上传文件夹服务器…...

27 OpenCV 凸包

文章目录 概念Graham扫描算法convexHull 凸包函数示例 概念 什么是凸包(Convex Hull)&#xff0c;在一个多变形边缘或者内部任意两个点的连线都包含在多边形边界或者内部。 正式定义&#xff1a; 包含点集合S中所有点的最小凸多边形称为凸包 Graham扫描算法 首先选择Y方向最低…...

【GPT概念04】仅解码器(only decode)模型的解码策略

一、说明 在我之前的博客中&#xff0c;我们研究了关于生成式预训练转换器的整个概述&#xff0c;以及一篇关于生成式预训练转换器&#xff08;GPT&#xff09;的博客——预训练、微调和不同的用例应用。现在让我们看看所有仅解码器模型的解码策略是什么。 二、解码策略 在之前…...

蔚来-安全开发一面/二面

基本不怎么会渗透测试&#xff0c;本科期间有过大数据隐私保护(密码)的项目&#xff0c;硕士期间有个华为合作的项目一篇在投的ai安全论文 一面&#xff08;45min&#xff09; 1.介绍自己 2.介绍一下实习 3.场景题轰炸&#xff0c;主要针对实习中的场景&#xff0c;主要考察…...

Redis Cluster集群模式容器化部署

Redis Cluster集群模式容器化部署 安装Docker和docker-compose准备docker-compose文件准备Redis配置文件Linux内核参数优化启停Redis实例Redis集群搭建 环境准备&#xff1a; IP版本角色端口172.x.x.11RHEL 7.9master6379172.x.x.12RHEL 7.9master6379172.x.x.13RHEL 7.9maste…...

Vue3 图片标框功能实现方案

基于 Vue3 组合式 API 的图片标框&#xff08;画框、标注、选框&#xff09;完整实现&#xff0c;核心逻辑封装在 GetBoxes 组件里&#xff0c;复制就能用 一、功能说明 ✅ 在图片上鼠标拖拽画矩形框 ✅ 实时显示框坐标&#xff08;x, y, width, height&#xff09; ✅ 支持多…...

全链路压测实战:双十一级别的流量,我是这样扛住的

作为一名在质量保障领域摸爬滚打多年的测试工程师&#xff0c;我深知传统的单接口压测在如今分布式架构下的无力感。当业务流量达到双十一这种脉冲式、高并发的级别时&#xff0c;任何一个非核心链路上的“短板”都可能引发系统性的雪崩。全链路压测不再是选择题&#xff0c;而…...

大佬推荐的网络安全学习路线(从基础到高级,超级详细)

大佬推荐的网络安全学习路线&#xff08;从基础到高级&#xff0c;超级详细&#xff09; 说起网络安全&#xff0c;你可能会担心它是一个过时的行业。有人说&#xff0c;网络安全快卷死了&#xff0c;你既要攻又要防&#xff0c;并且随着技术的发展&#xff0c;你还要不断地学…...

基于IRS2092的200W D类功放设计:从PWM原理到保护电路实战

1. 项目概述与核心思路折腾音响功放&#xff0c;从经典的AB类玩到D类&#xff0c;感觉就像是从燃油车换到了电动车&#xff0c;动力响应和效率完全是两个维度。这次要聊的这块“200W Class-D Audio Power Amplifier [150115]”单板功放&#xff0c;就是一个非常典型的D类功放设…...

人工智能的伦理与安全:这3个问题,软件测试从业者必须重视

随着大语言模型、生成式AI的爆发式落地&#xff0c;人工智能已经从实验室走向千行百业的生产场景&#xff0c;深刻改变着软件开发与交付的逻辑。对于直接把控产品质量关口的软件测试从业者来说&#xff0c;我们的职责早已不再是单纯验证功能可用性、排查性能bug那么简单——AI系…...

3步零基础掌握星露谷物语SMAPI模组加载器:高效管理你的模组世界

3步零基础掌握星露谷物语SMAPI模组加载器&#xff1a;高效管理你的模组世界 【免费下载链接】SMAPI The modding API for Stardew Valley. 项目地址: https://gitcode.com/gh_mirrors/smap/SMAPI SMAPI&#xff08;Stardew Valley Modding API&#xff09;是星露谷物语官…...

3步搞定B站缓存视频转换:m4s转MP4的终极解决方案

3步搞定B站缓存视频转换&#xff1a;m4s转MP4的终极解决方案 【免费下载链接】m4s-converter 一个跨平台小工具&#xff0c;将bilibili缓存的m4s格式音视频文件合并成mp4 项目地址: https://gitcode.com/gh_mirrors/m4/m4s-converter 你是否曾经在B站缓存了珍贵的视频&a…...

MNE-Python 第9天学习笔记:源定位基础

一、什么是源定位&#xff1f; 1.1 通俗理解 到目前为止&#xff0c;我们分析的是"头皮上的脑电"&#xff1a;头皮电极 → 记录头皮表面的电位↓这就像在地球表面测量地震波我们想知道的是&#xff1a;震源在哪里&#xff1f;多深&#xff1f;源定位 从头皮电位反推…...

AI-eSIM 开启智联新入口,量讯物联助力企业把握万物智联新机遇

近期&#xff0c;在 2026 移动云大会 AI-eSIM 分论坛上&#xff0c;中国移动发布 AI-eSIM“139”多生态智能服务体系&#xff0c;引发物联网、智能终端与 AIoT 产业广泛关注。该体系以 1 个 AI-eSIM 芯片入口、3 大核心引擎、赋能 9 类重点场景&#xff0c;构建以 Token 为中心…...

用Arduino改造TDA7010T FM收音机:数字调谐与自动搜台实战

1. 项目概述&#xff1a;当复古芯片遇上现代微控制器翻出抽屉角落里那个积灰的Kemo B156N套件时&#xff0c;我压根没想到它会变成一个如此有趣的周末项目。这个套件的核心&#xff0c;是一颗来自上世纪八十年代的FM收音机芯片——TDA7010T。当年&#xff0c;它和它的前身TDA70…...