vue3项目的创建,vite+vue3+ts(3)- router

news2024/12/23 6:47:24

vue3 有三种写法:
1.compostion API : 还是按照vue2.0写法
2.组合式API:
3. 组合式API 语法糖(setup), 语法简洁(推荐使用这个)
写法:
4. 在.eslintrc.cjs 或者 .eslintrc.js中配置代码,是这个四个方法不用eslint检查,可以直接使用

globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly'
  },

现在正式准备开发了:
5. vue中跳转页面需要路由, 终端: npm install vue-router@4
在这里插入图片描述
6. 在src文件中, 新两个文件:router 和 views
在这里插入图片描述
src => views => home => indexName.vue(文件中)

<template>
  <div>
    首页
  </div>
</template>

src => views => login => indexName.vue(文件中)

<template>
  <div>登录</div>
</template>

src => router => index.ts(文件中)

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw [] = [
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/login/indexName.vue')
  },
  {
    path: '/home',
    name: 'home',
    component: () => import('../views/home/index.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

还需要将路由导入vue 中,在main.ts 文件中

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import router from './router/index'

createApp(App)
  .use(router)
  .mount('#app')

将路由渲染入口挂载在 App.vue 文件中,

<template>
  <router-view />
</template>

运行代码: npm run dev , 注意哦: 浏览器url地址加上"/login", http://127.0.0.1:0000/#/login

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

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

相关文章

聊聊计算机中的寄存器

文章目录前言数据寄存器(DR)地址寄存器(AR)程序状态寄存器(PSW)累加寄存器(AC)乘商寄存器(MQ)程序计数器(PC)指令寄存器(IR)MAR、MDR小结作者&#xff1a;小牛呼噜噜 | https://xiaoniuhululu.com 计算机内功、JAVA底层、面试相关资料等更多精彩文章在公众号「小牛呼噜噜 」 前…

国内第一篇讲解减少卡顿的代码级详细文章

原文链接&#xff1a;原文链接 系统网站应用出现过卡顿&#xff0c;但却不知道如何优化。国内第一篇讲如何减少卡顿的代码级别详细文章&#xff0c;也是性能优化系列文章中的一篇&#xff0c;欢迎点赞、关注&#xff0c;也欢迎对其中的内容进行评论。 经常听人说&#xff0c;“…

配置CentOS为ssh免密码互相通信

文章目录配置CentOS为ssh免密码互相通信配置4台CentOS的集群配置4台CentOS为ssh免密码互相通信配置CentOS为ssh免密码互相通信 配置4台CentOS的集群 修改 /etc/sysconfig/network-scripts/ifcfg-ens33 文件&#xff0c;配置虚拟机 IP&#xff0c;以其中一个虚拟机为例&#x…

html实现贪吃蛇游戏(源码)

文章目录1.实现贪吃蛇1.1 界面设计1.2 界面动态效果1.3 界面主代码2.资源目录源码下载作者&#xff1a;xcLeigh 文章说明 html实现贪吃蛇源码&#xff0c;酷炫的界面效果&#xff0c;点击开始游戏后&#xff0c;通过键盘的上下左右按键&#xff0c;操作移动方向&#xff0c;代码…

@DateTimeFormat和@JsonFormat介绍

文章目录1.DateTimeFormat注解1.1DateTimeFormat注解简介1.2DateTimeFormat注解的功能1.3DateTimeFormat注解的注意点1.4DateTimeFormat功能演示1.4.1类型转换异常情况测试1.4.2接收url路径传参格式测试1.4.3接收Form-Data数据格式测试1.4.4接收JSON数据格式测试2.JsonFormat注…

python实现基于RPC协议的接口自动化测试

什么是RPC RPC&#xff08;Remote Procedure Call&#xff09;远程过程调用协议是一个用于建立适当框架的协议。从本质上讲&#xff0c;它使一台机器上的程序能够调用另一台机器上的子程序&#xff0c;而不会意识到它是远程的。 RPC 是一种软件通信协议&#xff0c;一个程序可…

Day1:垂直水平居中方式(至少6种,必须包含弹性盒子)

目录 垂直水平居中方式 方式1&#xff1a;弹f性盒子(1) &#xff08;推荐&#xff09; 方式2&#xff1a;弹性盒子(2) &#xff08;推荐&#xff09; 方式3&#xff1a;弹性盒子(3) 方式4&#xff1a;grid布局&#xff08;1&#xff09; &#xff08;推荐&#xff09; 方…

vs2019 编译调试 QT Creator 源码

vs2019 编译调试 QT Creator 源码 开始使用Qt Creator 5.15.2 调试编译 Qt Creator 6.0.2源码&#xff0c;对源码进行了 裁剪&#xff0c;将一些暂时用不到的文件删除&#xff0c;比如plugins里面的绝大部分文件。然后使用vs2019打开工程&#xff0c;进行编译调试。下面对这个…

IDEA2022插件:EasyCode一键生成增删改查代码

IDEA2022插件&#xff1a;EasyCode一键生成增删改查代码 文章目录IDEA2022插件&#xff1a;EasyCode一键生成增删改查代码建表下载插件IDEA连接数据源引入必要依赖配置SpringBoot数据库连接使用EasyCode生成代码生成效果启动测试小错误接口测试自行配置更好用尾述结语建表 新建…

【案例源码公开】国产AD+全志T3开发案例,为能源电力行业排忧解难!8/16通道

前 言 本文主要介绍基于全志科技T3(ARM Cortex-A7)国产处理器的8/16通道AD采集开发案例,使用核芯互联CL1606/CL1616国产AD芯片,亦适用于ADI AD7606/AD7616。CL1606/CL1616与AD7606/AD7616软硬件兼容。 备注: (1)创龙科技TL7606I模块使用AD芯片为核芯互联CL1606或ADI AD…

【C语言】初始C语言系列 代码详解 _ 编程入门 _【内附代码和图片】_ [初阶篇 _ 总结复习]

【前言】 本篇文章为初始C语言部分&#xff0c;C语言是编程的入门语言&#xff0c;所以也说是编程入门&#xff1b; 学好C语言的入门内容&#xff0c;才能真正的入门编程&#xff0c;而C语言的学习对于刚入门的同学还是有一些难度的&#xff0c;需要踏踏实实的自己去理解。 在此…

REDIS篇(4)——命令执行过程(readQueryFromClient)

前面讲过&#xff0c;ae循环在收到客户端请求时&#xff0c;会调用请求处理器——acceptTcpHandler &#xff0c;而请求处理器会创建新的套接字并监听和绑定命令处理器——readQueryFromClient。本篇着重分析命令的执行过程。 大概可分为&#xff1a; 1、读取并分析套接口中协…

QT学习_06_UI设计

1 创建项目 前5篇的学习笔记都没有用到ui&#xff0c;从现在开始&#xff0c;就要用这个ui了 创建项目的时候&#xff0c;把这个Generate form√上 项目文件中&#xff0c;就多了mainwindow.ui 2 ui设计界面的介绍 双击这个.ui文件&#xff0c;就可以进入设计界面 下面简单的…

字节跳动内推软件测试【自动化测试】岗,最低年薪50W+

目录 字节跳动内推 测试开发工程师技能成长路径 字节跳动内推 今年大环境不好&#xff0c;内卷的厉害&#xff0c;薪资待遇好的工作机会更是难得。最近脉脉职言区有一条讨论火了&#xff1a; 哪家互联网公司薪资最‘厉害’&#xff1f; 下面的评论多为字节跳动&#xff0c;还炸…

JAVA计算机毕业设计网约车管理系统(附源码、数据库)

JAVA计算机毕业设计网约车管理系统&#xff08;附源码、数据库&#xff09; 目运行 环境项配置&#xff1a; Jdk1.8 Tomcat8.5 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目…

毕业设计源码-计算机毕业设计源码

2022年09月 09/28文件文档在线预览解决方案09/22商城系统09/22知识分享与团队协同软件09/22共享充电桩小程序09/22共享雨伞租借系统09/22小程序博客09/22共享充电宝小程序09/22美容美发小程序09/22民宿小程序09/22兼职小程序09/22相亲小程序09/22贴身管家小程序09/22扫码点餐小…

Spring IOC 核心流程介绍

前言 接下来我们编写入口代码&#xff0c;跟代码梳理一下Spring IOC一些重要的方法节点。IOC有12个比较重要的方法&#xff0c;把这12个方法学习一下&#xff0c;整个Spring IOC基本就差不多了。 编写Spring IOC入口 1、创建需要被管理的类 接口类&#xff1a; package se…

蜜罐技术二三事

目录 1. 蜜罐技术介绍 1.1 蜜罐技术是什么 1.2 蜜罐分类 2. 使用蜜罐技术获取信息 2.1 初始化项目 2.2 读取 PFRO.log 文件 2.2.1 PFRO.log 作用及位置 2.2.2 使用 fs 读取 PFRO.log 文件 2.2.3 关于 buffer 与字符编码&#xff08;扩展&#xff09; 2.3 使用 正则表…

美国FBA海运有哪几种渠道

美国FBA海运有两种渠道&#xff0c;下面具体来看下这两种渠道&#xff1a; 一、Matson美森(CLX/CCX/CLX) 1、CLX美森限时达。时效性&#xff1a;开船后12-18天内交UPS配送(通常在13-15天); 2、CCX美森正班船。时效性&#xff1a;开船后16-22天内交UPS配送(通常在18-20天); 3、C…

基于改进PSO-ABC算法的机器人路径规划(Matlab代码实现)

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f468;‍&#x1f4bb;4 Matlab代码 &#x1f4a5;1 概述 系统试图借助人工蜂群针对粒子群算法和蜂群算法在寻优中存在的一些早熟和收敛速精度不高等问题,本文分别对粒子算法和蜂群算法…