03 使用Vite开发Vue3项目

news2024/11/28 6:53:52

概述

要使用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.coloradmin.cn/o/1318661.html

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

相关文章

解决“bat中文路径乱码“问题

解决“bat中文路径乱码“问题

今天&#xff0c;在使用.bat脚本&#xff0c;将hello.png从"D:\mypic\备份"目录&#xff0c;拷贝到"D:\mypic\备份"时&#xff1b;发现中文乱码,弹出如下对话框: 图(1) bat中文路径乱码 原来的命令是&#xff1a; copy D:\mypic\one\hello.png D:\mypic\备…
阅读更多...
WordPress VIP收费下载插件Erphpdown v17.0.1 开心版

WordPress VIP收费下载插件Erphpdown v17.0.1 开心版

会员推广下载专业版 WordPress插件&#xff08;erphpdown&#xff09;是模板兔开发的一款针对虚拟资源收费下载/付费下载/付费视频/收费查看/付费阅读/付费查看/VIP下载查看的插件&#xff0c;经过完美测试运行于wordpress 3.x-5.x版本。后续模板兔会增加更多实用的功能。 模板…
阅读更多...
1.10 实战：Postman生成在线接口文档

1.10 实战：Postman生成在线接口文档

对于接口测试，最最关键的一个部分，就是接口文档，有了详细的接口文档，我们才能根据接口文档去写好我们的接口测试用例以及写好我们的接口自动化测试。目前比较常用的接口文档是两种方式 Swagger我们看一下Swagger的官网的例子就可以看到它有多方便了。我们打开REST API Docu…
阅读更多...
开源的数据流技术，该选择Redpanda还是Apache Kafka？

开源的数据流技术，该选择Redpanda还是Apache Kafka？

本文将比较Apache Kafka和Redpanda两种开源的数据流技术&#xff0c;在云原生实时处理能力上的不同&#xff0c;以及如何在项目中做出选择。 目前&#xff0c;Apache Kafka不但成为了数据流处理领域事实上的标准&#xff0c;而且带动了同类产品的出现。Redpanda就是其中之一…
阅读更多...
2. 基础数据结构-数组

2. 基础数据结构-数组

2. 基础数据结构-数组 2.1 概念 数组是一种数据结构&#xff0c;它是一个由相同类型元素组成的有序集合。在编程中&#xff0c;数组的定义是创建一个具有特定大小和类型的存储区域来存放多个值。数组可以是一维、二维或多维的。每个元素至少有一个索引或键来标识。 2.2 数组特…
阅读更多...
C++——C++11（1）

C++——C++11（1）

时至今日&#xff0c;C标准已经到了C23&#xff0c;但是你要说哪一次提出的标准最经 典&#xff0c;那C11一定会被人提及&#xff0c;C11带来了数量可观的变化&#xff0c;其中包 含了约140个新特性&#xff0c;以及对C03标准中约600个缺陷的修正&#xff0c;这使得 C11更像是从…
阅读更多...
no module named ‘xxx‘

no module named ‘xxx‘

目录结构如下 我想在GCNmodel的model里引入layers的GraphConvolution&#xff1a;from GCNmodel.layers import GraphConvolution&#xff0c;但这样却报错no module named GCNmodel&#xff0c;而且用from layers import GraphConvolution也不行。然后用sys.path.appen(xxx)…
阅读更多...
echarts地图的常见用法：基本使用、区域颜色分级、水波动画、区域轮播、给地图添加背景图片和图标、3d地图、飞线图

echarts地图的常见用法：基本使用、区域颜色分级、水波动画、区域轮播、给地图添加背景图片和图标、3d地图、飞线图

前言 最近几天用echarts做中国地图&#xff0c;就把以前写的demo&#xff1a;在vue中实现中国地图 拿来用&#xff0c;结果到项目里直接报错了&#xff0c;后来发现是因为版本的问题&#xff0c;没办法只能从头进行踩坑了。以下内容基于vue3 和 echarts 5.32 基本使用 获取地…
阅读更多...
广受好评的开源基础大模型最全梳理，你最钟意哪一个？

广受好评的开源基础大模型最全梳理，你最钟意哪一个？

2023 年即将过去。一年以来&#xff0c;各式各样的大模型争相发布。当 OpenAI 和谷歌等科技巨头正在角逐时&#xff0c;另一方「势力」悄然崛起 —— 开源。 开源模型受到的质疑一向不少。它们是否能像专有模型一样优秀&#xff1f;是否能够媲美专有模型的性能&#xff1f; 迄…
阅读更多...
go原生http开发简易blog（一）项目简介与搭建

go原生http开发简易blog（一）项目简介与搭建

