搭建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()],
})


总结

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/769140.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

element-ui radio-group 组件源码分享

接着上篇的 radio 组件源码分享&#xff0c;继续探索 radio-group 源码部分的实现过程&#xff0c;主要从以下四个方面来讲解&#xff1a; 1、el-radio-group 页面结构 2、el-radio-group 组件属性 3、el-radio-group 组件方法 4、核心代码部分 一、页面结构&#xff0c;如…

docker 不同架构镜像融合问题解决

1、背景 docker 作为目前容器的标准之一&#xff0c;但是对于多种架构的平台的混合编译支撑不是很好。因此衍生了镜像融合&#xff0c;分别将多种不同的架构构建好&#xff0c;然后将镜像进行融合上传。拉取镜像的会根据当前系统的架构拉取不同的镜像&#xff0c;也可以通过 -…

Linux内核err.h文件分析

在阅读和编写内核相关的代码时&#xff0c;经常会看到IS_ERR、ERR_PTR等函数。这些函数在内核头文件的err.h中。以我服务器的代码为例&#xff0c;内核版本为5.15。 这个文件的代码如下&#xff1a; /* SPDX-License-Identifier: GPL-2.0 */ #ifndef _LINUX_ERR_H #define _L…

基于nodejs+vue在线作业管理系统的设计与实现python-flask-django-php

这种个性化的网络系统管理更重视相互协调和管理合作,能激发管理者的创造性和主动性,这对在线作业管理系统来说非常有益。 关键词&#xff1a;在线作业管理系统&#xff0c;nodejs语言&#xff0c;express框架&#xff0c; 前端技术&#xff1a;nodejsvueelementui, Express 框架…

易源堂梵仕哲品牌新品发布会

祥龙启新&#xff0c;非凡无际&#xff01;2024年3月16日&#xff0c;上海易源堂集团梵仕哲品牌新品发布会在有着“山水宁海,寿者之乡”称号的浙江宁海顺利召开&#xff1b;易源堂集团联合创始人集团副总经理李振雨、易源堂集团营销策划总监曹斌&#xff0c;易源堂副总经理姚军…

mysql 用户管理-账户管理

学习了《mysql 用户管理-权限表》。接着学习更常用的的账户管理。 2&#xff0c;账户管理 MySQL提供许多语句用来管理用户账号,这些语句可以用来管理包括登录和退出MySQL服务器、创建用户、删除用户、密码管理和权限管理等内容。MySQL 数据库的安全性&#xff0c;需要通过账户管…

注册马来西亚商标常见问题

马来西亚商标法于1983年9月1日正式生效。这部商标法废除了马来亚、沙巴和沙捞越三地区各自的商标法规和申请程序&#xff0c;使马来西亚有了一部统一商标法。此外&#xff0c;马来西亚有关商标的法规包括1983年9月1日同时生效的《1983年商标法实施细则》。在马来西亚&#xff0…

Xcode-双架构arm64 x86_64编译

要启用通用构建&#xff0c;在最新版本的 Xcode 中&#xff0c;请打开您的项目设置&#xff0c;然后依次选择&#xff1a; 1. “Build Settings” 选项卡。 2. 在顶部输入框中输入 “Architectures”。 3. 在 “Architectures” 下拉列表中选择 “Other”。 4. 在输入框中输入 …

国内git最新版本下载链接2.44

git官网地址:Git - Downloading Package (git-scm.com) 蓝奏云: ​​​​​​gGit-2.44.0-64-bit.exe - 蓝奏云 git仓库地址:git/git: Git Source Code Mirror - This is a publish-only repository but pull requests can be turned into patches to the mailing list via …

2024常用接口抓包以及接口测试工具总结【建议收藏】

接口 统称为API&#xff0c;程序与程序之间的对接、交接。 接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点&#xff0c;主要是为了检验不同组件&#xff08;模块&#xff09;之间数据的传递是否正确&#xff0c;同时接口测试还要测试当前系统与第三方…

谈谈我对 AIGC 趋势下软件工程重塑的理解

