Element 组件使用心得

Element 组件本人第一次使用,此文章为使用总结,不足之处请多多指教!

1、推荐使用 npm 安装,可以更好的与 webpack 打包工具使用

      npm i element-ui -S

2、CDN(构建在网络之上的内容分发网络)

      可以通过在页面上引入js和css文件进行使用

       

       

      ***** Element 官网建议使用 CDN 引入 Element 的用户在链接地址上锁定版本,以免升级时收到非兼容性更新的影响。

      锁定版本的方法请查看 unpkg.com

3、引入 Element

     完整引入 --- 在 main.js 中写入以下内容:

      Element 组件使用心得_第1张图片

      按需引入 --- 借助 babel-plugin-component ,可以只引入需要的组件,以减小项目的体积

      1)、安装 babel-plugin-component: npm install bable-plugin-component -D

      2)、将 .babelrc 修改为:

      Element 组件使用心得_第2张图片

      3)、按照需要在 main.js 中写入(以 Button、Select 为例)

      Element 组件使用心得_第3张图片

      浅谈 babel      

4、全局配置

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

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

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

      完整引入:

      

      按需引入:

      Element 组件使用心得_第4张图片

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

 

 

 

 

 

 

 

 

 

 

 

 

      

 

你可能感兴趣的:(Element 组件使用心得)