Element 组件本人第一次使用,此文章为使用总结,不足之处请多多指教!
1、推荐使用 npm 安装,可以更好的与 webpack 打包工具使用
npm i element-ui -S
2、CDN(构建在网络之上的内容分发网络)
可以通过在页面上引入js和css文件进行使用
<!-- 引入样式 --> <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>
***** Element 官网建议使用 CDN 引入 Element 的用户在链接地址上锁定版本,以免升级时收到非兼容性更新的影响。
锁定版本的方法请查看 unpkg.com
3、引入 Element
完整引入 --- 在 main.js 中写入以下内容:
按需引入 --- 借助 babel-plugin-component ,可以只引入需要的组件,以减小项目的体积
1)、安装 babel-plugin-component: npm install bable-plugin-component -D
2)、将 .babelrc 修改为:
3)、按照需要在 main.js 中写入(以 Button、Select 为例)
4、全局配置
在引入 Element 时,传入一个全局配置对象,该对象支持 size 以及 zIndex。
size 用于改变组件的默认尺寸
zIndex 设置的是弹窗的 z-index (默认值是2000)
完整引入:
按需引入:
5、自定义主题颜色 --- 在线主题生成工具