vue+webpack中配置elementui填坑总结

最新推荐文章于 2024-05-08 10:58:00 发布
最新推荐文章于 2024-05-08 10:58:00 发布
阅读量1.2k 收藏
点赞数
分类专栏： 前端webpack vue 文章标签： vue.js webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_36227086/article/details/108119864
版权

前提：已经装好webpack和vue，并配置好vue所需loader等

1.安装elementui

cnpm i element-ui -S

2.在main.js中引入elementui

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI);

此时运行后会报错

ERROR in ./node_modules/_element-ui@2.13.2@element-ui/lib/theme-chalk/fonts/element-icons.ttf 1:0
Module parse failed: Unexpected character ' ' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process 
this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
 @ ./node_modules/_element-ui@2.13.2@element-ui/lib/theme-chalk/index.css (./node_modules/css-loader/dist/cjs.js!./node_modules/_element-ui@2.13.2@element-ui/lib/theme-chalk/index.css) 5:0-70 8:73-102
 @ ./node_modules/_element-ui&
最低0.47元/天 解锁文章
世界是熊猫的！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element-ui-2.13.2版本
10-23
element-ui全部资源包2.13.2版本,是在unpkg上用爬虫爬下来的，所有资源文件都在里面一个不少
如何利用vue+vue-router+elementUI实现简易通讯录
10-17
在这个例子中，它可能包含一个侧边栏菜单，通过`v-for`指令遍历数据来生成菜单项，这些菜单项与Vue Router的路由配置对应，点击时会跳转到相应的通讯录页面。 通讯录功能的具体实现，可以通过创建多个Vue组件来完成...
vue+element+webpack搭建的项目
tumi
10-18 291
https://www.cnblogs.com/taylorchen/p/6083099.html https://www.cnblogs.com/fhen/p/6721930.html
You may need an appropriate loader to handle this file type, currently no loaders are configure报错解决
最新发布
weixin_45128003的博客
05-08 448
vue3.0+vue-datepicker运行报错You may need an appropriate loader to handle this file type, currently no loaders are configure报错解决。‘@vuepic/vue-datepicker’, // 没有多余的空格，并且正确指定了包名。下面是环境参数原因就是版本不兼容。其他可能需要转译的依赖。
Element-ui升级到最新版1.4.13 → 2.13.2
hezhenfei8的专栏
12-25 2414
Element-ui升级到最新版1.4.13 → 2.13.2
使用webpack搭建简单的vue+element-ui项目，并实现模块按需加载
彳亍的博客
04-08 927
原文地址：https://blog.csdn.net/crazy_jialin/article/details/80435213 本文讲述一下在vue项目中搭建element-ui框架，并实现模块的按需加载。 准备工作：在此之前，需要大家搭建一个简单的vue+webpack项目，本文讲述的操作是基于这个项目的，所以，需要大家准备一下，具体操作步骤请参考博客(https://blog.csdn...
element组件库axture_Vue如何正确的使用Element组件库
weixin_39712821的博客
12-21 339
其实官网上写的很清楚，怎么安装，怎么引用。但是初学者(比如我)即使按部就班也会出现各种bug。所以我决定在这里写下自己遇到的错误以及如何解决的。1.安装并引用Element① 安装npm i element-ui -S② 引用import Vue from 'vue'import ElementUI from 'element-ui'import 'element-ui/lib/theme-cha...
laravel-vue：使用laravel5.4 + vue2.0 + elementui
02-03
laravel5.4 + vue2 + vuex + vue-路由器+ webpack + ES6 / 7 + elementui +七牛云存储+ redis + sass 要求 PHP 5.6或更高版本（PHP 7最好） mysql 5.6或更高版本 作曲家（下载链接： : ） nodejs（下载链接： ://...
vue-elementUI后台管理系统.zip
04-30
技术栈：vue2 + vuex + vue-router + webpack + ES6/7 + axios + elementUI + 阿里图标iconfont 本项目的定位是后台管理系统，已经完成模块有用户管理、菜单管理、角色管理、公司管理、权限管理、支付配置。 技术...
解决vue+elementui项目打包后样式变化问题
10-15
为了解决这个问题，我们需要在Webpack配置中指定Babel编译ElementUI的源码。在`webpack.base.conf.js`中添加如下配置： ```javascript { test: /\.js$/, loader: 'babel-loader', include: [ resolve('src'),...
Vue+ElementUI前端开发手册
10-12
- `build`：包含Webpack配置文件，用于处理项目构建。 - `config`：存储Vue项目的配置信息。 - `node_modules`：安装的所有依赖包，可以通过`npm install [依赖包名称]`添加新的依赖。 Element UI的集成和使用： 1....
webpack4Vue2全家桶搭建的多页面或单页面应用PC用的elementui2
08-12
webpack4 Vue2全家桶(vue-router、vuex、vue-i18n)配合axios请求插件搭建的多页面或单页面应用 PC端用的element-ui2
Vue+ElementUI项目使用webpack输出MPA的方法
10-16
主要介绍了Vue+ElementUI项目使用webpack输出MPA的方法，本文图文并茂给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
前端工程化
fengzitaba的博客
10-22 326
模块化概述 传统开发模式的主要问题 ① 命名冲突 ② 文件依赖  模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成 员，也可以依赖别的模块  模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护 浏览器端模块化规范 AMD Require.js (http://www.requirejs.cn/) CMD Sea.js ...
element ui框架（webpack打包器）
嵌入式-老费，一个分享专业嵌入式知识的blog
09-17 827
【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】 在前端开发中一般会用到webpack打包器。虽然使用npm run build会自动调用webpack帮助我们打包，不过还是建议大家可以手动编写代码，看一下打包的过程究竟是怎么样的。 1、安装webpack、webpack-cli
前端系列--ES6模块化、webpack、vue单文件组件及脚手架、Element-UI、vuex
Wong_ga_sum的博客
06-19 1054
以下将按照标题顺序进行介绍： 1、模块化相关规范 1.1传统开发模式 传统的开发模式存在以下问题： 1、命名冲突：多个js文件中如果存在相同名字的变量会造成冲突； 2、文件依赖：js文件之间不能互相引用； 1.2模块化开发 针对以上问题，可以通过模块化开发进行解决： 模块化是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内容部成员，也可以依赖别的模块； 模块化开发可以方便代码的重用而提高开发效率，同时也能方便后期维护； 在之前学习服务端时我们已经接触过服务端的c
error in ./node_modules/_element-ui@2.13.0@element-ui/lib/theme-chalk/index.css
new_buff_007的博客
03-23 6354
原因是因为你的css解析的路径写的有问题，在build的webpack.base.conf.js里面添加css的解析路径即可。 { test:/\.css$/, loader:'css-loader!style-loader', exclude: /node_modules/ }, ...
vue项目报错./node_modules/cache-loader/dist/cjs.js??ref--12-0
热门推荐
hiram的专栏
12-19 15万+
vue项目报错如下：   ./config.js in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-lo...
VUE中添加elementUI
shaynerain的博客
07-27 1943
安装 npm install element-ui --save main.js中添加引用 import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) 目前（2021.4.20）elementUI还不持支Vue3，如果选择创建使用的Vue3需要更换成Vue2 报错信息如下 Uncaught TypeError: Cannot read prope
在vue中使用ElementUI实现主题切换，并给出具体实现
03-14
可以回答这个问题。在Vue中使用ElementUI实现主题切换，可以通过以下步骤实现： 1. 在main.js中引入ElementUI的样式文件： import 'element-ui/lib/theme-chalk/index.css'; 2. 在App.vue中使用ElementUI的组件，并设置主题： <template> <div id="app"> <el-button @click="changeTheme">切换主题</el-button> </div> </template> <script> export default { methods: { changeTheme() { // 切换主题 this.$ELEMENT.theme = this.$ELEMENT.theme === 'dark' ? 'light' : 'dark'; } } } </script> 3. 在webpack.config.js中配置ElementUI的主题： const path = require('path'); const webpack = require('webpack'); module.exports = { // ... plugins: [ new webpack.LoaderOptionsPlugin({ options: { // 设置ElementUI的主题 elementUI: { theme: 'light' } } }) ] }; 通过以上步骤，就可以在Vue中使用ElementUI实现主题切换了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值