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

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

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

相关文章

python时间内存计算

记录python时间内存计算操作 时间计算采用time模块内存计算分别采用memory_profiler和psutil 1.占用时间计算&#xff1a;time import timedef funT(t):for i in range(t*10):passif __name____main__:t10begintime.time()funT(t)endtime.time()print(时间&#xff1a;{}s.for…

Qt plugin 开发UI界面插件

目录 1.创建接口 2.创建插件 3.创建插件界面 4.插件实现 5.创建应用工程 6.应用插件 1.创建接口 打开QtCreater&#xff0c;点击左上角“文件”->新建文件或项目&#xff0c;在弹窗中选择C/CHeader File。 输入文件名&#xff0c;选好路径&#xff08;可自行设置名称…

jsonpath在线解析器网址

jsonpath在线解析器网址&#xff1a;https://jsonpath.com/

手动实现简易版RPC(上)

手动实现简易版RPC(上) 前言 什么是RPC&#xff1f;它的原理是什么&#xff1f;它有什么特点&#xff1f;如果让你实现一个RPC框架&#xff0c;你会如何是实现&#xff1f;带着这些问题&#xff0c;开始今天的学习。 本文主要介绍RPC概述以及一些关于RPC的知识&#xff0c;为…

02-结构化程式与自定义函数

视频教程&#xff1a;b站视频【MATLAB教程_台大郭彦甫&#xff08;14课&#xff09;原视频补档】https://www.bilibili.com/video/BV1GJ41137UH/?share_sourcecopy_web&vd_sourc*ed6b9f96888e9c85118cb40c164875dfc 官网教程&#xff1a; MATLAB 快速入门 - MathWorks 中…

【动手学深度学习】15_汉诺塔问题

注&#xff1a; 本系列仅为个人学习笔记&#xff0c;学习内容为《算法小讲堂》&#xff08;视频传送门&#xff09;&#xff0c;通俗易懂适合编程入门小白&#xff0c;需要具备python语言基础&#xff0c;本人小白&#xff0c;如内容有误感谢您的批评指正 汉诺塔&#xff08;To…

基于springboot实现高校学科竞赛平台系统项目【项目源码+论文说明】

基于springboot实现高校学科竞赛平台系统演示 摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了高校学科竞赛平台的开发全过程。通过分析高校学科竞赛平台管理的不足&#xff0c;创建了一个计算机管理高校学科竞…

day02 51单片机

51单片机学习 1闪烁LED 1.1 需求描述 这个案例,我们要让P00引脚对应的LED按照1秒闪烁1次。 1.2 硬件设计 1.1 软件设计 1)LED闪烁的代码 想让LED闪烁,就需要P00的值不断在0和1之间循环变化。实现这一功能的代码也很简单: #include <STC89C5xRC.H> //包含STC89…

超详细的 Python 文件操作知识!

python进行文件操作&#xff0c;在日常编程中是很常用的。为了方便大家&#xff0c;这里对各种文件操作的知识进行汇总。一文在手&#xff0c;无须它求&#xff01;来一起学习吧。 一、文件的打开和关闭 open()函数 f1 open(rd:\测试文件.txt, moder, encodingutf-8) conte…

nandgame中的Function(函数定义)传输传递、返回值

参考&#xff1a;https://zhuanlan.zhihu.com/p/613188641 函数函数宏定义了函数块的顶部。 它应该调整堆栈以为本地存储腾出空间。 本地存储的大小由占位符localsCount给出。名为占位符functionName的标签应该开始该块。 将LOCALS设置为当前SP。 通过将localsCount添加到当前…

《剑指 Offer》专项突破版 - 面试题 105 和 106 : 最大的岛屿和二分图(C++ 实现)

目录 面试题 105 : 最大的岛屿 面试题 106 : 二分图 面试题 105 : 最大的岛屿 题目&#xff1a; 海洋岛屿地图可以用由 0、1 组成的二维数组表示&#xff0c;水平或竖直方向相连的一组 1 表示一个岛屿&#xff0c;请计算最大的岛屿的面积&#xff08;即岛屿中 1 的数目&…

uniapp实现文件和图片选择上传功能实现

主要介绍了uni-file-picker文件选择上传,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 上传一张: <template><view class="container example"><uni-forms ref="baseForm" …

数列求和 蓝桥杯 java

题目描述 给定 n 个数 Ai&#xff0c;问能满足 m! 为∑ni1(Ai!) 的因数的最大的 m 是多少。其中 m! 表示 m 的阶乘&#xff0c;即 1 2 3 m。 输入格式 输入的第一行包含一个整数 n 。 第二行包含 n 个整数&#xff0c;分别表示 Ai&#xff0c;相邻整数之间使用一个空…

【MATLAB】基于Wi-Fi指纹匹配的室内定位-仿真获取WiFi RSSI数据(附代码)

基于Wi-Fi指纹匹配的室内定位-仿真获取WiFi RSSI数据 WiFi指纹匹配是室内定位最为基础和常见的研究&#xff0c;但是WiFi指纹的采集可以称得上是labor-intensive和time-consuming。现在&#xff0c;给大家分享一下我们课题组之前在做WiFi指纹定位时的基于射线跟踪技术仿真WiFi…

chrome 浏览器 有自带的自动字幕功能,支持英文,控制您的音乐、视频等媒体内容

chrome 浏览器 有自带的自动字幕功能&#xff0c;支持英文&#xff0c;控制您的音乐、视频等媒体内容

【机器学习算法】决策树和随机森林在计算机视觉中的应用

前言 决策树和随机森林在计算机视觉中有着广泛的应用。决策树作为一种简单而强大的分类模型&#xff0c;可以用于图像分类、目标检测、特征提取等任务。它能够根据图像的特征逐层进行判断和分类&#xff0c;从而实现对图像数据的智能分析和理解。随机森林作为一种集成学习方法&…

SpringBoot3配置SpringSecurity6

访问1&#xff1a;localhost:8080/security&#xff0c;返回&#xff1a;需要先认证才能访问&#xff08;说明没有权限&#xff09; 访问2&#xff1a;localhost:8080/anonymous&#xff0c;返回&#xff1a;anonymous&#xff08;说明正常访问&#xff09; 相关文件如下&…

[dvwa] CSRF

CSRF 0x01 low 跨站&#xff0c;输入密码和确认密码直接写在url中&#xff0c;将连接分享给目标&#xff0c;点击后修改密码 社工方式让目标点击短链接 伪造404页&#xff0c;在图片中写路径为payload&#xff0c;目标载入网页自动请求构造链接&#xff0c;目标被攻击 http…

jupyter 重新下载与安装教程

jupyter 重新下载与安装教程 conda 卸载 要卸载 Jupyter&#xff0c;首先需要确定你是通过哪种方式安装的。由于你提到不确定是通过 conda 还是本地的 Python 安装的&#xff0c;我们可以分别检查并尝试卸载。 conda list jupyter这里选择你所有的jupyter 相关的包 conda r…

【STL】栈(stack)

笔者在做下面这道题的时候想到用栈&#xff0c;但写的很麻烦 代码&#xff1a; #include<bits/stdc.h> using namespace std; #define MAXC 255 typedef int SElemType; typedef struct StackNode {SElemType data;struct StackNode *next; }StackNode,*LinkStack; bool…