03 使用Vite开发Vue3项目

概述

要使用vite创建Vue3项目,有很多种方式,如果使用命令,则推荐如下命令:

# 使用nvm将nodejs的版本切换到20
nvm use 20# 全局安装yarn
npm install -g yarn# 使用yarn+vite创建项目
yarn create vite

不过,笔者更推荐搭建使用基于目录结构的构建方式,这种方式能够避免过度依赖网络环境,而且还能够得到一个非常整洁的初始环境,非常便于初学者。即使是后期变得越来越熟练,这种基于模板代码去开发的方案,依然非常适合。

目录结构

在这里插入图片描述

完整代码

package.json

{"name": "hello","private": true,"version": "0.1.0","type": "module","scripts": {"dev": "vite","build": "vite build"},"dependencies": {"vue": "^3.3.8"},"devDependencies": {"@vitejs/plugin-vue": "^4.5.0","vite": "^5.0.0"}
}

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],
})

index.html

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite + Vue</title></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body>
</html>

src/main.js

import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')

src/App.vue

<template>你好,Vite5+Vue3
</template>

启动方式

yarn
yarn dev

浏览器访问:http://localhost:5173/

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

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

相关文章

LeedCode刷题---滑动窗口问题(二)

顾得泉&#xff1a;个人主页 个人专栏&#xff1a;《Linux操作系统》 《C/C》 《LeedCode刷题》 键盘敲烂&#xff0c;年薪百万&#xff01; 一、将X减到0的最小操作数 题目链接&#xff1a;将 x 减到 0 的最小操作数 题目描述 给你一个整数数组 nums 和一个整数 x 。每一…

mysql的负向条件查询会不会使用索引

mysql的负向条件查询&#xff0c;例如not in&#xff0c;会不会使用索引&#xff1f; 其实&#xff0c;mysql还是会尽量利用索引。如果查询的列上有索引&#xff0c;并且索引能够覆盖查询所需的列&#xff0c;那么mysql可能会使用索引来获取结果&#xff0c;而不是进行全表扫描…

2024中国国际大数据产业博览会年度主题征集公告

2024中国国际大数据产业博览会年度主题征集公告 中国国际大数据产业博览会&#xff08;以下简称数博会&#xff09;&#xff0c;是全球首个以大数据为主题的国家级博览会&#xff0c;由国家发展和改革委员会、工业和信息化部、国家互联网信息办公室和贵州省人民政府共同主办&am…

ADB命令安装卸载手机APP

前言 手机内置的浏览器很多广告&#xff0c;推荐的新闻也很多负面的新闻&#xff0c;所以就想卸载内置的手机app&#xff0c;不过现在很多手机都是限制了内置的软件都不能卸载&#xff0c;以前随便获取一下root权限&#xff0c;也是可以卸载的&#xff0c;不过最近搞了一下&am…

【POI的如何做大文件的写入】

&#x1f513;POI如何做大文件的写入 &#x1f3c6;文件和POI之间的区别是什么&#xff1f;&#x1f3c6;POI对于当今的社会发展有何重要性&#xff1f;&#x1f3c6;POI大文件的写入&#x1f396;️使用XSSF写入文件&#x1f396;️使用SXSSFWorkbook写入文件&#x1f396;️对…

设计可编辑表格组件

前言 什么是可编辑表格呢&#xff1f;简单来说就是在一个表格里面进行表单操作&#xff0c;执行增删改查。这在一些后台管理系统中是尤为常见的。 今天我们根据vue2 element-ui来设计一个表单表格组件。&#xff08;不涉及完整代码&#xff0c;想要使用完整功能可以看底部连…

ReenterLock重入锁

synchronized就是一种最简单的控制方法&#xff0c;它决定了一个线程释放可以访问临界区资源。 同时&#xff0c;Object.wait()方法和Object.notify()方法起到了线程等待和通知的作用。 ReenterLock重入锁可以完全替代关键字Synchoronized.重入锁是Synchoronized、Object.wait(…

CAPL基础语法

目录 1.变量的声明与定义1.1变量名1.2全局变量与局部变量全局变量局部变量1.3简单变量1.4复合类型结构 struct枚举 enum数组 Array1.5特殊类型报文诊断报文定时器1.变量的声明与定义 在程序运行过程中,其值可以被改变的量称为变量。变量可以用于保存用户输入的数据,也可以保…

[楚慧杯 2023] web

