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

vue3+element+AntDesign(自动导入)+pina+vite+js+pnpm搭建项目框架

vue3+element+AntDesign(自动导入)+pina+vite+js+pnpm搭建项目框架


文章目录

  • vue3+element+AntDesign(自动导入)+pina+vite+js+pnpm搭建项目框架
    • 1. 安装pnpm:通过以下命令安装pnpm,它是一个快速、零配置的包管理工具。
    • 2. 初始化项目:在命令行中执行以下命令,使用pnpm初始化一个新项目。
    • 3. 安装Vue 3:进入项目文件夹并安装Vue 3。
    • 4. 安装Element UI:使用以下命令安装Element UI。
    • 5. 安装Ant Design:使用以下命令安装Ant Design。
    • 6. 安装Pina:使用以下命令安装Pina。
    • 7. 配置Vite:在项目根目录创建一个`vite.config.js`文件,配置Vite的插件和别名。
    • 8. 创建`src/icons.js`文件:在项目的`src`目录下创建一个`icons.js`文件,用于自动导入Ant Design的图标。
    • 9. 配置Pina:在项目的`src`目录下创建一个`store.js`文件,用于配置Pina和导出Store实例。
    • 10. 修改`main.js`:将`main.js`中的`import '@/assets/style.css'`替换为`import 'element-plus/lib/theme-chalk/index.css'`,以引入Element UI的样式。
    • 12. 运行项目:执行以下命令启动开发服务器。
    • 14. git 地址:https://gitee.com/Beichenguren/vue3-web


要搭建一个基于Vue 3的项目框架,并使用Element UI、Ant Design、Pina、Vite、JavaScript和pnpm,可以按照以下步骤进行操作:

1. 安装pnpm:通过以下命令安装pnpm,它是一个快速、零配置的包管理工具。

npm install -g pnpm

2. 初始化项目:在命令行中执行以下命令,使用pnpm初始化一个新项目。

pnpm init vite@latest my-project

3. 安装Vue 3:进入项目文件夹并安装Vue 3。

cd my-project
pnpm add vue@next

4. 安装Element UI:使用以下命令安装Element UI。

pnpm add element-plus

5. 安装Ant Design:使用以下命令安装Ant Design。

pnpm add ant-design-vue@next

6. 安装Pina:使用以下命令安装Pina。

pnpm add pinia@next

7. 配置Vite:在项目根目录创建一个vite.config.js文件,配置Vite的插件和别名。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],resolve: {alias: {'@ant-design/icons/lib/dist$': path.resolve(__dirname, './src/icons.js'),},},
})

8. 创建src/icons.js文件:在项目的src目录下创建一个icons.js文件,用于自动导入Ant Design的图标。

import { createFromIconfontCN } from '@ant-design/icons-vue'const IconFont = createFromIconfontCN({scriptUrl: '//at.alicdn.com/t/font_1234567_abcd1234.js',
})export default IconFont

记得将上面的URL替换为你自己的图标库地址。

9. 配置Pina:在项目的src目录下创建一个store.js文件,用于配置Pina和导出Store实例。

import { createPinia } from 'pinia'export const store = createPinia()export function useStore() {return store
}

main.js中引入上面的store.js并使用。

import { createApp } from 'vue'
import App from './App.vue'
import { store } from './store'const app = createApp(App)
app.use(store)
app.mount('#app')

10. 修改main.js:将main.js中的import '@/assets/style.css'替换为import 'element-plus/lib/theme-chalk/index.css',以引入Element UI的样式。

  1. 修改App.vue:修改App.vue中的模板,引入Element UI和Ant Design的组件。
<template><div id="app"><el-button>Element Button</el-button><a-button type="primary">Ant Design Button</a-button></div>
</template><script>
import { useStore } from './store'export default {name: 'App',setup() {const store = useStore()return {store,}},
}
</script><style>
/* Add your custom styles here */
</style>

12. 运行项目:执行以下命令启动开发服务器。

pnpm dev

这样,就搭建好了一个基于Vue 3的项目框架,使用了Element UI、Ant Design、Pina、Vite、JavaScript和pnpm。你可以根据需要进一步开发和配置项目。

