vue3 + vite 项目可以使用纯Js开发吗?

答案:可以

创建项目:

按照链接参考或者按官方:

webstorm 创建vue3 vite 项目-CSDN博客

 项目目录

tsconfig.json 配置允许js

allowJs指定是否编译js文件,在任意文件当中,如果我们模块使用js写的,那么我们需要

  将allowJs设置为true,默认为false,主要是在引入一个额外js之后防止路径错误才使用


{"compilerOptions": {//是否对js进行编译"allowJs": true}
}

打开项目之后创建一个新vue视图

login.vue

<template><div class="about"><h1>This is an Login page</h1><br/><el-divider/><h4>{{ msg }}</h4><el-button @click="handleClick">这个是el按钮</el-button></div>
</template>
<script setup>
const handleClick = () => {msg.value = msg.value + ',hello'alert('点了一下了55555~~~')
}
const msg = ref('hello')</script><style>
@media (min-width: 1024px) {.about {min-height: 100vh;display: flex;align-items: center;flex-direction: column;}
}
</style>

/router/index.ts 添加到路由

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: 'home',component: HomeView},{path: '/about',name: 'about',// route level code-splitting// this generates a separate chunk (About.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import('../views/AboutView.vue')},{path: '/login',name: 'login',component: () => import('../views/loginView.vue')}]
})export default router

App.vue里遍历路由展示所有的页面,包括上面的login.vue

<template><header><img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" /><div class="wrapper"><HelloWorld msg="You did it!" /><nav><RouterLink v-for="item of routes" :to="item" :key="item.name">{{ item.name }}</RouterLink></nav></div></header><!--RouterLink的跳转的页面内容将在RouterView显示--><RouterView />
</template>
<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import router from '@/router'const routes = router.options.routes
// console.log(router.options.routes)
</script><style scoped>
header {line-height: 1.5;max-height: 100vh;background-color: #bfc;
}.logo {/*display: block;*/display: none;margin: 0 auto 2rem 2rem;
}nav {width: 100%;font-size: 12px;text-align: center;margin-top: 2rem;
}nav a.router-link-exact-active {color: var(--color-text);
}nav a.router-link-exact-active:hover {background-color: transparent;
}nav a {display: inline-block;padding: 0 1rem;border-left: 1px solid var(--color-border);
}nav a:first-of-type {border: 0;
}@media (min-width: 1024px) {header {display: flex;place-items: center;padding-right: calc(var(--section-gap) / 2);}.logo {display: block;margin: 0 2rem 0 2rem;}header .wrapper {display: flex;place-items: flex-start;flex-wrap: wrap;}nav {text-align: left;margin-left: -1rem;font-size: 1rem;padding: 1rem 0;margin-top: 1rem;}
}
</style>
运行效果:

总结

vue3+vite + Typescript的项目,按官方创建的项目,也可以用纯JS开发新页面与新功能,只不过是跟项目TS混合一起 。

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

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

相关文章

地理空间分析15——Python在应急响应与地理空间分析中的创新应用

目录 写在开头1.Python及其在地理空间分析中的应用地理空间数据处理库地理空间数据可视化工具 2.应急响应中的Python应用实例2.1 灾害风险评估2.2 实时数据分析与响应2.3资源优化分配 3 地震应急响应案例&#xff1a;利用Python进行数据分析3.1 背景介绍3.2 数据收集与处理3.3 …

链式插补 (MICE):弥合不完整数据分析的差距

导 读 数据缺失可能会扭曲结果&#xff0c;降低统计功效&#xff0c;并且在某些情况下&#xff0c;导致估计有偏差&#xff0c;从而破坏从数据中得出的结论的可靠性。 处理缺失数据的传统方法&#xff08;例如剔除或均值插补&#xff09;通常会引入自己的偏差或无法充分利用数…

机器学习:模型选择和模型优化

进行数据处理之后&#xff0c;我们得到了x_train和y_train&#xff0c;我们就可以用来进行回归或分类模型训练啦~ 一、模型选择 我们这里可能使用的是回归模型&#xff08;Regression&#xff09;&#xff0c;值得注意的是&#xff0c;回归和分类不分家。分类是预测离散值&…

策略的更新、加载与同步

C语言的C库提供了策略的更新、加载与同步的方法&#xff0c;这里引入多线程&#xff0c;达到区分读写任务&#xff08;生产者——消费者 模型&#xff09;的目的。 示例&#xff1a; /*brief check strategy to update, reload, synchronized to read(stoped by SIGINT)author…

Mysql标量子查询

目录 子查询标量子查询数据准备 子查询 SQL语句中嵌套select语句&#xff0c;称为嵌套查询&#xff0c;又称子查询。 SELECT * FROM t1 WHERE column1 ( SELECT column1 FROM t2 ... );子查询外部的语句可以是insert / update / delete / select 的任何一个&…

git的安装、使用

文章目录 安装gitgit学习网站git初始配置具体配置信息 新建版本库&#xff08;仓库&#xff09;git的工作区域和文件状态工作区域文件状态git文件提交的基础指令 git基础指令1. 版本提交2. 分支创建3. 分支切换4. 分支合并(1) git merge(2) git rebase 5. 在git的提交树上移动(…

Ps:锐化工具

