element ui、自定义全局组件(插件)



一、element ui

1、简介

Element UI 是饿了么团队基于vue2.0的组件库 ,可以快速搭建网站,提高开发项目

[官网]https://element.faas.ele.me/#/zh-CN

2、快速上手

2.1 安装 element ui

 cnpm i element-ui -S 

2.2 在main.js中引入并是使用组件

import ElementUI form 'element-ui'
import 'element-ui/lib/theme-defaul/index.css'/该样式文件单独引入
Vue.use(Element)
这种方式引入了ElementUI中所有的组件

2.3 在webpack.config.js中添加loader

默认并没有style-loader模块,所以需要单独安装

 cnpm install -D style-loader 

2.4 使用组件

2.5 使用less

安装loader,需要less、less-loader

 cnpm install less less-loader -D 

3、按需引入组

3.1 安装babel-plugin-component

 cnpm install babel-plugin-component -D 

3.2 配置 .babelrc文件
'plugins':[['component',[
                {
                    'libraryName':'element-ui',
                    'styleLibraryName':'theme-default'
                }
              ]
            ]]

3.3 只引入需要的插件

二、自定义全局组件(插件)

全局组件(插件):是指可以在main.js 中使用vue.use()进行全局引引入

普通组件(插件):每次使用时需要引入,如:axios

import axios from 'axios'


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM