element ui 在vue中使用可能遇到的问题
组件使用参照官网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中使用可能遇到的问题的更多相关文章
- Vue 基于node npm & vue-cli & element UI创建vue单页应用
基于node npm & vue-cli & element UI创建vue单页应用 开发环境 Win 10 node-v10.15.3-x64.msi 下载地址: https ...
- Element UI table参数中的selectable的使用
Element UI table参数中的selectable的使用中遇到的坑:页面: <el-table-column :selectable='selectable' type="s ...
- element UI实现表格中添加开关控制按钮
我使用的是element ui V1.4.3 如下图是我要实现的效果: <template> <div> <el-button type="text" ...
- 🎉 Element UI for Vue 3.0 来了!
第一个使用 TypeScript + Vue 3.0 Composition API 重构的组件库 Element Plus 发布了 ~ 2016 年 3 月 13 日 Element 悄然诞生,经历 ...
- php项目中使用element.ui和vue
1.plugins中添加axios,element-ui 2.全局文件下引入 <script src="/static/plugins/vue@2.5.13/vue.js"& ...
- vue+element ui 的tab 动态增减,切换时提示用户是否切换
前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui 有一个 bug,这里记录一下如何实现.转载 ...
- vue中的swiper element ui
欢迎加入前端交流群交流知识&&获取视频资料:749539640 很多同学问,怎么把swiper引入到vue的脚手架里去,之前的一篇博客有提到怎么引入,但是后来感觉不怎么好,还是用一些v ...
- vue+element ui中select组件选择失效问题原因与解决方法
codejing 2020-07-10 09:13:31 652 收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...
- VUE -- 对 Element UI table中数据进行二次处理
时间——日期 后台经常给我们返回的是 时间戳 (例如:1535620671) 这时候我们页面展现的时候需要将时间戳转换为我们要的格式 例如 (YYYY-MM-DD HH:mm:ss) 如果是在Elem ...
随机推荐
- 什么是 XML Schema?
XML Schema 的作用是定义 XML 文档的合法构建模块,类似 DTD. XML Schema: 定义可出现在文档中的元素 定义可出现在文档中的属性 定义哪个元素是子元素 定义子元素的次序 定义 ...
- 【Selenium】idea导入eclisp项目的问题
①导入:file→new→Project from exiting 选择ecliesp 然后next就可以 ②添加依赖:每个包都要加,引用其他包的类,也要添加依赖 setting选择junit4
- BZOJ_5369_[Pkusc2018]最大前缀和_状压DP
BZOJ_5369_[Pkusc2018]最大前缀和_状压DP Description 小C是一个算法竞赛爱好者,有一天小C遇到了一个非常难的问题:求一个序列的最大子段和. 但是小C并不会做这个题,于 ...
- 洛谷P3004 宝箱Treasure Chest——DP
题目:https://www.luogu.org/problemnew/show/P3004 似乎有点博弈的意思,但其实是DP: f[i][j] 表示 i~j 的最优结果,就可以进行转移: 注意两个循 ...
- JavaScript-Tool:CKFinder
ylbtech-JavaScript-Tool:CKFinder 1.返回顶部 CKFinder是一个强大而易于使用的Web浏览器的Ajax文件管理器. 其简单的界面使得它直观,快速学习的各类用户,从 ...
- 美化console.log的文本(转载)
原文地址:http://www.css88.com/archives/5260 JavaScript Console 那些少人所知的特性 console.log("%c css88.com& ...
- 微信公众号开发——创建自定义菜单(PHP版)
<?php include "TokenUtil.php"; //TokenUtil::build_access_token(); $access_token = Token ...
- 查询及删除重复记录的SQL语句
1.查找表中多余的重复记录,重复记录是根据单个字段(peopleId)来判断 select * from people where peopleId in (select peopleId from ...
- (5)css盒子模型(基础上)
CSS 盒子模型概述 ***什么是CSS的盒子模型呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content).边框(border).内边距(padding).外边距(margin ...
- java-通过反射获取目标类的属性,方法,构造器
首先定义一个urse package com.studay_fanshe; public class User { private String uname; private int age; pri ...