锐化工具 Sharpen Tool可用于增强图像局部区域的对比度&#xff0c;从而提高图像的清晰度和细节&#xff0c;特别适用于提升照片的边缘定义和纹理细节。 快捷键&#xff1a;无 ◆ ◆ ◆ 常用操作方法与技巧 1、如果直接在像素图像上使用锐化工具&#xff0c;可尝试使用“渐隐…

怎么优雅地访问ChatGPT

ChatGPT&#xff0c;这颗璀璨的智能结晶&#xff0c;在2022年岁末之际&#xff0c;由OpenAI实验室倾力铸就&#xff0c;犹如夜空中跃动的智慧星辰&#xff0c;点亮了人工智能领域的新纪元。犹如汪洋中的一座灯塔&#xff0c;ChatGPT以其独特的智慧光辉引人注目&#xff0c;然而…

Linux:kubernetes(k8s)node节点加入master主节点(3)

Linux&#xff1a;kubernetes&#xff08;k8s&#xff09;搭建mater节点&#xff08;kubeadm&#xff0c;kubectl&#xff0c;kubelet&#xff09;-CSDN博客https://blog.csdn.net/w14768855/article/details/136415575?spm1001.2014.3001.5502 我在上一章部署好了主节点&…

前端打包部署(黑马学习笔记)

我们的前端工程开发好了&#xff0c;但是我们需要发布&#xff0c;那么如何发布呢&#xff1f;主要分为2步&#xff1a; 1.前端工程打包 2.通过nginx服务器发布前端工程 前端工程打包 接下来我们先来对前端工程进行打包 我们直接通过VS Code的NPM脚本中提供的build按钮来完…

从下一代车规MCU厘清存储器的发展(2)

目录 1.概述 2.MCU大厂的选择 2.1 瑞萨自研STT-MRAM 2.2 ST专注PCM 2.3 英飞凌和台积电联手RRAM 2.4 NXP如何计划eNVM 3.小结 1.概述 上篇文章&#xff0c;我们简述了当前主流的存储器技术&#xff0c;现在我们来讲讲各大MCU大厂的技术选择 2.MCU大厂的选择 瑞萨日…

redis的RDB和AOF

Redis是一种高性能的键值对存储系统&#xff0c;它支持多种类型的数据结构&#xff0c;如字符串、列表、集合、哈希表、有序集合等。Redis提供了两种不同的持久化机制来确保数据的安全性&#xff1a;RDB&#xff08;Redis Database&#xff09;和AOF&#xff08;Append Only Fi…

Tomcat布署及优化二-----Mysql和虚拟机

1.Mysql搭Blog 1.1下载安装包 看一下tomcat状态 1.2放到指定目录 cp jpress-v3.2.1.war /usr/local/tomcat/webapps/ cd /usr/local/tomcat/webapps/ 1.3路径优化 ln -s jpress-v3.2.1 jpress 看jpress权限 1.4生成配置文件 cat >/etc/yum.repos.d/mysql.repo <<E…

掘根宝典之C语言指针详解

目录 什么是指针&#xff1f; 与指针相关的运算符 指针类型的意义 指针的大小 初始化 将指针直接指向一个已经存在的变量或内存地址&#xff1a; 使用malloc函数动态分配内存&#xff0c;并将指针指向新分配的内存&#xff1a; 使用calloc函数动态分配内存&#xff0c;并…

Javascript:常量与数据类型

一、前言 介绍完变量之后我们来对常量进行了解一番&#xff0c;关于常量我们需要知道些什么呢&#xff1f; 二、正文 1.常量的基本使用 使用const声明的变量称为常量&#xff0c;当某个变量的字面量无需改动的时候就能够用到常量。 //声明一个常量 const G 9.8 //输出这个常量…

您的计算机已被pings勒索病毒感染?恢复您的数据的方法在这里!

导言&#xff1a; 在数字时代&#xff0c;数据是企业和个人生活中不可或缺的一部分。然而&#xff0c;随着勒索病毒的不断进化和传播&#xff0c;我们的数据面临着前所未有的威胁。其中&#xff0c;.pings 勒索病毒是最新一轮威胁之一&#xff0c;它以其独特的加密算法和无情的…

leetcode-字符串中的单词数

434. 字符串中的单词数 题解&#xff1a; 这个问题可以通过遍历字符串&#xff0c;当遇到非空格字符时&#xff0c;判断其前一个字符是否为空格&#xff0c;如果是&#xff0c;则说明这是一个新的单词的开始&#xff0c;计数器加一。最后返回计数器的值即可。 class Solutio…

【Redis | 第一篇】快速了解Redis

文章目录 1.快速了解Redis1.1简介1.2与其他key-value存储的不同处1.3Redis安装——Windows环境1.3.1下载redis1.3.2启动redis1.3.3进入redis客户端1.3.4修改配置 1.4Redis安装——Linux环境1.4.1安装命令1.4.2启动redis1.4.3进入redis客户端 1.5配置修改1.6小结 1.快速了解Redi…

MyBatis 学习(七)之 缓存

目录 1 MyBatis 缓存介绍 2 一级缓存 3 二级缓存 3.1 二级缓存介绍 3.2 二级缓存配置 3.3 二级缓存测试 4 参考文档 1 MyBatis 缓存介绍 MyBatis 缓存是 MyBatis 中的一个重要特性&#xff0c;用于提高数据库查询的性能。MyBatis 提供了一级缓存和二级缓存两种类型的缓存…

Git与GitHub:解锁版本控制的魔法盒子

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua&#xff0c;在这里我会分享我的知识和经验。&#x…