组件使用参照官网http://element.eleme.io/#/zh-CN/component/quickstart

在 main.js 中写入以下内容:

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import App from './App.vue' Vue.use(ElementUI)

如果你只希望引入部分组件,比如 Button 和 Select,那么需要在 main.js 中写入以下内容:

import Vue from 'vue'
import { Button, Select } from 'element-ui'
import App from './App.vue' Vue.component(Button.name, Button)
Vue.component(Select.name, Select)

/* 或写为
* Vue.use(Button)
* Vue.use(Select)

安装element-ui
cnpm i element-ui@1.3.7 (@为固定版本)
建议固定vue和element-ui的版本,避免将来版本升级后产生冲突
引入element-ui
在app.vue引入element-ui,然后就可以在其他任何页面中使用了

cnpm install style-loader --save-dev
cnpm install css-loader --save-dev
cnpm install file-loader --save-dev

{
test: /\.css$/,
include: [
/src/,//表示在src目录下的css需要编译
'/node_modules/element-ui/lib/' //增加此项
],
loader: 'style-loader!css-loader'
},(配置加上这个一般不会出错)

4.然后在 main.js 引入并注册

webpack1版本的
test:/\.css$/,
loaders:['style','css']

原来vue模板只能有一个根对象

所以你想要出现正常的效果,你的用一个div来或是别的标签来包裹全部的元素

<template>
<div>
<el-button type="primary">haha1</el-button>
<div>hahhaa</div>
<el-input type="text" placeholder="测试一下"></el-input>
<h1>{{test1}}</h1>
</div>
</template>

element ui 在vue中使用可能遇到的问题的更多相关文章

  1. Vue 基于node npm & vue-cli & element UI创建vue单页应用

    基于node npm & vue-cli & element UI创建vue单页应用 开发环境   Win 10   node-v10.15.3-x64.msi 下载地址: https ...

  2. Element UI table参数中的selectable的使用

    Element UI table参数中的selectable的使用中遇到的坑:页面: <el-table-column :selectable='selectable' type="s ...

  3. element UI实现表格中添加开关控制按钮

    我使用的是element ui V1.4.3 如下图是我要实现的效果: <template> <div> <el-button type="text" ...

  4. 🎉 Element UI for Vue 3.0 来了!

    第一个使用 TypeScript + Vue 3.0 Composition API 重构的组件库 Element Plus 发布了 ~ 2016 年 3 月 13 日 Element 悄然诞生,经历 ...

  5. php项目中使用element.ui和vue

    1.plugins中添加axios,element-ui 2.全局文件下引入 <script src="/static/plugins/vue@2.5.13/vue.js"& ...

  6. vue+element ui 的tab 动态增减,切换时提示用户是否切换

    前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui  有一个 bug,这里记录一下如何实现.转载 ...

  7. vue中的swiper element ui

    欢迎加入前端交流群交流知识&&获取视频资料:749539640 很多同学问,怎么把swiper引入到vue的脚手架里去,之前的一篇博客有提到怎么引入,但是后来感觉不怎么好,还是用一些v ...

  8. vue+element ui中select组件选择失效问题原因与解决方法

    codejing 2020-07-10 09:13:31  652  收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...

  9. VUE -- 对 Element UI table中数据进行二次处理

    时间——日期 后台经常给我们返回的是 时间戳 (例如:1535620671) 这时候我们页面展现的时候需要将时间戳转换为我们要的格式 例如 (YYYY-MM-DD HH:mm:ss) 如果是在Elem ...

随机推荐

  1. 什么是 XML Schema?

    XML Schema 的作用是定义 XML 文档的合法构建模块,类似 DTD. XML Schema: 定义可出现在文档中的元素 定义可出现在文档中的属性 定义哪个元素是子元素 定义子元素的次序 定义 ...

  2. 【Selenium】idea导入eclisp项目的问题

    ①导入:file→new→Project from exiting 选择ecliesp 然后next就可以 ②添加依赖:每个包都要加,引用其他包的类,也要添加依赖 setting选择junit4

  3. BZOJ_5369_[Pkusc2018]最大前缀和_状压DP

    BZOJ_5369_[Pkusc2018]最大前缀和_状压DP Description 小C是一个算法竞赛爱好者,有一天小C遇到了一个非常难的问题:求一个序列的最大子段和. 但是小C并不会做这个题,于 ...

  4. 洛谷P3004 宝箱Treasure Chest——DP

    题目:https://www.luogu.org/problemnew/show/P3004 似乎有点博弈的意思,但其实是DP: f[i][j] 表示 i~j 的最优结果,就可以进行转移: 注意两个循 ...

  5. JavaScript-Tool:CKFinder

    ylbtech-JavaScript-Tool:CKFinder 1.返回顶部 CKFinder是一个强大而易于使用的Web浏览器的Ajax文件管理器. 其简单的界面使得它直观,快速学习的各类用户,从 ...

  6. 美化console.log的文本(转载)

    原文地址:http://www.css88.com/archives/5260 JavaScript Console 那些少人所知的特性 console.log("%c css88.com& ...

  7. 微信公众号开发——创建自定义菜单(PHP版)

    <?php include "TokenUtil.php"; //TokenUtil::build_access_token(); $access_token = Token ...

  8. 查询及删除重复记录的SQL语句

    1.查找表中多余的重复记录,重复记录是根据单个字段(peopleId)来判断 select * from people where peopleId in (select peopleId from ...

  9. (5)css盒子模型(基础上)

    CSS 盒子模型概述 ***什么是CSS的盒子模型呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content).边框(border).内边距(padding).外边距(margin ...

  10. java-通过反射获取目标类的属性,方法,构造器

    首先定义一个urse package com.studay_fanshe; public class User { private String uname; private int age; pri ...