Vue + element-ui
在Vue-cli生成的项目中使用 element-ui,按照官方的指导
npm i element-ui -D
执行之后,查看package.json,element-ui 加在了 "devDependencies"中,好像感觉那里不对,也跟官方的项目模板的package.json不一致,就删了重来
npm uninstall element-ui
npm install element-ui --save
要想使用element-ui,按照官方的文档,需要在main.js中加入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css' Vue.use(ElementUI)
在 webpack.base.conf.js 中的 module->loaders 块中加入配置:
module: {
loaders: [
...
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
...
]
},
运行 npm run dev 发现没有style-loader,需要安装
npm install style-loader -save-dev
安装好之后,运行npm run dev,报错:
ERROR in ./~/css-loader!./~/style-loader!./~/css-loader!./~/element-ui/lib/theme-default/index.css
Module build failed: Unknown word (5:1) 3 | // load the styles
4 | var content = require("!!./../../../css-loader/index.js!./index.css");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
| ^
6 | // add the styles to the DOM
7 | var update = require("!./../../../style-loader/addStyles.js")(content, {});
8 | if(content.locals) module.exports = content.locals; @ ./~/element-ui/lib/theme-default/index.css 4:14-133 13:2-17:4 14:20-139
折腾了半天,搞不定,就不瞎折腾了,老老实实的在index.html加样式和脚本引用
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css"> <script src="https://unpkg.com/element-ui/lib/index.js"></script>
先使用CDN上的文件,等熟了之后再使用本地库!
搞上面的这些东西,瞎折腾了半天时间!
2016年11月23日19:52:09 更新
悲催,使用脚本方式,Vue也需要用脚本方式使用
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
2016年11月24日17:30:47 更新
临时解决方案,样式文件直接在index.html引入:
<link rel="stylesheet" href="//unpkg.com/element-ui/lib/theme-default/index.css">
脚本在main.js中导入:
import Element from 'element-ui';
Vue.use(Element);
暂时解决了问题。
Vue + element-ui的更多相关文章
- 分享一个自搭的框架,使用Spring boot+Vue+Element UI
废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...
- Vue + Element UI 实现权限管理系统
Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html
- vue + element ui 实现实现动态渲染表格
前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...
- vue + element ui 表格自定义表头,提供线上demo
前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...
- vue+element ui 的上传文件使用组件
前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...
- vue+element ui 的表格列使用组件
前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...
- vue+element ui 的tab 动态增减,切换时提示用户是否切换
前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui 有一个 bug,这里记录一下如何实现.转载 ...
- 基于 vue+element ui 的cdn网站(多页面,都是各种demo)
前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...
- vue + element ui 阻止表单输入框回车刷新页面
问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...
- vue+element ui 的时间控件选择 年月日时分
前言:工作中用到 vue+element ui 的前端框架,需要选择年月日时分,但element ui官网demo有没有,所以记录一下.转载请注明出处:https://www.cnblogs.com/ ...
随机推荐
- 谈谈Ext JS的组件——布局的用法
概述 在Ext JS中.包括两类布局:组件类布局和容器类布局.由于有些组件是有不同的组件组合而成的,如字段就由标题和输入框构成,他们之间也是存在布局关系的,而这就须要组件类布局来处理组件内自己特有的布 ...
- Redis源代码分析-内存数据结构intset
这次研究了一下intset.研究的过程中,一度看不下过去,可是还是咬牙挺过来了.看懂了也就是那么回事.静下心来,切莫浮躁 Redis为了追求高效,在存储下做了非常多的优化,像intset就是作者为了节 ...
- 使用const 提高函数的健壮性
1.如果输入参数采用“指针传递”,那么加const 修饰可以防止意外地改动该指针指向的内存单元,起到保护的作用. 例如:void StringCopy(char *strDest, const cha ...
- web_api vs2015 新加标题无法打开
HomeController 去掉特性[Authorize]
- jquery之营销系统
// //////////////////////////优惠券开始//////////////////////////// // 给附加条件选择框添加事件 function inputFuJia() ...
- ASP.Net动态创建GridView
1.创建Field BoundField requestitem = new BoundField();//注意Field可以是ButtonField,TemplateField,...等等GridV ...
- mysql 分区表详解
项目中要一张库表实现 list分区.并且支持多种数据库. oracle 很顺利,只是mysql 听说5.1版本就已经支持了, 可是试了很多个版本,都不行,后来查到原因是要5.5 以上版本 分区才支持 ...
- 打破C++ Const 的规则
从一个C++菜鸟改函数开始 CString MyClass::GetStringValue() const { return m_strValue; } 这个值可能还没有赋值,好吧,那么我先判断是不是 ...
- 使用Jquery解决Asp.Net中下拉列表值改变后访问服务器刷新界面。
使用DropDownList控件时,改变选项时,获取服务端数据库数据并刷新界面数据. 1. 绑定DropDownList控件SelectedIndexChanged事件. 2. AutoPortBac ...
- Backbone的 listenTo 和 on
使用情景区别 listenTo用于监听自身意外的对象 on用于监听自身 listenTo和on中的回调函数里的this的区别 listener.listenTo(object, 'eventName' ...