当前位置： 首页 > news >正文

vite搭建vue3项目

news 2026/2/7 16:00:46

参考视频

1.使用npm搭建vite项目,会自动搭建vue3项目

npm create vite@latest
yarn create vite

2.手动搭建vue3项目

  • 创建一个项目名称的文件夹
  • 执行命令：npm init -y 快速的创建一个默认的包信息
  • 安装vite: npm i vite -D
    -D开发环境的依赖
    在这里插入图片描述
  • 安装vue,现在默认是vue3. 执行命令: npm i vue -D/-S都可以
  • 创建index.html文件，src=“入口js文件” ，添加id="app"挂载点
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"></div><script type="module" src="./src/main.js"></script>
</body>
</html>
  • 创建src目录下的js入口文件main.js
  • 创建App.vue组件，并定义路由出口
<template><router-view /> <!--  定义路由出口 -->
</template>
  • 在main.js文件中引入App.vue文件
import { createApp } from "vue";
import App from './App.vue';
const app = createApp(App);
app.mount('#app');

  • 由于html文件中不能跑App.vue文件，需要安装一个插件：执行命令 npm i @vitejs/plugin-vue -D ,如果npm run dev不报错不需要安装
    在这里插入图片描述

  • 配置vite.config.js文件，如果npm run dev不报错不需要配置以下代码

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

3.在vite+vue3项目中使用vue-router和pinia

  • 安装vue-router,执行命令： npm i vue-router -D
  • src目录下创建router.js文件
import { createRouter, createWebHistory } from "vue-router";const router = createRouter({routes: [],history: createWebHistory()
})export default router;

然后需要在入口js文件中挂载路由

入口main.js文件中
import { createApp } from "vue";
import App from './App.vue';
import router from './modules/router.js'; // 导入路由
const app = createApp(App);
app.use(router); // ----挂载路由----
app.mount('#app');
  • 安装pinia 执行命令: npm i pinia -D
  • 创建pinia.js文件
import { createPinia } from "pinia";
const pinia = createPinia();
export default pinia;

还需要在入口main.js文件中挂载使用pinia

import { createApp } from "vue";
import App from './App.vue';
import router from './modules/router.js';
import pinia from './modules/pinia.js'; // 引入piniaconst app = createApp(App);
app.use(router);
app.use(pinia); // ------挂载pinia------
app.mount('#app');
  • 使用pinia
    先创建一个store/counter.js文件
import { defineStore } from "pinia";// defineStore第一个参数是它的id,
export const useCounterStore = defineStore('counter', {state() {return {num: 1, // 初始值为1}},actions: {// 只有actions了inc() {this.num++;}}
})

然后在需要使用的组件里使用

<script setup>
import { useCounterStore } from "../stores/counter.js";
const counter = useCounterStore();</script><template><div @click="counter.inc()">我是首页 {{ counter.num }}</div>
</template>

4.vite+vue3中使用按需加载

  • 为了解决在一个文件中引入多个组件，安装插件:unplugin-vue-components
npm i unplugin-vue-components -D

在vite.config.js文件中配置插件

import { defineConfig } from "vite";
import Vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite'; // 导入插件export default defineConfig({plugins: [Vue(), Components()] // -----挂载插件------
})

在需要使用的组件中：

<script setup>
// 安装了unplugin-vue-components插件后，components中的组件可以不用引入直接使用
// import Common from "../components/Common.vue";
</script><template>我是about页面<Common />
</template>
  • 在element-plus中使用按需加载
    在vite.config.js中配置
import { defineConfig } from "vite";
import Vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver, NaiveUiResolver } from 'unplugin-vue-components/resolvers'; // 配置element-plus, naiveUiexport default defineConfig({plugins: [Vue(), Components({resolvers: [ElementPlusResolver(), NaiveUiResolver()]})]
})

还需再安装element-plus:执行命令： npm i element-plus -D然后就可以再组件中使用点击一下 element-plusUI了

<el-button>element-plus按钮</el-button>

如果上面配置了NaiveUiResolver,则需要安装naive-ui,执行命令:npm i naive-ui -D
在组件中使用naive-ui会自动寻找依赖，不需要配置这些组件库直接用就好了

<n-button>naive-ui按钮</n-button>
  • 安装unplugin-auto-import插件可以不用import { ref } from ‘vue’;
npm i -D unplugin-auto-import

在vite.config.js文件中挂载插件

