使用Vite创建Vue3项目 配置路由+路径(包教包会)

使用Vite创建Vue3项目 配置路由+路径

  • 一、创建项目:
  • 二、配置路由
      • 1. vue3+vite+ts路由配置
      • 2. vue3+vite+js路由配置
  • 三、配置路径

一、创建项目:

  1. 创建一个文件夹在文件夹上的 地址栏 或者是 win+R 打开cmd命令窗口。
    打开cmd
    在这里插入图片描述
  1. 输入命令 npm create vite@latest
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/9126f69cf7f547d0abe748a38f8f4e9d.png
    这里我们的项目就创建完成了,可以直接使用开发者工具进行运行了。
    在这里插入图片描述

二、配置路由

1. vue3+vite+ts路由配置

  1. 首先我们安装一下路由:npm install vue-router@4
    Vue3 路由文档链接
    在这里插入图片描述
  1. 在src目录下 创建一个 routers文件夹(文件夹下创建一个index.ts文件)views文件夹(文件下创建一个Home.vue)
    在这里插入图片描述
  1. index.ts文件中编写一下代码:
    在这里插入图片描述
  1. 在main.ts入口文件中引入:
    在这里插入图片描述
  2. 在app.vue文件中将路由容器写在里面。
    在这里插入图片描述
    在这里插入图片描述
    这样呢路由就配置好了。

2. vue3+vite+js路由配置

  1. 首先我们安装一下路由:npm install vue-router@4在这里插入图片描述
  2. 跟ts差不多,也是创建两个文件夹和两个文件,但是我这把路由和路由表才分开了
    在这里插入图片描述
  3. index.js中写一下代码:
    在这里插入图片描述
  4. 在routers.js中编写一下代码
    在这里插入图片描述
  5. 在main.js入口文件编写一下代码(后面的步骤就跟上面ts的一样了。):
    在这里插入图片描述

三、配置路径

  1. 这里需要安装一个文件路径插件 npm install --save-dev @types/node
    在这里插入图片描述
  1. 首先在 vite.config.ts 中配置
    在这里插入图片描述
  1. 其次在tsconfig.json中配置(在compilerOptions中配置)
    在这里插入图片描述
    最后将引入的Home.vue文件更改成 @ 引入
    在这里插入图片描述

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

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

相关文章

杂记杂记杂记

