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中,这样主体颜色就改变了。