ElementUI项目的搭建和简介

- 日理万妓 2022-12-27 08:16 172阅读 0赞

ElementUI 项目搭建的环境

在ElementUI官网提供了两种方式进行使用ElementUI，有直接使用CDN加速进行使用，但是在现在都需要进行前后端分离，所以说我们这还是使用Vue-cli脚手架进行安装。先安装一个脚手架的项目。脚手架的使用参考[ 这篇文章，单击前往][Link 1]

安装脚手架之后，进行这个项目，使用官网提供的命令进行下载elementUI。`npm i element-ui -S`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70]  
ElementUI 项目在vue-cli下搭建的配置

在main.js当中进行导入ElementUI，并且让Vue进行使用，添加以下三行代码

import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    
    Vue.use(ElementUI);

ElementUI组件的使用

先构建一个vue文件，进行注册到index.js当中，而使用组件我们只需要去官网当中复制组件的代码到vue文件当中即可。[官网地址： https://element.eleme.cn/\#/zh-CN/component/button][https_element.eleme.cn_zh-CN_component_button]

以按钮组件为例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 1]

[Link 1]: https://blog.csdn.net/qq_44973159/article/details/110817944
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70]: /images/20221120/6261fe2a54b14cc996da2d7837eb27a3.png
[https_element.eleme.cn_zh-CN_component_button]: https://element.eleme.cn/#/zh-CN/component/button
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 1]: /images/20221120/e8b06db4de844d65b45dfb50e234c674.png