14. git 地址:https://gitee.com/Beichenguren/vue3-web

相关文章:

vue3+element+AntDesign(自动导入)+pina+vite+js+pnpm搭建项目框架

vue3elementAntDesign(自动导入)pinavitejspnpm搭建项目框架 文章目录 vue3elementAntDesign(自动导入)pinavitejspnpm搭建项目框架1. 安装pnpm&#xff1a;通过以下命令安装pnpm&#xff0c;它是一个快速、零配置的包管理工具。2. 初始化项目&#xff1a;在命令行中执行以下命…...

Android Studio XML 预览View 底部移动到右边

以前 XML 的预览都是在右边的&#xff0c;最近不知道为什么突然到下面去了&#xff0c;很不习惯 找半天想把 预览view 移动到右边&#xff0c;一直没找到按钮。 误打误撞移回来了&#xff0c;原来只要再点击一次 split&#xff0c;就可以变动位置了&#xff0c;记录一下。...

计算机网络——实现smtp和pop3邮件客户端

实验目的 运用各种编程语言实现基于 smtp 协议的 Email 客户端软件。 实验内容 1. 选择合适的编程语言编程实现基于 smtp 协议的 Email 客户端软件。 2. 安装 Email 服务器或选择已有的 Email 服务器&#xff0c;验证自己的 Email 客户端软件是否能进行正常的 Email 收发功…...

【Spring】面试题汇总

Spring1. 什么是 Spring 框架?2. 谈谈你对于 Spring IoC 的了解3. 什么是依赖注入4. Spring的依赖注入有几种方式5. 将一个类声明为 Bean 的注解有哪些?6. Component 和 Bean 的区别是什么&#xff1f;7. 注入 Bean 的注解有哪些&#xff1f;8. Bean 的作用域有哪些?9. Bean…...

thinkphp6入门(23)-- 如何导入excel

1. 安装phpexcel composer require phpoffice/phpexcel composer update 2. 前端 <form class"forms-sample" action"../../xxxx/xxxx/do_import_users" method"post" enctype"multipart/form-data"><div class"cont…...

【数据结构3-栈和队列】

数据结构3-栈和队列 1 栈-特殊的线性表-先进后出1.1 栈的三个案例 2 队列-与栈相反-先进先出2.1 队列的案例 3 用C实现栈的代码&#xff1a;4 用C实现队列的代码 1 栈-特殊的线性表-先进后出 1.1 栈的三个案例 2 队列-与栈相反-先进先出 2.1 队列的案例 3 用C实现栈的代码&…...

STL--list双向链表

功能 将数据进行链式存储 链表&#xff08;list&#xff09;是一种物理存储单元上非连续的存储结构&#xff0c;数据元素的逻辑顺序是通过链表中的指针链接实现的 链表的组成&#xff1a;链表由一系列结点组成 结点的组成&#xff1a;一个是存储数据元素的数据域&#xff0…...

ElasticSearch入门篇

简介 ElasticSearch简介&#xff1a;简称为es&#xff0c; es是一个开源的高扩展的分布式全文检索引擎&#xff0c;它可以近乎实时的存储、检索数据&#xff1b;本身扩展性很好&#xff0c;可以扩展到上百台服务器&#xff0c;处理PB级别的数据。es也使用Java开发并使用Lucene…...

MAXHUB会议解决方案持续进化,以“高效”为核心推动行业发展

4月16日&#xff0c;MAXHUB 2024新品发布会在视源股份&#xff08;002841&#xff09;北京产业园圆满举行。本次发布会以“智会融合 进化不止”为主题&#xff0c;首发MAXHUB高效会议解决方案&#xff0c;以AI智能、开放兼容、场景化交付为方向&#xff0c;为用户提供高效、便捷…...

CentOS 7安装Redis

说明&#xff1a;本文介绍如何在CentOS 7操作系统下安装Redis 下载安装 首先&#xff0c;去官网上下载所需要安装的版本&#xff0c;官网地址&#xff1a;https://download.redis.io/releases/&#xff0c;我这里下载3.2.1版本的 下载完&#xff0c;上传到云服务器上&#xf…...

Kubernetes (K8s) 部署前后端分离项目