import { defineConfig } from "vite";
import Vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import AutoImport from "unplugin-auto-import/vite";
import { ElementPlusResolver, NaiveUiResolver } from 'unplugin-vue-components/resolvers';export default defineConfig({plugins: [Vue(),AutoImport({imports: ['vue', 'vue-router', 'pinia']}), // -------挂载插件-------需要imports值Components({resolvers: [ElementPlusResolver(), NaiveUiResolver()]})]
})

在组件中使用：

<script setup>
// import { ref } from "vue"; // 安装了插件后可以不用在导入ref
const counter = ref(100);
const inc = () => {counter.value ++;
}
</script><template><div @click="inc">Common组件{{counter}}</div>
</template>

相关文章：

vite搭建vue3项目

参考视频 1.使用npm搭建vite项目,会自动搭建vue3项目 npm create vitelatest yarn create vite2.手动搭建vue3项目 创建一个项目名称的文件夹执行命令&#xff1a;npm init -y 快速的创建一个默认的包信息安装vite: npm i vite -D -D开发环境的依赖 安装vue,现在默认是vue3.…...

编程日记 2023/9/14 1:32:36

Qt中表格属性相关操作,调整表格宽度高度自适应内容等

1 表格列宽设置 利用Qt designer设计&#xff0c;可以通过改变表头的列宽从而保证内容不会被遮盖&#xff0c;输入空格的方式增加表头的长度&#xff0c;比如表头为"Value"&#xff0c;则改成"Value "&#xff0c;可以扩展列默认的宽度&#xff0c;保证后面…...

编程日记 2023/9/14 1:30:34

NLP机器翻译全景：从基本原理到技术实战全解析

目录 一、机器翻译简介1. 什么是机器翻译 (MT)?2. 源语言和目标语言3. 翻译模型4. 上下文的重要性 二、基于规则的机器翻译 (RBMT)1. 规则的制定2. 词典和词汇选择3. 限制与挑战4. PyTorch实现 三、基于统计的机器翻译 (SMT)1. 数据驱动2. 短语对齐3. 评分和选择4. PyTorch实现…...

编程日记 2023/9/14 1:29:33

docker四种网络模式

文章目录 一.为什么要了解docker网络二.docker 网络理论三.docker的四类网络模式3.1 bridge模式3.2 host模式3.3 container模式3.4 none模式 四.bridge模式下容器的通信4.1 防火墙开启状态4.2 防火墙关闭状态 一.为什么要了解docker网络 当你开始大规模使用Docker时&#xff0…...

编程日记 2023/9/14 1:27:31

C 风格文件输入/输出---无格式输入/输出---（std::fgetc，std::getc，std::fgets）

C 标准库的 C I/O 子集实现 C 风格流输入/输出操作。 <cstdio> 头文件提供通用文件支持并提供有窄和多字节字符输入/输出能力的函数&#xff0c;而 <cwchar>头文件提供有宽字符输入/输出能力的函数。 无格式输入/输出 从文件流获取字符 std::fgetc, std::getc …...

编程日记 2023/9/14 1:26:30

多线程之间如何进行通信 ？

实现多线程之间通信的方式有多种，以下是一些常见的方式： 共享变量：多个线程共享一个变量，通过互斥锁（如synchronized关键字）来保护对该变量的访问，确保线程之间的安全通信。 wait() 和 notify() / notifyAll()：通过Object类的wait()方法使线程等待，然后使用notify()或…...

编程日记 2023/9/14 1:24:28

二叉树顺序存储结构

目录 1.二叉树顺序存储结构 2.堆的概念及结构 3.堆的相关接口实现 3.1 堆的插入及向上调整算法 3.1.1 向上调整算法 3.1.2 堆的插入 3.2 堆的删除及向下调整算法 3.2.1 向下调整算法 3.2.2 堆的删除 3.3 其它接口和代码实现 4.建堆或数组调堆的两种方式及复杂度分析…...

编程日记 2023/9/14 1:23:28

Apache HTTPD 多后缀解析漏洞复现

Apache HTTPD 支持一个文件拥有多个后缀&#xff0c;并为不同后缀执行不同的指令。比如&#xff0c;如下配置文件&#xff1a; AddType text/html .html AddLanguage zh-CN .cn 其给.html后缀增加了media-type&#xff0c;值为text/html&#xff1b;给.cn后缀增加了语言&…...

编程日记 2023/9/14 1:22:27

【深入浅出C#】章节10: 最佳实践和性能优化：内存管理和资源释放

一、 内存管理基础 1.1 垃圾回收机制 垃圾回收概述 垃圾回收&#xff08;Garbage Collection&#xff09;是一种计算机科学和编程领域的重要概念&#xff0c;它主要用于自动管理计算机程序中的内存分配和释放。垃圾回收的目标是识别和回收不再被程序使用的内存&#xff0c;以…...

编程日记 2023/9/14 1:21:26

我的创作纪念日——1个普通网安人的漫谈

机缘 大家好&#xff0c;我是zangcc。今天突然收到了一条私信&#xff0c;才发现来csdn已经1024天了&#xff0c;不知不觉都搞安全渗透2年半多了&#x1f414;&#xff0c;真是光阴似箭。 我写博客的初衷只是记录自己的学习历程&#xff0c;比如打打靶场&#xff0c;写一下通关…...

编程日记 2023/9/14 1:20:25

Linux中执行bash脚本报错/bin/bash^M: bad interpreter: No such file or directory

文章目录 参考博客&#xff1a; Linux中执行bash脚本报错/bin/bash^M: bad interpreter: No such file or directory 首先在此对这位博主表示感谢。 运行bash脚本会出现两个文件&#xff0c;1037.err和1037.out。 1037.err的文件内容如下&#xff1a; /data/home/user12/.lsbat…...

编程日记 2023/9/14 1:19:24

期权交易策略主要有哪些？期权交易策略指南

在学习更复杂的看涨和看跌期权策略之前&#xff0c;普通投资者应该彻底了解一些关于期权的基本知识&#xff0c;这样有助你后期的交易能力和理论知识水平提升有很大的帮助&#xff0c;下文科普期权交易策略主要有哪些&#xff1f;期权交易策略指南&#xff01;本文来自&#xf…...

编程日记 2023/9/14 1:17:23

算法通关村第十四关——解析堆在数组中找第K大的元素的应用

力扣215题&#xff0c; 给定整数数组nums和整数k&#xff0c;请返回数组中第k个最大的元素。 请注意&#xff0c;你需要找的是数组排序后的第k个最大的元素&#xff0c;而不是第k个不同的元素。 分析&#xff1a;按照“找最大用小堆&#xff0c;找最小用大堆&#xff0c;找中间…...

编程日记 2023/9/14 1:15:20

【报错】springboot3启动报错

报错内容&#xff1a;Cannot load driver class: org.h2.Driver Error starting ApplicationContext. To display the condition evaluation report re-run your application with debug enabled. 解决; 通过源码分析&#xff0c;druid-spring-boot-3-starter目前最新版本是1…...

编程日记 2023/9/14 1:13:19

阿里云服务器配置怎么选择？小白攻略

阿里云服务器配置选择_CPU内存/带宽/存储配置_小白指南&#xff0c;阿里云服务器配置选择方法包括云服务器类型、CPU内存、操作系统、公网带宽、系统盘存储、网络带宽选择、安全配置、监控等&#xff0c;阿小云分享阿里云服务器配置选择方法&#xff0c;选择适合自己的云服务器…...

编程日记 2023/9/14 1:11:16

关于 RK3568的linux系统killed用户应用进程(用户现象为崩溃) 的解决方法

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/132710642 红胖子网络科技博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬…...

编程日记 2023/9/14 1:10:15

EasyPHP-Devserver-17安装和配置mantisBT

文章目录 1、准备工作2、安装easyphp2.1 http://127.0.0.1 无法访问 3、安装mantisBT和phpMyAdmin3.1 配置浏览器的访问url和端口号&#xff08;配置局域网内可访问&#xff09;3.2 安装mantis 4、Administrator 注册新用户时设置登录密码5、附件上传6、邮件配置 文章参考自&am…...

编程日记 2023/9/14 1:07:13

Python打包教程 PyInstaller和cx_Freeze

当我们开发Python应用程序时&#xff0c;通常会将代码保存在.py文件中&#xff0c;然后通过Python解释器运行它。这对于开发和测试是非常方便的&#xff0c;但在将应用程序分享给其他人或在不同环境中部署时&#xff0c;可能会带来一些问题。为了解决这些问题&#xff0c;我们可…...

编程日记 2023/9/14 1:06:12

用两成数据也能训练出十成功力的模型，Jina Embeddings 这么做

句向量&#xff08;Sentence Embeddings&#xff09;模型在多模态人工智能领域起着至关重要的作用&#xff0c;它通过将句子编码为固定长度的向量表示&#xff0c;将语义信息转化为机器可以处理的形式&#xff0c;在 文本分类、信息检索和相似度计算 等多个方面有着广泛应用。 …...

编程日记 2023/9/14 1:03:08

SpringCloud Eureka搭建会员中心服务提供方-集群

&#x1f600;前言 本篇博文是关于SpringCloud Eureka搭建会员中心服务提供方-集群&#xff0c;希望你能够喜欢 &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章可以帮助到大家&#xff0c;您…...

编程日记 2023/9/14 0:59:03

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2026/2/7 3:38:31

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

编程新知 2026/2/4 4:25:40

linux 错误码总结

1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/9/16 22:48:47

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

编程新知 2025/10/7 0:32:40

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

编程新知 2025/9/25 5:16:24

Caliper 配置文件解析：config.yaml

Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...

编程新知 2025/8/13 13:40:18

是否存在路径（FIFOBB算法）

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

编程新知 2025/10/1 6:09:21

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

编程新知 2026/1/20 12:53:30

IP如何挑？2025年海外专线IP如何购买？

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

编程新知 2026/1/28 3:04:35

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

编程新知 2026/2/4 10:28:25