当前位置: 首页 > 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…...

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

Go 语言并发编程基础:无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

使用LangGraph和LangSmith构建多智能体人工智能系统

现在&#xff0c;通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战&#xff0c;比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...

BLEU评分:机器翻译质量评估的黄金标准

BLEU评分&#xff1a;机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域&#xff0c;衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标&#xff0c;自2002年由IBM的Kishore Papineni等人提出以来&#xff0c;…...

libfmt: 现代C++的格式化工具库介绍与酷炫功能

libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库&#xff0c;提供了高效、安全的文本格式化功能&#xff0c;是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全&#xff1a…...

认识CMake并使用CMake构建自己的第一个项目

1.CMake的作用和优势 跨平台支持&#xff1a;CMake支持多种操作系统和编译器&#xff0c;使用同一份构建配置可以在不同的环境中使用 简化配置&#xff1a;通过CMakeLists.txt文件&#xff0c;用户可以定义项目结构、依赖项、编译选项等&#xff0c;无需手动编写复杂的构建脚本…...

从物理机到云原生:全面解析计算虚拟化技术的演进与应用

前言&#xff1a;我的虚拟化技术探索之旅 我最早接触"虚拟机"的概念是从Java开始的——JVM&#xff08;Java Virtual Machine&#xff09;让"一次编写&#xff0c;到处运行"成为可能。这个软件层面的虚拟化让我着迷&#xff0c;但直到后来接触VMware和Doc…...

Spring AOP代理对象生成原理

代理对象生成的关键类是【AnnotationAwareAspectJAutoProxyCreator】&#xff0c;这个类继承了【BeanPostProcessor】是一个后置处理器 在bean对象生命周期中初始化时执行【org.springframework.beans.factory.config.BeanPostProcessor#postProcessAfterInitialization】方法时…...