保姆级教程用vite创建vue3项目并初始化添加PrimeVue UI踩坑实录

文章目录

    • 一、什么是PrimeVue
    • 二、详细教程
      • 1.添加PrimeVue
      • 2.配置main.js
      • 3.添加自动引入
      • 4.配置vite.config.js
      • 5.创建测试页面

一、什么是PrimeVue

PrimeVue 是一个用于 Vue.js 3.x 开发的一款高质量、广受欢迎的 Web UI 组件库。

在这里插入图片描述

官网地址:https://primevue.org/

二、详细教程

我这里是通过 vite 安装的
至于怎么用 vite 搭建 vue3 项目及其初始化的教程,详请看我上一篇文章:
一文教你用vite创建vue3项目初始化并添加router、axios、Pinia保姆级教程

这里就直接开始搞命令:

1.添加PrimeVue

pnpm add primevue @primevue/themes

2.配置main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import Aura from "@primevue/themes/aura";const app = createApp(App);
app.use(PrimeVue, {theme: {preset: Aura,},
});
app.mount("#app");

3.添加自动引入

pnpm i unplugin-vue-components -D
pnpm i @primevue/auto-import-resolver -D

4.配置vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite";
import { PrimeVueResolver } from "@primevue/auto-import-resolver";// https://vite.dev/config/
export default defineConfig({plugins: [vue(),Components({resolvers: [PrimeVueResolver()],}),]
});

5.创建测试页面

我们将 前面根据教程初始化好的 index.vue 页面的代码改为:

<template><div class="card"><Accordion value="0"><AccordionPanel value="0"><AccordionHeader>Header I</AccordionHeader><AccordionContent><p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum.</p></AccordionContent></AccordionPanel><AccordionPanel value="1"><AccordionHeader>Header II</AccordionHeader><AccordionContent><p class="m-0">Sed ut perspiciatis unde omnis iste natus error sit voluptatemaccusantium doloremque laudantium, totam rem aperiam, eaque ipsaquae ab illo inventore veritatis et quasi architecto beatae vitaedicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sitaspernatur aut odit aut fugit, sed quia consequuntur magni doloreseos qui ratione voluptatem sequi nesciunt. Consectetur, adipiscivelit, sed quia non numquam eius modi.</p></AccordionContent></AccordionPanel><AccordionPanel value="2"><AccordionHeader>Header III</AccordionHeader><AccordionContent><p class="m-0">At vero eos et accusamus et iusto odio dignissimos ducimus quiblanditiis praesentium voluptatum deleniti atque corrupti quosdolores et quas molestias excepturi sint occaecati cupiditate nonprovident, similique sunt in culpa qui officia deserunt mollitiaanimi, id est laborum et dolorum fuga. Et harum quidem rerum facilisest et expedita distinctio. Nam libero tempore, cum soluta nobis esteligendi optio cumque nihil impedit quo minus.</p></AccordionContent></AccordionPanel></Accordion></div>
</template><script setup>
</script>

运行起来看下效果:

在这里插入图片描述

OK,效果很好,而且移动端也是支持的,完美!

接下来就用你喜欢的方式,尽情创作吧~


都看到这里了,各位帅哥/美女,不管有用没用,都帮忙点个赞呗,谢谢~


Author
吴所畏惧 2024.12.05

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

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

相关文章

【openGauss︱PostgreSQL】openGauss或PostgreSQL查表、索引、序列、权限、函数

【openGauss︱PostgreSQL】openGauss或PostgreSQL查表、索引、序列、权限、函数 一、openGauss查表二、openGauss查索引三、openGauss查序列四、openGauss查权限五、openGauss或PostgreSQL查函数六、PostgreSQL查表七、PostgreSQL查索引八、PostgreSQL查序列九、PostgreSQL查权…

QT的ui界面显示不全问题(适应高分辨率屏幕)

//自动适应高分辨率 QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);一、问题 电脑分辨率高&#xff0c;默认情况下&#xff0c;打开QT的ui界面&#xff0c;显示不全按钮内容 二、解决方案 如果自己的电脑分辨率较高&#xff0c;可以尝试以下方案&#xff1a;自…

超级详细,如何手动安装python第三方库?

文章目录 1&#xff0c;python第三方库安装包有3种类型2&#xff0c;python第三方库安装包whl文件如何安装&#xff1f;3&#xff0c;python第三方库安装包zip和tar.gz文件如何安装&#xff1f;4&#xff0c; python第三方库安装包exe文件如何安装&#xff1f; 手动安装第三方库…

Alibaba EasyExcel 导入导出全家桶

一、阿里巴巴EasyExcel的优势 首先说下EasyExcel相对 Apache poi的优势&#xff1a; EasyExcel也是阿里研发在poi基础上做了封装&#xff0c;改进产物。它替开发者做了注解列表解析&#xff0c;表格填充等一系列代码编写工作&#xff0c;并将此抽象成通用和可扩展的框架。相对p…

什么叫自动获得ip地址?自动获得的ip地址怎么设置

在数字化时代&#xff0c;网络连接已成为我们日常生活和工作中不可或缺的一部分。然而&#xff0c;对于非技术用户而言&#xff0c;复杂的网络配置常常令人感到困惑。幸运的是&#xff0c;自动获得IP地址技术的出现&#xff0c;极大地简化了网络配置过程。本文将详细介绍自动获…

mac: docker : Command not found解决

描述: 安装docker但是docker命令显示Command not found 分析: mac没有配置对应的环境变量 解决方案: 打开配置文件: vim ~/.zshrc写docker环境变量: export PATH"/Applications/Docker.app/Contents/Resources/bin:$PATH"保存退出: esc,输入wq,按enter 配置文…

