【Vue基础】element快速入门

叁歲伎倆 2023-10-11 21:37 10阅读 0赞

**一、知识点整理**

1、安装Element UI组件库，在当前目录下，在命令行执行指令：

npm install element -ui@2.15.3

如果无法安装，执行以下指令：

npm install --legacy-peer-deps element-ui --save

![83ea79f38f81437292507b00bc8c35e2.png][]

2、引入Element组件库

![36b3206c12d648d58a91c69656b94745.png][]

![54f9d92a9a504b48b328216eb3c7e743.png][]

3、访问官网，复制代码，调整代码

![90b22ae13a5041edacc3bacbd04de8f0.png][]

![9058810fb33f43f5bc7cc54bdba24771.png][]

新建element目录和vue文件![a3d10e0f29554b01ab22de4823f0b794.png][]

4、运行效果

修改App.vue的<div>内容

![f47b414b22d845cfa9a1851f2976fbca.png][]

![694f76c8a2d8425cb2f63e9ba8e28e9f.png][]

此时浏览器页面显示出需要得效果：

![8107310b668548dbb017d4191a4f2a8b.png][]

**二、参考链接**

1、element组件库

[https://element.eleme.cn/\#/zh-CN/component/installation][https_element.eleme.cn_zh-CN_component_installation]

2、element快速入门视频教程

[https://www.bilibili.com/video/BV1m84y1w7Tb?p=40&spm\_id\_from=pageDriver&vd\_source=841fee104972680a6cac4dbdbf144b50][https_www.bilibili.com_video_BV1m84y1w7Tb_p_40_spm_id_from_pageDriver_vd_source_841fee104972680a6cac4dbdbf144b50]

3、

[83ea79f38f81437292507b00bc8c35e2.png]: https://img-blog.csdnimg.cn/83ea79f38f81437292507b00bc8c35e2.png
[36b3206c12d648d58a91c69656b94745.png]: https://img-blog.csdnimg.cn/36b3206c12d648d58a91c69656b94745.png
[54f9d92a9a504b48b328216eb3c7e743.png]: https://img-blog.csdnimg.cn/54f9d92a9a504b48b328216eb3c7e743.png
[90b22ae13a5041edacc3bacbd04de8f0.png]: https://img-blog.csdnimg.cn/90b22ae13a5041edacc3bacbd04de8f0.png
[9058810fb33f43f5bc7cc54bdba24771.png]: https://img-blog.csdnimg.cn/9058810fb33f43f5bc7cc54bdba24771.png
[a3d10e0f29554b01ab22de4823f0b794.png]: https://img-blog.csdnimg.cn/a3d10e0f29554b01ab22de4823f0b794.png
[f47b414b22d845cfa9a1851f2976fbca.png]: https://img-blog.csdnimg.cn/f47b414b22d845cfa9a1851f2976fbca.png
[694f76c8a2d8425cb2f63e9ba8e28e9f.png]: https://img-blog.csdnimg.cn/694f76c8a2d8425cb2f63e9ba8e28e9f.png
[8107310b668548dbb017d4191a4f2a8b.png]: https://img-blog.csdnimg.cn/8107310b668548dbb017d4191a4f2a8b.png
[https_element.eleme.cn_zh-CN_component_installation]: https://element.eleme.cn/#/zh-CN/component/installation
[https_www.bilibili.com_video_BV1m84y1w7Tb_p_40_spm_id_from_pageDriver_vd_source_841fee104972680a6cac4dbdbf144b50]: https://www.bilibili.com/video/BV1m84y1w7Tb?p=40&spm_id_from=pageDriver&vd_source=841fee104972680a6cac4dbdbf144b50