文章目录 eaaevalupload_shell eaaeval 打开题目&#xff0c;源码给了用户密码 登陆后啥也没有&#xff0c;扫一下发现源码泄露www.zip <?php class Flag{public $a;public $b;public function __construct(){$this->a admin;$this->b admin;}public function _…

实验四: 语义分析与中间代码生成

一、实验目的 通过上机实习,加深对语法制导翻译原理的理解,掌握将语法分析所识别的语法成分变换为中间代码的语义翻译方法. 二、实验内容 采用递归下降语法制导翻译法,对算术表达式、赋值语句进行语义分析并生成四元式序列。 三实验要求 实验要求 文法&#xff1a;statem…

C++ list常用操作

目录 一、介绍 二、list的常用操作 1、构造 2、迭代器 3、元素访问 4、容量操作 一、介绍 std::list文档链接 list是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容器可以前后双向迭代。list的底层是双向链表结构&#xff0c;双向链表中每个…

3rd 库(x86, linux)的编译,源码目录

著名的C/C框架和第三方库-CSDN博客 Ubuntu下protobuf的port_def.inc文件找不到问题//test ok-CSDN博客 protobuf入门教程(四)&#xff1a;repeated限定修饰符//test ok-CSDN博客 protobuf 3.17.0交叉编译//test ok-CSDN博客 protobuf-2.6.1安装//test ok-CSDN博客 【zmq】z…

独立看门狗 IWDG

看门狗介绍 "看门狗"通常指的是计算机科学和信息技术领域中的一种技术或设备&#xff0c;用于监控系统的运行状态&#xff0c;并在系统出现故障或异常情况时采取相应的措施。这种技术或设备起到类似于守卫的作用&#xff0c;确保系统的稳定性和可靠性。 在计算机系统…

RealBasicVSR高清处理视频

autodl做了镜像&#xff1a;高清RealBasicVSR 首先在剪映将视频剪好导出&#xff0c;最多是720像素的&#xff0c;不然后面超分的时候会爆显存。剪映视频也最好是双数帧数结尾的&#xff0c;不然超分的时候单数图片会报错->RuntimeError: non-empty 3D or 4D input tensor …

beebox靶场A1 low 命令注入通关教程(上)

一&#xff1a;html注入 get HTML注入&#xff0c;就是当用户进行输入时&#xff0c;服务器没有对用户输入的数据进行过滤或转义&#xff0c;导致所有输入均被返回前端&#xff0c;网页解析器会将这些数据当作html代码进行解析,这就导致一些恶意代码会被正常执行。 首先进行简…

DC电源模块的设计与制造技术创新

BOSHIDA DC电源模块的设计与制造技术创新 DC电源模块的设计与制造技术创新主要涉及以下几个方面&#xff1a; 1. 高效率设计&#xff1a;传统的DC电源模块存在能量转换损耗较大的问题&#xff0c;技术创新可通过采用高效率的电路拓扑结构、使用高性能的功率开关器件和优化控制…

【Linux应用编程笔记】输入设备

系列文章目录 【Linux应用编程笔记】GPIO 本系列使用的开发板为正点原子阿尔法IMX6ULL开发板&#xff0c;及根据正点原子所的提供教程学习 文章目录 系列文章目录【Linux应用编程笔记】GPIO 做什么&#xff1f;一、编写流程1、input子系统2、读取数据的流程3、解析数据应用编…

面向对象三大特征——继承

目录 1. 概述 2. 继承的限制 2.1 单继承 2.2 访问修饰符 2.3 . final 3. 重写 4. super 4.1super的作用 4.2访问父类的成员和被重写方法 4.3调用父类的构造器 1. 概述 多个类中存在相同属性和行为时&#xff0c;将这些内容抽取到单独一个类中&#xff0c;那么就无需在…

C++类与对象 (上)

目录 前言&#xff1a; 类和对象的理解 类的引入 类的定义与使用方式 访问限定符 类的两种定义方式 成员变量的命名规则 类的作用域 类的实例化 类对象模型 计算类对象的大小 类对象的存储方式 this指针 前言&#xff1a; C语言是面向过程的&#xff0c;关注的是过…

基于Java SSM框架实现智能停车场系统项目【项目源码+论文说明】

基于java的SSM框架实现智能停车场系统演示 摘要 本论文主要论述了如何使用JAVA语言开发一个智能停车场管理系统&#xff0c;本系统将严格按照软件开发流程进行各个阶段的工作&#xff0c;采用B/S架构&#xff0c;面向对象编程思想进行项目开发。在引言中&#xff0c;作者将论述…