vue—组件element-ui的使用

vue的一个比较常用的组件库是element-ui

下面介绍一下element-ui组件的用法：

首先，我们需要安装element-ui组件库，推荐使用npm安装

    NPM安装命令：npm  i  element-ui  -S

    CDN引入：

<!-- 引入样式 -->
<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>

然后，npm安装后，在main.js中加入代码

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI);

接下来我们就可以在项目中使用element-ui组件了

在element-ui文档中搜索你需要的组件，例如tab切换组件

 

找到你需要的样式，打开隐藏代码，直接将代码复制到你的项目中即可。

改变主体色

不同的项目有不同的主题色，element-ui也可以自定义主题色。

在element-ui文档中，点击左侧‘自定义主体’，文档中点击在线主体生成工具，根据你的主题颜色改变组件主体，下载主体，找到项目中的element-ui文件夹，（在node_modules文件夹下），用解压后的文件替换到element-ui文件中的lib文件中的theme-chalk中，这样主体颜色就改变了。