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

vue后台管理系统从0到1(3)element plus 的三种导入方式

文章目录

  • vue后台管理系统从0到1(3)element plus 的三种导入方式
    • element plus 引入方式
      • 完整引入
      • 按需导入
      • 手动导入

vue后台管理系统从0到1(3)element plus 的三种导入方式

element plus 引入方式

官方网址:https://element-plus.org/zh-CN/guide/quickstart.html

在这里插入图片描述

完整引入

根据官网提升,首先在 main.js 中引入代码
在这里插入图片描述
在我们上一期的代码中加入以下三条代码

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

然后我们测试一下,是否引入成功,在app.vue中加入一个按钮
在这里插入图片描述
Main.vue

<script setup></script><template>
helloworld<RouterView></RouterView><el-button>默认按钮</el-button>
</template><style scoped></style>

运行代码看浏览器
在这里插入图片描述

这种方式引入成功

按需导入

在这里插入图片描述
第一步先下载插件

 npm install -D unplugin-vue-components unplugin-auto-import

在这里插入图片描述
第二部在vite.config.js中加入配置代码
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

这里你们直接复制我的就好了

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({plugins: [vue(),AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],resolve: {alias: [{find:"@",replacement:"/src"}]},
});

然后我们先去把上次的全部导入的代码注释掉
在这里插入图片描述
在main.js中注释掉这三行代码

重新启动程序在这里插入图片描述
发现依旧可以显示按钮,配置成功
在这里插入图片描述

手动导入

在这里插入图片描述
在这里插入图片描述

第一步,下载插件

npm install  unplugin-element-plus -D

在这里插入图片描述
第二步,修改配置文件
在这里插入图片描述

加入这两句

import ElementPlus from 'unplugin-element-plus/vite'plugins: [vue(),ElementPlus()//   AutoImport({//   resolvers: [ElementPlusResolver()],// }),//    Components({//    resolvers: [ElementPlusResolver()],//  }),],

完整配置代码如下

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';// import AutoImport from 'unplugin-auto-import/vite'
// import Components from 'unplugin-vue-components/vite'
// import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import ElementPlus from 'unplugin-element-plus/vite'export default defineConfig({plugins: [vue(),ElementPlus()//   AutoImport({//   resolvers: [ElementPlusResolver()],// }),//    Components({//    resolvers: [ElementPlusResolver()],//  }),],resolve: {alias: [{find:"@",replacement:"/src"}]},
});

第三步,在使用按钮的地方导入
在这里插入图片描述
App.vue

<script>
import { ElButton } from 'element-plus'
export default {components: { ElButton },
}
</script><template>
helloworld<RouterView></RouterView><el-button>默认按钮</el-button>
</template><style scoped></style>

重启项目
在这里插入图片描述
查看按钮状态:
在这里插入图片描述
配置成功!!!!

最后,我们使用第二种,按需导入

删除 App.vue script 代码
在这里插入图片描述
注释掉两行加入的代码在vite.config.js
在这里插入图片描述
重新取消注释的上面三行导入代码,和下面两行配置代码
在这里插入图片描述
在这里插入图片描述
最后重启启动项目就好了
在这里插入图片描述
到这里第三期就结束了


http://www.mrgr.cn/news/48355.html

相关文章:

  • idea无法识别文件,如何把floder文件恢复成model
  • 网站灰度发布?Tomcat的8005、8009、8080三个端口的作用什么是CDNLVS、Nginx和Haproxy的优缺点服务器无法开机时
  • 矩阵运算的复杂度分析(Complexity Analysis of Matrix Operations):中英双语
  • git 删除鉴权缓存及账号信息
  • html中实用标签dl dt dd(有些小众的标签 但是很好用)
  • 启动报错java.lang.NoClassDefFoundError: ch/qos/logback/core/status/WarnStatus
  • Python 量子机器学习:基础概念、关键算法与应用实践
  • 第五课 Vue中的显示隐藏指令
  • Springboot 整合 Java DL4J 实现企业门禁人脸识别系统
  • 电子产品做高温老化性能测试可行性方案
  • 如何用好 CloudFlare 的速率限制防御攻击
  • Python进行过程能力分析
  • 【父子线程传值TransmittableThreadLocal使用踩坑-及相关知识拓展】
  • 基于深度学习的交通标志识别系统
  • 压缩视频还是欺诈消费者?揭秘短视频平台背后的‘省钱’秘密!
  • 【CCPC】CCPC 2023 Shenzhen Site G
  • .NET MAUI 手搓 UDP/TCP 通信
  • 萱仔求职复习系列——力扣
  • 《 C++ 修炼全景指南:十五 》突破算法极限:并查集如何轻松搞定最棘手的连通性问题?
  • 《深度学习》【项目】OpenCV 答题卡识别 项目流程详解
  • QD1-P4 HTML标题标签(h)水平线标签(hr)
  • dd 工具 是一个在 Linux 系统中用于复制文件和转换文件的工具
  • vue后台管理系统从0到1(2)
  • Basic penetration_1靶机渗透
  • 数据结构——树和森林
  • Bob_ 1.0.1靶机渗透