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

vite搭建vue3项目

news 文章来源：https://blog.csdn.net/weixin_41166682/article/details/132715131 2025/1/11 7:11:55

参考视频

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项目创建一个项目名称的文件夹执行命令：npm init -y 快速的创建一个默认的包信息安装vite: npm i vite -D -D开发环境的依赖安装vue,现在默认是vue3.…...

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

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

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

编程日记 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> 头文件提供通用文件支持并提供有窄和多字节字符输入/输出能力的函数，而 <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 支持一个文件拥有多个后缀，并为不同后缀执行不同的指令。比如，如下配置文件： AddType text/html .html AddLanguage zh-CN .cn 其给.html后缀增加了media-type，值为text/html；给.cn后缀增加了语言&…...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

若该文为原创文章，转载请注明原文出处本文章博客地址：https://hpzwl.blog.csdn.net/article/details/132710642 红胖子网络科技博文大全：开发技术集合（包含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和端口号（配置局域网内可访问）3.2 安装mantis 4、Administrator 注册新用户时设置登录密码5、附件上传6、邮件配置文章参考自&am…...

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

Python打包教程 PyInstaller和cx_Freeze

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

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

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

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

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

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

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

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

详解TCP/IP协议第二篇：OSI参考模型详解

文章目录写给自己的话一：协议分层与OSI参考模型二：通过对话理解分层三：OSI参考模型写给自己的话不从恶人的计谋，不站罪人的道路，不坐亵慢人的座位，惟喜爱耶和华的律法，昼夜思想&#…...

编程日记 2023/9/14 0:58:02

OpenGL 函数列表

//纹理头文件加载 #define STB_IMAGE_IMPLEMENTATION #include "stb_image.h" //线框模式(Wireframe Mode) //glPolygonMode(GL_FRONT_AND_BACK, GL_LINE); //翻转y轴 stbi_set_flip_vertically_on_load(true); //声明鼠标滚轮回调函数 void scroll_call…...

编程日记 2023/9/14 0:57:01

【C语言】每日一题（半月斩）——day1

目录 😊前言一.选择题 1.执行下面程序，正确的输出是（c） 2.以下不正确的定义语句是（ ） 3.test.c 文件中包括如下语句，文件中定义的四个变量中，是指针类型的变量为【多选】&a…...

编程日记 2023/9/14 0:53:58

Spring MVC 七 - Locale 本地化

Spring各模块都支持国际化，SpringMVC也同样支持。DispatcherServlet通过Locale Resovler自动根据客户端的Locale支持国际化。 request请求上来后，DispatcherServlet查找并设置Locale Resovler，我们可以通过RequestContext.getLocale()获取到…...

编程日记 2023/9/14 0:49:52

力扣（LeetCode）算法_C++——替换后的最长重复字符

给你一个字符串 s 和一个整数 k 。你可以选择字符串中的任一字符，并将其更改为任何其他大写英文字符。该操作最多可执行 k 次。在执行上述操作后，返回包含相同字母的最长子字符串的长度。示例 1： 输入：s “ABAB”, k 2 输出…...

编程日记 2023/9/14 0:40:44

unity 编辑器时读取FairyGUI图集单个图像

原因想要在编辑器扩展也能访问FairyGUI图集里面的小图，随便找了一下没有找到接口自己做一个方法使用UIPackage.GetItemByURL获得小图信息。从图集中复制出小图，如果有旋转就逆旋转90度即可图集里面的小图是有可能旋转的，可以通过访问 …...

编程日记 2023/9/14 0:38:42

下载配置 maven并在 idea 上应用

目录一 maven 定义二 Maven特点三 Maven仓库四安装配置maven 步骤一:准备安装包,解压步骤二:配置maven的环境变量步骤三:测试maven的环境变量是否配置成功步骤四:配置maven本地仓库步骤五:阿里云、腾讯镜像配置步骤六:全局配置idea的maven路径步骤七:创建…...

编程日记 2023/9/14 0:36:40

网站搭建从零开始（0）--域名的选择与解析

目录确定用途购买域名使用可靠的注册商购买域名想好域名关键词检查域名是否可用添加域名到购物车并完成购买域名的解析登录注册商账户选择要配置的域名进入DNS解析设置添加DNS记录保存配置检查解析是否生效提示确定用途在购买域名之前&#xf…...

编程日记 2023/9/14 0:35:39

数分面试题2-牛客

1、面对大方差如何解决 1，AB实验场景下，如果一个指标的方差较大表示它的波动较大，那么实验组和对照组的显著差异可能是因为方差较大即随机波动较大。解决方法有：PSM方法、CUPED(方差缩减) PSM代表"Propensity Score Matchin…...

编程日记 2023/9/14 0:32:37

Android codec2 编码 -- 基于录屏

文章目录前言android 原生的应用srcreenrecordMediaCodec获取编码数据流程前言本篇文章主要是理解Android 12编码的流程， 首先从上层的应用出发理解mediacodec提供给外部API的用法。然后针对每个api 分析编码各个流程中框架中的流程。熟悉一个框架的流程可以…...

编程日记 2023/9/14 0:30:35

政府网站建设管理办法/上海网络推广

设计师同学们，我想大家都会在被指点江山之后，产生这样一个疑问：该如何让你的非设计师同事更好的了解设计，从而避免因彼此的主观而导致的理解鸿沟呢？ 想必下面这篇文章，你真该要推荐他们读一下了。&#xf…...

编程日记 2025/1/11 6:38:32

网站关键词排名/今日热搜榜

折纸王子帮你找折纸图解你好，我是折纸王子，欢迎来到我的公众号。折纸王子教你折纸，讲解详细，演示清楚，容易听懂，一学就会。往期精彩：圣诞节剪纸折纸大全43款万圣节折纸大全专辑 29款折纸张口霸王…...

编程日记 2025/1/11 5:11:58

做动态网站必学/广告推广网站

💥 项目专栏：【Pandas数据处理100例目录】Python数据分析玩转Excel表格数据前言大家好，我是阿光。本专栏整理了《Pandas数据分析处理》，内包含了各种常见的数据处理，以及Pandas内置函数的使用方法，帮助我们快速便捷的处理表格数据。正在更新中~ ✨ 🚨 我的项目…...

编程日记 2025/1/11 4:14:11

网站开发案例/外链查询

1. 实现方法处理器有一个24位的系统定时器，SysTick。该定时器向下计数。计数到0后，重新从STK_LOAD寄存器中重载计数值，继续向下计数。使用SysTick的优点是，不用占用中断和定时器资源。 2. 相关寄存器 STK_CTRL： 0…...

编程日记 2025/1/10 22:58:00

石碣做网站/长沙网络推广

圆盘扭转传递矩阵法三圆盘系统的自由扭振 1.边界条件边界条件： 即第1个圆盘左侧的扭矩与第3个圆盘右侧的扭矩为0 2.通过传递矩阵计算出每个圆盘的状态变量第i个圆盘左端与右端的传递关系为：点传递矩阵第i个轴左端与右端的传递关系为：场…...

编程日记 2025/1/10 22:00:29

网站怎样做百度推广计划/网络营销的特点不包括

CDC::GetDeviceCaps()物理长度与屏幕像素间的转换作用:读取DC的一些打印区域信息,主要是像素和英寸方面的数据. 声明:GetDeviceCaps(int ) 使用例子://所有像素数int pagecxdc.GetDeviceCaps(HORZRES);int pagecydc.GetDeviceCaps(VERTRES); //即每英寸点数short cxInch dc.G…...

编程日记 2025/1/10 20:38:25

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

2.手动搭建vue3项目

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

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

相关文章：