vue3+vite+ts日常学习,项目笔记(1)

news/2024/3/29 3:33:27/文章来源:https://blog.csdn.net/qq_41163341/article/details/129257849

项目搭建

查看自己的node版本

node -v

选择使用使用vite2来搭建项目

npm init vite@latest

其他的按照文档进行

官网链接:https://vitejs.cn/guide/#scaffolding-your-first-vite-project

vite 配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({base:'/front/',plugins: [vue()],server: {hmr: { overlay: false }, // 禁用或配置 HMR 连接 设置 server.hmr.overlay 为 false 可以禁用服务器错误遮罩层// 服务配置port: 4396,    // 类型: number 指定服务器端口;open: '/front/index',   // 类型: boolean | string在服务器启动时自动在浏览器中打开应用程序;cors: true,  // 类型: boolean | CorsOptions 为开发服务器配置 CORS。默认启用并允许任何源proxy: {    // 类型: Record<string, string | ProxyOp 为开发服务器配置自定义代理规则'/api': {target: '0.0.0.0',changeOrigin: true,secure: false,rewrite: (path) => path.replace('/api', '')}},},
})

更多配置:https://juejin.cn/post/7139372943661858830

也可以去官网查看配置

配置路由

npm加载依赖

npm install vue-router@4

在src新建文件夹,配置文件router文件

import {createRouter,createMemoryHistory,RouteRecordRaw
} from 'vue-router'export const constantRoutes:Array<RouteRecordRaw> = [{path:'/',name:"首页",meta:{title:'第一页'},component: () => import('../view/home/index.vue'),},{path:'/login',name:'登录页',meta:{},component: () => import('../view/login/index.vue'),}
]
// 返回当前router对象
const router = createRouter({history:createMemoryHistory(),scrollBehavior:() =>({top:0,}),routes:constantRoutes
})export default router

在mian文件中使用路由

import router from './router/index'
createApp(App).use(router)

在app.vue中配置路由出口页面

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

官网配置链接:https://router.vuejs.org/zh/guide/

简单测试页面

一个index主页面
一个login页面

实现页面跳转,路由切换

<template><div><h1 @click="goLogin()">index</h1></div>
</template><script lang="ts">
import { useRouter } from 'vue-router';export default {setup(){let router = useRouter()function goLogin() {router.push('/login')}return {goLogin}}
}
</script><style></style>

注意事项:
1.vue3的事件绑定,需要返回方法,方能使用
2.使用route需要引入后,才能使用
3.useRouter返回 router 实例。相当于在模板中使用 $router。必须在 setup() 中调用。

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

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

相关文章

C++修炼之练气期一层——命名空间

目录 1.引例 2.命名空间的定义 3.命名空间的使用 4.命名空间使用注意事项 1.引例 #include <stdio.h> #include <stdlib.h>int rand 10;int main() {printf("%d\n", rand);return 0; } 当我们用C语言写下这样的代码&#xff0c;看着并没有什么语法…

【手把手一起学习】(七) Altium Designer 20常用PCB设计规则

1 常用PCB设计规则 PCB规则设计是PCB设计中至关重要的环节&#xff0c;它约束了电气要求、布线方式、器件摆放位置等&#xff0c;为后续的手动布局、布线提供依据。完善的PCB规则设计&#xff0c;可以减少设计中的错误&#xff0c;提高PCB设计效率。 1.1 PCB设计规则管理器 …

谷歌搜索技巧大全 | 谷歌高级搜索语法指令

谷歌搜索技巧是利用各种高级搜索语法或者搜索指令&#xff0c;让我们能够使用Google进行精确化的搜索&#xff0c;外贸找客户和学术文件查找都可以应用到这些搜索技巧。(大部分命令也适用百度搜索)。Google通过互联网收集数据&#xff0c;抓取有意义的信息&#xff0c;将其存储…

【知识图谱】架构-特点-缺点简介

架构物联网、云计算、人工智能等新一代信息技术的迅猛发展&#xff0c;带来了制造业的新一轮突破&#xff0c;推动着制造系统向智能化方向发展&#xff0c;驱动着未来制造模式的创新。其中数据和知识是实现制造业与新一代信息技术融合的基础&#xff0c;是实现智能制造的保障。…

C++杂谈(一)

前言 本系列也是慢更系列&#xff0c;主要收纳一些还不够单独成系列的C的杂项问题&#xff0c;或是一些与C有关&#xff0c;但不属于核心知识的一些旁系问题。 关于C与C的关系 「学C要先学C吗&#xff1f;」 「C和C是不是完全不同的两个语言&#xff1f;」 「这个语法是C的还…

Android 动画详解

Android动画的分类与使用学习Android必不可少的就是动画的使用了&#xff0c;在Android版本迭代的过程中&#xff0c;出现了很多动画框架&#xff0c;这里做一个总结。Android动画类型分类逐帧动画【Frame Animation】&#xff0c;即顺序播放事先准备的图片。补间动画【Tween A…

NSGA-Ⅲ源代码

NSGA-Ⅲ源代码如下&#xff0c;供大家学习和应用。该算法在梯级水电-火电的应用订阅专栏即可查看&#xff1a; 1、主函数 % % Copyright (c) 2016, Mostapha Kalami Heris & Yarpiz (www.yarpiz.com) % All rights reserved. Please read the "LICENSE" file…

前端经典react面试题及答案

为什么 React 元素有一个 $$typeof 属性 目的是为了防止 XSS 攻击。因为 Synbol 无法被序列化&#xff0c;所以 React 可以通过有没有 $$typeof 属性来断出当前的 element 对象是从数据库来的还是自己生成的。 如果没有 $$typeof 这个属性&#xff0c;react 会拒绝处理该元素。…

C++plog库,轻量级日志框架(日志库)

文章目录主要头文件及使用方法解释plog/Log.hplog/Appenders/ColorConsoleAppender.hplog/Appenders/RollingFileAppender.hplog/Formatters/TxtFormatter.h三个核心概念Formatter&#xff1a;格式化程序格式化程序举例TxtFormatterJsonFormatterCsvFormatterSyslogFormatterAp…

真的,MyBatis 核心源码入门看这个就够了(四)

4 SQL执行 再次回到demo的示例代码&#xff0c; org.junit.jupiter.api.Testvoid queryBySn() throws IOException {//1 读取配置文件InputStream in Resources.getResourceAsStream("mybatis-config.xml");//2 加载解析配置文件并获取SqlSessionFactory对象SqlSes…

华为OD机试模拟题 用 C++ 实现 - 寻找连续区间(2023.Q1)

最近更新的博客 【华为OD机试模拟题】用 C++ 实现 - 最多获得的短信条数(2023.Q1)) 文章目录 最近更新的博客使用说明寻找连续区间题目输入输出示例一输入输出说明示例二输入输出Code使用说明 参加华为od机试,一定要注意不要完全背诵代码,需要理解之后模仿写出,通过率…

