gpt4 book ai didi

Vue中正确使用Element-UI组件的方法实例

转载 作者:qq735679552 更新时间:2022-09-29 22:32:09 27 4
gpt4 key购买 nike

CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章Vue中正确使用Element-UI组件的方法实例由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.

 1、CDN 。

目前可以通过 unpkg.com/element-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用.

<!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script>

2、npm安装 。

1、打开终端(开发工具中打开或(win+r)后输入cmd进入) 。

2、进入到对应的项目中 。

例:

3、输入vue add element后回车,等待一小会 。

4、它会提示你是全局引入(Fully import)还是按需引入(Import on demand),选择 Fully import 回车即可 。

Vue中正确使用Element-UI组件的方法实例

5、然后会提示(输入 N 回车即可) 。

Vue中正确使用Element-UI组件的方法实例

6、然后会提示你选择语言,选择 zh-CN 回车即可 。

Vue中正确使用Element-UI组件的方法实例

7、引入完成(在src目录下会新增一个plugins文件夹和element.js文件) 。

Vue中正确使用Element-UI组件的方法实例

Vue中正确使用Element-UI组件的方法实例

3、测试是否成功引入 。

1、在main.js文件中引入element.js 。

import "./plugins/element.js"

Vue中正确使用Element-UI组件的方法实例

在.vue文件中输入<el-button>el-button</el-button>最后 npm run serve 运行项目,若结果显示出下图的按钮效果则表示引入成功! 。

  。

4、最后附上Element-UI组件库的使用文档地址 。

https://element.eleme.cn/#/zh-CN/component/installation 。

总结 。

到此这篇关于Vue中正确使用Element-UI组件的文章就介绍到这了,更多相关Vue使用Element-UI组件内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我! 。

原文链接:https://blog.csdn.net/LoveSongi/article/details/109011669 。

最后此篇关于Vue中正确使用Element-UI组件的方法实例的文章就讲到这里了,如果你想了解更多关于Vue中正确使用Element-UI组件的方法实例的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com