文章目录 一、项目简介二、项目搭建前置知识三、首页- - -前端文件与后端结构体定义四、配置文件加载五、构造假数据- - -显示首页内容 代码地址&#xff1a;https://gitee.com/lymgoforIT/goblog 一、项目简介 使用Go原生http开发一个简易的博客系统&#xff0c;包含一下功能…
阅读更多...
CCF-CSP真题《202309-5 阻击》思路+ c++满分题解

CCF-CSP真题《202309-5 阻击》思路+ c++满分题解

想查看其他题的真题及题解的同学可以前往查看&#xff1a;CCF-CSP真题附题解大全 试题编号&#xff1a;202309-5试题名称&#xff1a;阻击时间限制&#xff1a;2.0s内存限制&#xff1a;512.0MB问题描述&#xff1a; 问题描述 上回提到&#xff0c;西西艾弗岛下方有一个庞大的遗…
阅读更多...
PyTorch自动梯度计算（注意点）

PyTorch自动梯度计算（注意点）

if params.grad is not None: params.grad.zero_() 我们实际的运算往往会涉及到若干个requires-grad为true的张量进行运算&#xff0c;在这种情况下&#xff0c;Pytorch会计算整个计算图上的损失的导数&#xff0c;并把这些结果累加到grad属性中。多次调用backward()会导致梯度…
阅读更多...
chrome升级后，调试vue在控制台输出总是显示cjs.js

chrome升级后，调试vue在控制台输出总是显示cjs.js

当前chrome版本120.0.6099.72 在vue中使用console.log输出时&#xff0c;总是显示cjs.js多少多少行&#xff0c;不能显示源文件名及行数 【解决方案】 打开控制台的设置 左侧找到“Ignore List”&#xff0c;取消勾选"enable Lgnore Listing"&#xff0c;并重启chr…
阅读更多...
基于C/C++的非系统库自定义读写ini配置

基于C/C++的非系统库自定义读写ini配置

INI文件由节、键、值组成。 节 [section] 参数 &#xff08;键值&#xff09; namevalue 这里将常用的操作方式封装成了一个dll供外部使用 // 下列 ifdef 块是创建使从 DLL 导出更简单的 // 宏的标准方法。此 DLL 中的所有文件都是用命令行上定义的 LIBCFG_EXPORTS // 符号…
阅读更多...
紫光FPGA DDR3 IP使用和注意事项（axi4协议）

紫光FPGA DDR3 IP使用和注意事项（axi4协议）

紫光DDR3 IP使用 对于紫光ddr3 IP核的使用需要注意事情。 阅读ddr ip手册&#xff1a; 1、注意&#xff1a;对于写地址通道&#xff0c;axi_awvalid要一直拉高&#xff0c;axi_awready才会拉高。使用的芯片型号时PG2L100H-6FBG676&#xff0c;不同的型号IP核接口和axi的握手协…
阅读更多...
wireshark下载安装

wireshark下载安装

下载 Wireshark Download 等待下载完成 安装 双击 下面的一定垚勾选上 下图的也一定要勾选上 修改为不重启&#xff0c;不需要重启也是正常的
阅读更多...
嵌入式中的门电路详讲

嵌入式中的门电路详讲

NOT门电路 NOT（非门）是数字逻辑电路中的一种基本逻辑门，也称为反相器。它执行的是逻辑非操作，即将输入信号取反。NOT门具有一个输入和一个输出。 A输入，B输出，以下是真值表： A B 0 1 1 0 AND门电路 AND（与门）是数字逻辑电路中的一种基本逻辑门，用于执行逻辑与操作。…
阅读更多...
从 0 开始实现一个 SpringBoot + Vue 项目

从 0 开始实现一个 SpringBoot + Vue 项目

从 0 开始实现一个 SpringBoot Vue 项目 从 0 开始实现一个 SpringBoot Vue 项目软件和工具创建 SpringBoot 后端项目创建 MySQL 数据库配置文件实现增删改查接口Model 层mapper 层service 层controller 层测试 从 0 开始实现一个 SpringBoot Vue 项目 软件和工具 后端开发…
阅读更多...
jmeter如何循环运行到csv文件最后一行后停止

jmeter如何循环运行到csv文件最后一行后停止

1、首先在线程组中设置’循环次数‘–勾选永远 2、csv数据文件设置中设置&#xff1a; 遇到文件结束符再次循环?——改为&#xff1a;False 遇到文件结束符停止线程?——改为&#xff1a;True 3、再次运行就会根据文档的行数运行数据 &#xff08;如果需要在循环控制器中&…
阅读更多...
[python]用python获取EXCEL文件内容并保存到DBC

[python]用python获取EXCEL文件内容并保存到DBC

目录 关键词平台说明背景所需库实现过程方法1.1.安装相关库2.代码实现 关键词 python、excel、DBC、openpyxl 平台说明 项目Valuepython版本3.6 背景 在搭建自动化测试平台的时候经常会提取DBC文件中的信息并保存为excel或者其他文件格式&#xff0c;用于自动化测试。本文…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023