element ui

今天药忘吃喽~ 2023-07-08 11:30 10阅读 0赞

**一.element安装**

1.**npm 安装**

Windows+R打开cmd，输入：  
![在这里插入图片描述][20200226152936777.png]  
2.**CDN**  
![在这里插入图片描述][20200226153116189.png]  
如果使用element引入组件时，引入如图index.css和index.js即可。

**二.使用element**

element是一个插件，所以引入里边的组件之后才可以运用。  
**1.在 main.js 中写入以下内容**：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pob3VjaGFuZ3l1ZQ_size_16_color_FFFFFF_t_70]  
2.下面有两种引入方式，一个是按需引入，就是说需要哪个组件就引入那个组件，这样占内存比较少，有减小项目体积的目的。还有一个是全部引入，就是把所有的组件都引入到项目中，个人不推荐这种方法。

**按需引入**

1.  首先，安装 babel-plugin-component：  
    ![在这里插入图片描述][20200226155325867.png]
2.  然后，将 .babelrc 修改为：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pob3VjaGFuZ3l1ZQ_size_16_color_FFFFFF_t_70 1]
3.  如果只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pob3VjaGFuZ3l1ZQ_size_16_color_FFFFFF_t_70 2]  
    **注意：引用的时候 大写字母和小写字母不能混淆**，**如果需要修改里边的样式，用F12调试工具可以改变其中的样式**，**在css中样式的后边要加！important。比如（color:\#000!important）**

[20200226152936777.png]: https://img-blog.csdnimg.cn/20200226152936777.png
[20200226153116189.png]: https://img-blog.csdnimg.cn/20200226153116189.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pob3VjaGFuZ3l1ZQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200226154355190.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pob3VjaGFuZ3l1ZQ==,size_16,color_FFFFFF,t_70
[20200226155325867.png]: https://img-blog.csdnimg.cn/20200226155325867.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pob3VjaGFuZ3l1ZQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200226155421959.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pob3VjaGFuZ3l1ZQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pob3VjaGFuZ3l1ZQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200226155701893.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pob3VjaGFuZ3l1ZQ==,size_16,color_FFFFFF,t_70