Element 组件使用心得

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 为例)

      

      浅谈 babel      

4、全局配置

      在引入 Element 时，传入一个全局配置对象，该对象支持 size 以及 zIndex。

      size 用于改变组件的默认尺寸

      zIndex 设置的是弹窗的 z-index (默认值是2000)

      完整引入：

      

      按需引入：

      

5、自定义主题颜色 --- 在线主题生成工具