Mybatis分页插件原理? 首先分页参数放到ThreadLocal中,拦截执行得到sql,根据数据库类型添加对应的分页语句将重写sql。例如:(select * from table where a)转换为 (select count(*) from table…

Ubuntu 20.04编译Chrome浏览器

本文记录chrome浏览器编译过程,帮助大家避坑qaq 官网文档:https://chromium.googlesource.com/chromium/src//main/docs/linux/build_instructions.md 一.系统要求 一台64位的英特尔机器,至少需要8GB的RAM。强烈推荐超过16GB。至少需要100…

蓝桥杯每日一题2023.11.10

“蓝桥杯”练习系统 (lanqiao.cn) 题目描述 题目分析 对于此题:我们看到题目要求尽可能大,会联想到二分,注意切出的一定为正方形,其能切出的个数为(h[i] / x) * (w[i] / x),将所有的个数与要求的个数进行对比&#x…

【自定义类型:结构体】

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 目录 前言 1. 结构体类型的声明 1.1 结构体的概念 1.2 结构的声明 ​编辑 1.3 特殊的声明 1.4 结构的自引用 2. 结构体变量的创建和初始化 3. 结构成员访问操作符 4. 结构体内…

osg点云加载与渲染

目录 效果 laslib 关键代码 完整代码 效果 las点云读取使用了laslib这个库。 laslib 关键代码 {// 这里演示读取一个 .txt 点云文件const char* lasfile path.c_str();std::ifstream ifs;ifs.open(lasfile, std::ios::in | std::ios::binary);liblas::ReaderFactory f;libl…

Win11 Edge浏览器进入朔日考试系统(无纸化测评系统)的方法

Win11 Edge浏览器进入朔日考试系统(无纸化测评系统)的方法 笔记本型号:联想 使用浏览器:edge浏览器 操作系统:Windows11 网址:http://172.31.0.139/WZHEDU/ 注意:使用此方法打开edge浏览器会频繁出现弹窗&a…

如何将BMP图片批量转为PNG透明图片,并去掉BMP黑色背景

将BMP图片批量转为PNG透明图片,并去掉BMP黑色背景,这里推荐一款软件bmp2png,关键是免费的。截图如下: 这个小软件不仅可以将bmp图片批量转为png图片,而且还增加了压缩功能,导出png图片时压缩导出图片&#…

Spring Boot 集成 ElasticSearch

1 加入依赖 首先创建一个项目&#xff0c;在项目中加入 ES 相关依赖&#xff0c;具体依赖如下所示&#xff1a; <dependency><groupId>org.elasticsearch</groupId><artifactId>elasticsearch</artifactId><version>7.1.0</version&g…

巨好用又实用的18款3dMax插件!

3dMax是一款功能强大的 3D 软件&#xff0c;具有建模、动画、粒子动力学等许多强大功能。但并不是每个人都能有效地利用max的每一个功能&#xff0c;例如&#xff0c;很多人发现3dmax粒子流太难使用&#xff0c;3ds max蒙皮工具也是如此。 这让我们一些专业的开发公司或个人和…

前端如何结合mock模拟假数据

由于某人不想写后端接口&#xff0c;不想用真数据对接vue-element-admin框架&#xff0c;用以前的接口&#xff0c;改token有点点麻烦&#xff0c;所以咱试试mock.js

计算机网络期末复习-Part3

1、rdt1.0&#xff0c;rdt2.0&#xff0c;rdt3.0的底层信道模型 RDT 1.0: 完全可靠的底层信道&#xff0c;没有比特差错&#xff0c;也没有分组丢失。 RDT 2.0: 具有比特差错的底层信道&#xff0c;有比特差错&#xff0c;但没有分组丢失。 RDT 3.0: 具有差错和丢包的底层信道…

安哥拉市场开发攻略,收藏一篇就够了

安哥拉是非洲南部的一个国家&#xff0c;中国是安哥拉最大的贸易伙伴&#xff0c;安哥拉是中国在非洲的第二大贸易伙伴&#xff0c;中国人在安哥拉也是非常受欢迎的&#xff0c;虽然安哥拉经济比较落后&#xff0c;但是市场潜力还是非常不错的。今天就来给大家分享一下安哥拉的…

【开源分享】国内可用的免费安卓GPT语音助手 - 可音量键唤起,可联网

写在前面&#xff1a;这是一个我写的开源GPT语音助手&#xff0c;不收钱&#xff0c;只求Star! 简要介绍 这是一个基于ChatGPT的安卓端语音助手&#xff0c;允许用户通过手机音量键从任意界面唤起并直接进行语音交流&#xff0c;用最快捷的方式询问并获取回复 使用效果 一、基…

(动手学习深度学习)第13章 计算机视觉---图像增广与微调

13.1 图像增广 总结 数据增广通过变形数据来获取多样性从而使得模型泛化性能更好常见图片增广包裹翻转、切割、变色。 图像增广代码实现

Redis实现分布式锁

文章目录 前言一、概述为什么使用分布式锁基本原理分布式锁应该具备哪些条件常见的三种分布式锁 二、基于Redis实现分布式锁误删锁问题原子性问题最终代码实现 总结 前言 Redis实现简单分布式锁。 一、概述 为什么使用分布式锁 在多线程环境中&#xff0c;如果多个线程同时访…

确定性 vs 非确定性:GPT 时代的新编程范式

分享嘉宾 | 王咏刚 责编 | 梦依丹 出品 | 《新程序员》编辑部 在 ChatGPT 所引爆的新一轮编程革命中&#xff0c;自然语言取代编程语言&#xff0c;在只需编写提示词/拍照就能出程序的时代&#xff0c;未来程序员真的会被简化为提示词的编写员吗&#xff1f;通过提示词操纵 …

10-Docker-分布式存储算法

01-哈希取余算法分区 哈希取余分区&#xff08;Hash Modulus Partitioning&#xff09;是一种在分布式计算和数据存储中常用的分区策略&#xff0c;其目的是将数据或计算任务分配到多个节点或服务器上&#xff0c;以实现负载均衡和提高性能。这种分区策略的核心思想是使用哈希…

HCIA-hybrid经典小实验

hybrid经典小实验 实验拓扑配置实现SW1SW2 配置验证PC1-PC3 不能通信PC1-PC2 正常通信其他自行测试 实验拓扑 配置实现 SW1 sysname SW1 # undo info-center enable # vlan batch 10 20 30 # interface Ethernet0/0/1 //接口发送该vlan-id的数据帧时&#xff0c;不剥离帧中的…

多级缓存之实现多级缓存

多级缓存的实现离不开Nginx编程&#xff0c;而Nginx编程又离不开OpenResty。 1. OpenResty快速入门 我们希望达到的多级缓存架构如图&#xff1a; 其中&#xff1a; windows上的nginx用来做反向代理服务&#xff0c;将前端的查询商品的ajax请求代理到OpenResty集群 OpenRest…

容器网络-Underlay和Overlay

一、主机网络 前面讲了容器内部网络&#xff0c;但是容器最终是要部署在主机上&#xff0c;跨主机间的网络访问又是怎么样的&#xff0c;跨主机网络主要有两种方案。 二、 Underlay 使用现有底层网络&#xff0c;为每一个容器配置可路由的网络IP。也就是说容器网络和主机网络…