作者&#xff1a;陈鑫 今天给大家带来的话题是 AIGC 趋势下的软件工程重塑。今天这个话题主要分为以下四大部分。 第一部分是 AI 是否已经成为软件研发的必选项&#xff1b;第二部分是 AI 对于软件研发的挑战及智能化机会&#xff0c;第三部分是企业落地软件研发智能化的策略…

MySQL的事务深入理解和存储系统

目录 一、事务的基本理论 1.事务的隔离 1.1事务之间的相互影响 1.2事物隔离级别 2.查询和设置事物隔离级别 2.1查询全局事务隔离级别 2.2查询会话事物隔离级别 2.3设置全局事务隔离级别 2.4设置会话事务隔离级别 ​编辑3.事务控制语句 ​编辑3.1提交事务 ​编辑3.2…

H3C技术大全复现之高级路由交换技术 1

华子目录 VLAN 基本技术VLANIEEE 802.1Q交换机端口类型MVRP协议实验测试 VLAN扩展技术Super VLAN产生背景Super vlan&#xff08;相当于vlanif接口&#xff0c;也属于虚拟接口&#xff0c;可以充当网关&#xff09;Sub vlan&#xff08;普通vlan&#xff09;关于代理ARP普通代理…

【C语言】编译链接

1、宏&#xff08;***&#xff09; 1.1#define定义宏 #define 机制包括了一个规定&#xff0c;允许把参数替换到文本中&#xff0c;这种实现通常称为宏&#xff08;macro&#xff09;或定义 宏&#xff08;define macro&#xff09;。 注意&#xff1a;用于对数值表达式进行求…

Java毕业设计-基于springboot开发的网上图书商城平台-毕业论文+答辩PPT(附源代码+演示视频)

文章目录 前言一、毕设成果演示&#xff08;源代码在文末&#xff09;二、毕设摘要展示1、开发说明2、需求分析3、系统功能结构 三、系统实现展示1、系统功能模块2、管理员功能模块3、卖家功能模块 四、毕设内容和源代码获取总结 Java毕业设计-基于springboot开发的网上图书商城…

taro之Swiper的使用

图样&#xff1a; 往往我们需要轮播图去显示我们想要的图片之类的 这是工作的代码 <View classNametop-title><SwiperclassNamebanner-swiperinterval{3000}circularautoplay>{homeBannerList.map((item) > {return (<SwiperItem key{item.id}><View…

apisix创建https

总结了下apisix 使用https 的问题和方法 1、apisix 默认https 端口是9443 2、apisix 需要上传证书后才可以使用https 否二curl测试会报错 SSL routines:CONNECT_CR_SRVR_HELLO 3、apisix 上传证书方法 我是使用的自签名证书&#xff0c;注意自签名证书的Common Name 要写你…

HCIP —— 生成树 (下)

目录 STP&#xff08;生成树&#xff09;的角色选举 根网桥 根端口 选举规则&#xff1a; 指定端口 生成树的端口状态 STP的接口状态&#xff1a;禁用、阻塞、侦听、学习、转发 五种状态 禁用状态 阻塞状态 侦听状态 学习状态 转发状态 当生成树拓扑结构发生变化 …

一文6000字从0到1使用Locust做性能测试【建议收藏】

01、Locust介绍 Locust 一个开源性能测试工具&#xff0c;使用Python代码来定义用户行为&#xff0c;用它可以模拟百万计的并发用户访问你的系统。 性能工具对比&#xff1a; LoadRunner 是非常有名的商业性能测试工具&#xff0c;功能非常强大。使用也比较复杂&#xff0c;目…

【漏洞复现】科立讯通信指挥调度平台editemedia.php sql注入漏洞

漏洞描述 在20240318之前的福建科立讯通信指挥调度平台中发现了一个漏洞。该漏洞被归类为关键级别,影响文件/api/client/editemedia.php的未知部分。通过操纵参数number/enterprise_uuid可导致SQL注入。攻击可能会远程发起。 免责声明 技术文章仅供参考,任何个人和组织使…