要使用Kubernetes (K8s) 部署一个涵盖Django后端、Vue前端、Redis、Nginx、RabbitMQ和MySQL的前后端分离项目,需要遵循以下步骤。这个过程涉及创建和配置多个资源,包括部署(Deployments)、服务(Services)、配置映射(ConfigMaps)、密钥(Secrets)和Ingress规则。 大纲…...

MLT媒体程序框架01:概述

MLT官网 概述 MLT是一个开源的多媒体框架&#xff0c;专为电视广播而设计和开发。它为广播公司、视频编辑器、媒体播放器、转码器、网络流媒体和更多类型的应用程序提供了一个工具包。该系统的功能是通过各种现成的工具、XML创作组件和基于API的可扩展插件提供的。 它是通过…...

9【原型模式】复制一个已存在的对象来创建新的对象

你好&#xff0c;我是程序员雪球。 今天我们来学习23种设计模式之原型模式&#xff0c;在平时开发过程中比较少见。我带你了解什么是原型模式&#xff0c;使用场景有哪些&#xff1f;有什么注意事项&#xff1f;深拷贝与浅拷贝的区别&#xff0c;最后用代码实现一个简单的示例…...

谷粒商城实战(013 业务-认证服务-短信验证)

Java项目《谷粒商城》架构师级Java项目实战&#xff0c;对标阿里P6-P7&#xff0c;全网最强 总时长 104:45:00 共408P 此文章包含第211p-第p219的内容 介绍 认证中心要集成 社交登录、OAuth2.0、单点登录 等功能 OAuth 2.0&#xff1a; 问题解决&#xff1a; OAuth 2.0 主要…...

Unity中支持泰语--没有版权限制

在Unity中支持泰语主要涉及以下几个方面&#xff1a; 选择合适的字体&#xff1a;在Unity中&#xff0c;确保使用支持泰文字符的字体是至关重要的。例如&#xff0c;可以选择使用Noto Serif Thai字体&#xff0c;这是一个支持泰语的字体2。 处理Unity版本问题&#xff1a;某些…...

C语言传统垃圾收集器的缺陷以及我的思路

传统的比如Boehm回收器&#xff0c;都是在malloc/realloc/free上做文章&#xff0c;参考这篇文章【How the Boehm Garbage Collector Works】的解释&#xff0c;因为C数据结构是无法预料的&#xff0c;内存里面并没有特殊标记&#xff0c;很难判断哪些是指针哪些是数据&#xf…...

数据交换格式

一、什么是数据交换格式 在计算机的不同程序之间&#xff0c;或者不同的编程语言之间进行交换数据&#xff0c;也需要一种大家都能听得懂得‘语言’&#xff0c;这就是数据交换格式&#xff0c;它通过文本以特定的形式来进行描述数据。 二、常用的几种数据交换格式 客户端常…...

电力系统卫星授时信号安全隔离装置防护方案

电力系统是国家关键基础设施&#xff0c; 电力安全关系国计民生&#xff0c; 是国家安全的重要保障&#xff0c; 与政治安全、经济安全、 网络安全、社会安全等诸多领域密切关联。电网运行情况瞬息万变&#xff0c;为了在其发生事故时能够及时得到处理&#xff0c;需要统一的时…...

【编程TOOL】VC++6.0下载安装配置使用保姆式教程

目录 ​编辑 1.软件介绍 2.软件下载 3.软件安装 3.1.下载得到可执行文件并双击进行安装 3.2. 点击下一步 3.3. 选择安装位置 3.4. 勾选“创建桌面快捷方式”并点击下一步 5. 点击安装并等待 3.6. 先取消运行&#xff0c;后点击完成&#xff0c;软件即安装完毕 4.兼容性配置 4.1…...

组织机构代码是哪几位?营业执照怎么看组织机构代码?

组织机构代码是哪几位? 组织机构代码通常指的是组织机构代码证上的一组特定数字&#xff0c;它用于唯一标识一个组织或机构。在中国&#xff0c;组织机构代码由9位数字组成&#xff0c;前8位是本体代码&#xff0c;最后1位是校验码。这组代码是按照国家有关标准编制的&#x…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

无法与IP建立连接,未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

连锁超市冷库节能解决方案:如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...