【vite创建项目】

news2024/11/25 20:31:26

搭建vue3+ts+vite+pinia框架

  • 一、安装vite并创建项目
      • 1、用vite构建项目
      • 2、配置vite
      • 3、找不到模块 “path“ 或其相对应的类型声明。
  • 二、安装element-plus
      • 1、安装element-plus
      • 2、引入框架
  • 三、安装sass sass-loader
      • 1、安装sass
  • 四、安装vue-router-next 路由
      • 1、安装vue-router@4
      • 2搭建router模块

一、安装vite并创建项目

  1. node版本>=18
  2. npm 的安装
npm install create-vite-app -g

1、用vite构建项目

npm create vite@latest

在这里插入图片描述

2、配置vite

在这里插入图片描述

3、找不到模块 “path“ 或其相对应的类型声明。

npm install @types/node --save-dev

二、安装element-plus

1、安装element-plus

npm install element-plus --save

2、引入框架

在这里插入图片描述

三、安装sass sass-loader

1、安装sass

npm install sass sass-loader --save-dev

四、安装vue-router-next 路由

1、安装vue-router@4

npm install vue-router@4 --save

2搭建router模块

在src下创建 router 目录,并创建 index.ts 文件

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

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

相关文章

Mybatis入门の基础操作

1 Mybatis概述 MyBatis 是支持定制化 SQL、存储过程以及高级映射的优秀的持久层框架。MyBatis避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集。MyBatis 可以对配置和原生Map使用简单的 XML 或注解,将接口和 Java 的 POJOs(Plain Old Java Objects,普通的…

vue3+vue-router+vite 实现动态路由

文章中出现的代码是演示版本,仅供参考,实际的业务需求会更加复杂 什么是动态路由 什么场景会用到动态路由 举一个最常见的例子,比如说我们要开发一个后台管理系统,一般来说后台管理系统都会分角色登录,这个时候也就涉…

幻兽帕鲁卡顿严重、延迟高怎么办?幻兽帕鲁卡顿问题处理

幻兽帕鲁更是一款支持多人游戏模式的生存制作游戏。玩家们可以邀请好友一同加入这个充满奇幻与冒险的世界,共同挑战强大的敌人,分享胜利的喜悦。在多人模式中,玩家之间的合作与竞争将成为游戏的一大看点。玩家们需要充分发挥自己的智慧和策略…

centos7的yum命令无法使用解决方案

文章目录 问题排查流程解决方案总结 问题 今天新建了个centos7的虚拟机发现yum无法正常使用 已加载插件:fastestmirror Determining fastest mirrors Could not retrieve mirrorlist http://mirrorlist.centos.org/?release7&archx86_64&repoos&infra…

单片机学习(14)--DS18B20温度传感器

DS18B20温度传感器 13.1DS18B20温度传感器基础知识1.DS18B20介绍2.引脚及应用电路3.内部结构框图4.存储器框图5.单总线介绍6.单总线电路规范7.单总线时序结构8.DS18B20操作流程9.DS18B20数据帧 13.2DS18B20温度读取和温度报警器代码1.DS18B20温度读取(1)…

linux模拟aix盘19c单机asm安装补丁

linux模拟盘aix盘vi /etc/rc.d/rc.local/bin/ln /dev/sda /dev/rhdisk2/bin/ln /dev/sdb /dev/rhdisk3 /bin/chown grid:oinstall /dev/rhdisk*chmod 660 /dev/rhdisk* 一、19c安装GI(Standalone Oracle Restart) su - grid配置环境变量vi .profileex…

【Linux】Linux用户,用户组,其他人

1.文件拥有者 初次接触Linux的朋友大概会觉得很怪异,怎么“Linux有这么多用户,还分什么用户组,有什用呢?”,这个“用户与用户组”的功能可是相当健全而且好用的一个安全防护措施。 怎么说呢?由于Linux是个…

人生感悟 | 努力奋斗和内卷不是一个意思。

哈喽,你好啊,我是雷工! 有个很有趣的话题,是不是努力奋斗导致的内卷? 如果每个人都躺平,各行各业的内卷是不是就不存在了? 01 有关联不尽同 两者有关量,但无绝对的导向关系。 努力…

vue高德地图使用

先根据官方方法给vue项目引入高德 高德文档地址 做好准备后使用 初始化地图 AMap.plugin(AMap.MoveAnimation, () >{//地图this.map new AMap.Map("mapContainer", {resizeEnable: true,center: [116.397447,39.909176],//地图中心坐标zoom:12,//缩放值});this.…

掌握亚马逊自养号:测评策略的核心要点与实战经验

在当今电商领域的激烈角逐中,亚马逊测评对于卖家而言,已从单纯的销量助推器与好评累积工具,进化为品牌塑造与市场洞察的关键环节。然而,许多卖家仍局限于传统认知,未能充分挖掘自养号测评的多元化价值与深远影响。本文…

深入Kafka:如何保证数据一致性与可靠性?

我是小米,一个喜欢分享技术的29岁程序员。如果你喜欢我的文章,欢迎关注我的微信公众号“软件求生”,获取更多技术干货! Hello, 大家好!我是小米,今天我们来聊一聊Kafka的一致性问题。Kafka作为一个高性能的分布式流处理平台,一直以来都备受关注。今天,我将深入探讨Kaf…

智算中心风云再起,如何锚定突围之路?

导读:2024年,智算中心建设全面提速,头部玩家争相布局。如何打造智算中心的差异化竞争能力? 2024年,随着大模型和生成式AI应用加速落地,各行各业对AI算力的需求持续暴涨。作为AI时代的算力基础设施&#xff…

Spring AI 1.0.0 新变化,从 0.8.1 如何升级

Spring AI 1.0.0-M1 版本已经发布,距离 1.0.0 正式版又更近了一步。同时这也意味着,Spring AI 1.0.0 的 API 已经基本确定,不会发生大的改动。这里介绍一下,相对于上一个发布版本 0.8.1,Spring AI 1.0.0 的一些重要的变…

【pearcmd】通过pearcmd.php 进行GetShell

https://cloud.tencent.com/developer/article/2204400 关于PHP 配置 register_argc_argv 小结 的一些研究文章。 应用例题 [NewStarCTF 2023 公开赛道]Include &#x1f350; <?phperror_reporting(0);if(isset($_GET[file])) {$file $_GET[file];if(preg_match(/flag|l…

国外惊现IDM命令行永久破解方法

IDM 想必大部分人都知道和使用过&#xff0c;这是一款在国内外都非常流行的下载神器&#xff0c;除了不能支持种子文件和磁力之外&#xff0c;完爆国内的迅雷&#xff0c;小编我在 6 年前就已经购买了永久更新正版。 image.png 不过最近国外有大神流传出了一个号称可以永久完美…

如何在Docker容器中,修改MySQL密码

如果MySQL运行在Docker容器中&#xff0c;修改MySQL密码的方法稍有不同。以下是如何在Docker中修改MySQL密码的步骤&#xff1a; 方法1&#xff1a;使用MySQL命令行工具 1. 找到MySQL容器的ID或者名字&#xff1a; docker ps 2. 进入MySQL容器&#xff1a; docker exec -i…

Hi3861 OpenHarmony嵌入式应用入门--UDP Client

本篇使用的是lwip编写udp客户端。需要提前准备好一个PARAM_HOTSPOT_SSID宏定义的热点&#xff0c;并且密码为PARAM_HOTSPOT_PSK。还需要准备一个udp服务&#xff0c;服务ip为PARAM_SERVER_ADDR宏定义&#xff0c;端口为PARAM_SERVER_PORT宏定义。 修改网络参数 在Hi3861开发板…

如何挑选短剧系统源码?

在选择短剧系统源码之前&#xff0c;我们需要明确什么是短剧系统源码。短剧系统源码是指用于构建和管理短剧内容的程序代码。选择适合的短剧系统源码可以提高短剧制作的效率和质量。下面是几个选择短剧系统源码的建议&#xff1a; 需求分析&#xff1a;在选择短剧系统源码之前&…

【代码随想录】【算法训练营】【第58天】 [卡码101]孤岛的总面积 [卡码102]沉没孤岛 [卡码103]水流问题 [卡码104]建造最大岛屿

前言 思路及算法思维&#xff0c;指路 代码随想录。 题目来自 卡码网。 day 58&#xff0c;周四&#xff0c;ding~ 题目详情 [卡码101] 孤岛的总面积 题目描述 卡码101 孤岛的总面积 解题思路 前提&#xff1a; 思路&#xff1a; 重点&#xff1a; 代码实现 C语言 […

word 转pdf 中图片不被压缩的方法

word 转pdf 中图片不被压缩的方法 法1&#xff1a; 调节word 选项中的图片格式为不压缩、高保真 法2&#xff1a; 1: word 中的图片尽可能使用高的分辨率&#xff0c;图片存为pnd或者 tif 格式&#xff08;最高清&#xff09; 2: 转化为pdf使用打印机器&#xff0c;参数如下…