华为OD机试题,用 Java 解【求解连续数列】问题

最近更新的博客 华为OD机试题,用 Java 解【停车场车辆统计】问题华为OD机试题,用 Java 解【字符串变换最小字符串】问题华为OD机试题,用 Java 解【计算最大乘积】问题华为OD机试题,用 Java 解【DNA 序列】问题华为OD机试 - 组成最大数(Java) | 机试题算法思路 【2023】使…

大数据算法自检

1 大数据亚线性空间算法 1.1 流模型的计数问题 问题定义&#xff1f;用什么算法&#xff1f;算法步骤&#xff1f;(提示&#xff1a;三层递进) 切比雪夫不等式&#xff1f;怎么证明&#xff1f;期望&#xff0c;方差&#xff0c;空间复杂度&#xff1f; 极其有限的空间存储极…

数据结构与算法(六):图结构

图是一种比线性表和树更复杂的数据结构&#xff0c;在图中&#xff0c;结点之间的关系是任意的&#xff0c;任意两个数据元素之间都可能相关。图是一种多对多的数据结构。 一、基本概念 图&#xff08;Graph&#xff09;是由顶点的有穷非空集合和顶点之间边的集合组成&#x…

每日分享(免登录积分商城系统 动力商城 兑换商城源码)

​demo软件园每日更新资源,请看到最后就能获取你想要的: 1.Python教程2022&#xff1a;100天从新手到大师 完整版 Python 100天从新手到大师是一个Python入门教程&#xff0c;Python从入门到精通&#xff0c;专门为热爱python的新手量身定做的学习计划&#xff0c;100天速成pyt…

OOM的俩种情况---主动kill/被动kill

出现OOM, 有两种处理方式&#xff1a;1. 主动Kill; 2. 被动Kill 例&#xff1a;HBase Region Server OOM定位问题复盘 现象 在HBase资源隔离项目中&#xff0c;对测试集群进行压测时&#xff0c;发现region server会出现崩溃的情况&#xff0c;单机请求量从>200到~50每秒都…

【Git使用教程】从入门到学废

文章目录1. 基础git流程图常用命令基本配置快捷指令解决GitBash乱码获取本地仓库基础操作指令查看修改的状态&#xff08;status&#xff09;添加工作区到暂存区(add)提交暂存区到本地仓库(commit)查看提交日志(log)版本回退添加文件至忽略列表总结2. 分支查看本地分支创建本地…

程序员多赚20k的接私活必备网站

为什么都是程序员&#xff0c;就有人能多赚20k&#xff1f;那是因为副业搞得那么溜啊&#xff01; 今天分享一些程序员搞钱必备的接私活网站&#xff0c;让更多程序员们在工作之余能有另外一份收入。 1.程序员客栈&#xff1a;http://proginn.com 专为程序员服务的软件外包对…

超级品牌符号怎么设计?大咖有方法

怎么设计超级LOGO图标&#xff1f;有方法&#xff01; LOGO设计大趋势&#xff1a;卡通化、拟人化 抽象符号已经泛滥 但卡通形象也已经泛滥 趣讲大白话&#xff1a;设计容易出名难 【安志强趣讲信息科技89期】 ******************************* 别以为设计一个卡通就牛X闪闪 比…

React Native使用echart——wrn-echarts

这里写自定义目录标题前言Tips详细使用过程如下1、开发环境搭建2、准备RN工程3、build App包4、 安装相关依赖5、试用Skia模式6、试用Svg模式7、封装Chart组件8、多个图表使用总结前言 平时写图表相关需求&#xff0c;用得最多的图表库就是echarts。echarts在web端的表现已经相…