Redis高阶之容错切换

当一台主机master宕掉之后&#xff0c;他的从机会取代主机么&#xff1f; 查看集群状态 127.0.0.1:6385> cluster nodes c8ff33e8da5fd8ef821c65974dda304d2e3327f9 192.168.58.129:638216382 slave f6b1fd5e58df90782f602b484c2011d52fc3482d 0 1733220836918 1 connecte…

数据库原理-期末复习基础知识第二弹

1、数据的逻辑独立性是指 外模式/模式映像 当模式改变的时候&#xff0c;由数据库管理员对各个外模式/模式的映像做出相应改变&#xff0c;使外模式保持不变。由于应用程序是按照外模式进行编写的&#xff0c;故应用程序不必修改&#xff0c;保证了数据与程序的逻辑独立性。 …

流媒体之linux下离线部署FFmpeg 和 SRS

前言 用户对网络做了限制&#xff0c;只能访问指定的网址&#xff0c;和没网没啥区别&#xff0c;导致无法连接外网&#xff0c;无法获取安装包&#xff0c;还有一些编译需要的开源工具 用户需要用平台查看库房的海康摄像头实时监控&#xff0c;只能在库房里一台纯净的ubantu…

数字时代的文化宝库:存储技术与精神生活

文章目录 1. 文学经典的数字传承2. 音乐的无限可能3. 影视艺术的数字化存储4. 结语 数字时代的文化宝库&#xff1a;存储技术与精神生活 在数字化的浪潮中&#xff0c;存储技术如同一座桥梁&#xff0c;连接着过去与未来&#xff0c;承载着人类文明的瑰宝。随着存储容量的不断增…

2024年12月大语言模型最新对比:GPT-4、Claude 3、文心一言等详细评测

前言 随着人工智能技术的快速发展&#xff0c;大语言模型(LLM)已经成为了技术领域最热门的话题。本文将详细对比目前主流的大语言模型&#xff0c;帮助大家选择最适合的工具。 一、OpenAI GPT系列 1. GPT-4 核心优势&#xff1a; 多模态理解能力强 逻辑推理能力出色 创造…

TCP/IP 和 UDP

一、TCP/IP&#xff08;传输控制协议&#xff09; TCP/IP 是一个协议族&#xff0c;它是互联网的基础协议&#xff0c;为网络通信提供了标准化的方法。TCP/IP 分为四个层次&#xff0c;每一层都有特定的功能&#xff1a; 应用层&#xff1a;这是最接近用户的层&#xff0c;包含…

React第十一节 组件之间通讯之发布订阅模式(自定义发布订阅器)

组件之间通讯常用方案 1、通过props 2、通过context 3、通过发布订阅模式 4、通过Redux 后面会有专栏介绍 什么情况下使用发布订阅模式 a、当我们想要兄弟组件之间通讯&#xff0c;而共同的父组件中又用不到这些数据时候&#xff1b; b、当多个毫无相关的组件之间想要进行数据…

渗透测试之Web基础之Linux病毒编写——泷羽sec

声明&#xff1a; 学习视频来自B站UP主泷羽sec,如涉及侵权马上删除文章。本文只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负 泷羽sec的个人空间-泷羽sec个人主页-哔哩哔哩视频 (bilibili.com)https://space.bilibili.com/350329294 导读&#xff1a; 时刻…

macos上设置windsurf命令行启动

解决方案 1. 在/usr/local/bin 目录下创建软链 sudo ln -s /Applications/Windsurf.app/Contents/Resources/app/bin/windsurf /usr/local/bin/windsurf 2. 执行source source ~/.zshrc

基于神经网络的弹弹堂类游戏弹道快速预测

目录 一、 目的... 1 1.1 输入与输出.... 1 1.2 隐网络架构设计.... 1 1.3 激活函数与损失函数.... 1 二、 训练... 2 2.1 数据加载与预处理.... 2 2.2 训练过程.... 2 2.3 训练参数与设置.... 2 三、 测试与分析... 2 3.1 性能对比.... 2 3.2 训练过程差异.... 3 四、…

Xlsxwriter生成Excel文件时TypeError异常处理

在使用 XlsxWriter 生成 Excel 文件时&#xff0c;如果遇到 TypeError&#xff0c;通常是因为尝试写入的值或格式与 XlsxWriter 的限制或要求不兼容。 1、问题背景 在使用 Xlsxwriter 库生成 Excel 文件时&#xff0c;出现 TypeError: “expected string or buffer” 异常。此…

MATLAB期末复习笔记(下)

目录 五、数据和函数的可视化 1.MATLAB的可视化对象 2.二维图形的绘制 3.图形标识 4.多子图绘图 5.直方图的绘制 &#xff08;1&#xff09;分类 &#xff08;2&#xff09;垂直累计式 &#xff08;3&#xff09;垂直分组式 &#xff08;4&#xff09;水平分组式 &…

操作系统学习

问题&#xff1a; 因为想用傲梅来给系统盘扩容&#xff0c;导致无法进入操作系统&#xff0c;报错如下&#xff1a; 无法加载应用程序或操作系统&#xff0c;原因是所需文件丢失或包含错误. 文件:Windowslsystem32lwinload.efi错误代码: 0xc000007b 你需要使用恢复工具。如果…

【环境搭建】Python、PyTorch与cuda的版本对应表

一个愿意伫立在巨人肩膀上的农民...... 在深度学习的世界里&#xff0c;选择合适的工具版本是项目成功的关键。CUDA、PyTorch和Python作为深度学习的三大支柱&#xff0c;它们的版本匹配问题不容忽视。错误的版本组合可能导致兼容性问题、性能下降甚至项目失败。因此&#xff0…