vue3+vite 搭建项目

第一步 

npm init vite@latest

当然,我在建项目的时候输入这个命令行的时候,报错了,提示安装依赖,执行如下命令:

npm install -g create-vite

全局安装 create-vite

cd xxx
npm install
npm run dev

之后就 按照步骤 选择 vue  ts 或者js 语言就可以了

搭建好项目之后,我们就开始 新建 路由文件 以及 views 文件夹了

安装依赖 

npm install vue-router@4

router /  index.ts

import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({history: createWebHistory(),routes: [{path: '/',name: 'home',component: () => import('../views/index.vue')},]
})
// 导出
export default router

main.ts 导入

import router from '../src/router'const app = createApp(App)
app.use(router)

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

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

相关文章

C++ Qt开发:TabWidget实现多窗体功能

Qt 是一个跨平台C图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍TabWidget标签组件的常用方法及灵活运用。 Q…

MVVM响应式

聚沙成塔每天进步一点点 本文内容 ⭐ 专栏简介MVVM响应式1. 什么是MVVM模式?2. Vue中的响应式数据3. 数据绑定与视图更新⭐ 写在最后⭐ 专栏简介 Vue学习之旅的奇妙世界 欢迎大家来到 Vue 技能树参考资料专栏!创建这个专栏的初衷是为了帮助大家更好地应对 Vue.js 技能树的学习…

NVIDIA GPU日志解读

目录 2023-12-20 21:39:14.437944: I tensorflow/core/platform/cpu_feature_guard.cc:142] This TensorFlow binary is optimized with oneAPI Deep Neural Network Library (oneDNN) to use the following CPU instructions in performance-critical operations: AVX AVX2To …

IspSrver-DNS

2023年全国网络系统管理赛项真题 模块B-Windows解析 题目 安装DNS服务器,根据题目创建必要正向区域和反向区域的DNS解析。把当前机器作为互联网根域服务器,创建test1.com~test100.com,并在所有正向区域中创建一条A记录,解析到本机地址。配置步骤 安装DNS服务器,根据题目创…

eclipse部分常用快捷键的使用

eclipse部分常用快捷键的使用 注释部分 Ctrl / :注释或取消当前行注释。Ctrl Shift / :多行注释。Ctrl Shift \ :取消多行注释。AltShiftJ:方法注释。 代码部分 Alt /:代码提示补全。Ctrl 1:快速…

Copilot的实战经验分享和案例分析

案例一:快速开发REST API 在开发一个新的REST API时,Copilot可以大大加快开发速度。例如,当你需要创建一个新的用户端接口来添加新用户时,你可以在你的Python Flask应用中开始输入如下代码: app.route(/users, methods…

3842充电器电路图大全

3842充电器电路图(一) UC3842组成的充电器电路 图1中C1、V1~V4、C2组成滤波整流电路,变压器T为高频变压器,V5、R2、C11组成功率开关管V7的保护电路,NF为供给IC电源的绕组。单端输出IC为UC3842,…

Nacos-服务发现与配置管理v1.0

Nacos - 服务发现和配置管理 教学目标 1)能够理解微服务架构的特点 2)能够理解服务发现的流程 3)能够说出Nacos的功能 4)掌握Nacos的安装方法 5)掌握RESTful服务发现开发方法 6)掌握Dubbo服务发现开…

ICC2:Less than minimum edge length和Concave convex edge enclosure

我正在「拾陆楼」和朋友们讨论有趣的话题,你⼀起来吧? 拾陆楼知识星球入口 首先,要介绍一下这两种drc Less than minimum edge length对应的tf rule如下: 而Concave convex edge enclosure对应图示和tf 规则如下,可

信息论安全与概率论

目录 一. Markov不等式 二. 选择引理 三. Chebyshev不等式 四. Chernov上限 4.1 变量大于 4.2 变量小于 信息论安全中会用到很多概率论相关的上界,本文章将梳理几个论文中常用的定理,重点关注如何理解这些定理以及怎么用。 一. Markov不等式 假定…

备忘:python和 java graphql client连Sky walking Server查询数据的联通性

本文仅做备忘 Skywalking OAP 关于graphql的url http://localhost:8090/graphql python3.10 需要安装 GraphQLClient库 testGraphQL.py程序 from graphqlclient import GraphQLClient import json if __name__ __main__:clientGraphQLClient(http://localhost:8090/graphql…

仙女麻麻看过来~你想要的穿搭我都有

精选优质匈牙利白鸭绒填充绒朵大而蓬松,毫无异味整件格充绒工艺不跑绒 更加的保暖舒适版型优秀显瘦不臃肿 黑色经典好穿又好看!

获取请求体中json数据并解析到实体对象

目录 相关依赖 前端代码 后端代码 测试结果 相关依赖 <dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.83</version> </dependency> <dependency><groupId>comm…

在vue中,文件转base64示例

在Vue中&#xff0c;你可以使用FileReader对象将文件转换为Base64编码。以下是一个示例代码&#xff0c;演示了如何将文件转换为Base64编码&#xff1a; <template> <div> <input type"file" change"onFileChange"> <button clic…

【HarmonyOS开发】ArkUI实现下拉刷新/上拉加载

列表下拉刷新、上拉加载更多&#xff0c;不管在web时代还是鸿蒙应用都是一个非常常用的功能&#xff0c;基于ArkUI中TS扩展的声明式开发范式实现一个下拉刷新&#xff0c;上拉加载。 上拉加载、下拉刷新 如果数据量过大&#xff0c;可以使用LazyForEach代替ForEach 高阶组件-…

golang:Excel写入mysql数据库

要将读取的每个Sheet中的数据分别写入不同的MySQL数据库&#xff0c;你需要使用Go语言的MySQL数据库驱动&#xff0c;以及合适的数据库连接和插入逻辑。在Go中&#xff0c;可以使用github.com/go-sql-driver/mysql和github.com/jmoiron/sqlx等库来处理MySQL数据库连接和操作。 …

Seata1.4.2分布式事务搭建部署【Spring cloud Alibaba】

包下载 https://github.com/apache/incubator-seata/releases下载并上传到服务器 //解压 tar -zxvf seata-server-1.4.2.tar.gz创建Seata的数据库及表&#xff0c;地址&#xff1a;https://github.com/seata/seata/tree/develop/script/server 根据数据类型复制相应的sql&…

【 USRP安装教程】MATLAB 2023B

步骤 matlabdocusrp驱动包 doc 安装包内容列表 双击“R2023b_Doc_Windows.iso” 打开cmd 查看盘符 切换盘符 因为是F盘&#xff0c;所以cmd输入&#xff1a;“F:” F:进入可安装界面 cd F:\bin\win64安装离线文档库 .\mpm install-doc --matlabroot"C:\MATLAB\R202…

Java 第14章 集合 本章作业

文章目录 试分析HashSet和TreeSet分别如何实现去重的HashSet重复加入问题比较ArrayList和Vector 试分析HashSet和TreeSet分别如何实现去重的 (1) HashSet的去重机制&#xff1a;hashCode() equals()&#xff0c;底层先通过存入对象,进行运算得到一个hash值&#xff0c;通过ha…

scrapy_redis原理分析并实现断点续爬以及分布式爬虫

scrapy_redis原理分析并实现断点续爬以及分布式爬虫 学习目标 了解 scrapy实现去重的原理了解 scrapy中请求入队的条件掌握 scrapy_redis基于url地址的增量式单机爬虫掌握 scrapy_redis分布式爬虫 1. 下载github的demo代码 clone github scrapy-redis源码文件 git clone http…