`
Turbo12138
  • 浏览: 44237 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Vue Element UI 安装报错

 
阅读更多

安装Element-UI

npm i element-ui -S

执行报错

 

ERROR in ./~/element-ui/lib/theme-default/index.css

Module parse failed: /Users/huzhixin/www/qnzsresearch/node_modules/element-ui/lib/theme-default/index.css Unexpected character '@' (1:0)

You may need an appropriate loader to handle this file type.

| @charset "UTF-8";.

 

报错是由于我们引入了index.css这个 CSS 文件,但是 webpack 打包的时候无法识别并转换成 js,所以就需要配置才能读取 css 和字体文件,运行命令安装下面三个东西(如果之前安装过就不需要了)

执行安装

npm install style-loader --save-dev

npm install css-loader --save-dev

npm install file-loader --save-dev

修改webpack.config.js

 

     {
          test: /\.css$/,
          loader: "style-loader!css-loader",
          exclude: /node_modules/
      },
      {
          test: /\.(eot|woff|woff2|ttf)([\\?]?.*)$/,
          loader: "file-loader"
      },

 

分享到:
评论

相关推荐

    创建vue+element+typescript步骤

    创建vue+element+typescript项目步骤 还有vue-video-player视频播放插件引入步骤亲测·可用

    vue element ui validate 主动触发错误提示操作

    在Vue.js应用中,Element UI是一个广泛使用的组件库,它提供了丰富的UI组件和表单验证功能。`validate`是Element UI表单验证的关键部分,用于确保用户输入的数据符合预设的规则。当表单中的某些字段需要验证时,`...

    element-ui@2.15.9 cdn资源

    Element UI 是一个基于 Vue.js 的开源 UI 组件库,它为开发者提供了丰富的组件,用于构建美观、可扩展的用户界面。版本号 `2.15.9` 表示这是该库的一个稳定版本,可能包含了修复的错误、优化的性能以及新增的功能。 ...

    element-ui@2.15.7.zip

    Element UI 是一个基于 Vue.js 的开源 UI 组件库,它为开发者提供了丰富的组件,用于构建美观、可扩展的用户界面。版本号 `2.15.7` 表示这是 Element UI 的一个稳定版本,发布于某个时间点,通常包含了之前版本的...

    vue elementUI 使用slot-scope报错(版本升级)

    然而,在升级Vue或Element UI版本时,可能会遇到一些兼容性问题,其中之一就是`slot-scope`报错。本文将深入探讨这个问题,以及如何解决它。 `slot-scope`是Vue 2.x中的一个特性,用于在插槽中创建作用域变量,它...

    npm install报错-vue-element-admin-fix-npm-problem-master.zip

    1. **Vue.js和相关插件版本**:确保Vue.js、Element UI以及其他依赖的版本与项目需求匹配。有时,升级或降级特定依赖到兼容版本可以解决问题。 2. **Node.js版本**:`vue-element-admin`可能对Node.js的版本有一定...

    element ui 2.15.14 打包后结果 在页面上引入 js 和 css 文件即可开始使用

    element ui 2.15.14 打包后结果 在页面上引入 js 和 css 文件即可开始使用

    element-ui最新版,2.15.7

    公司需要内网开发,因此休息的时候找了一下element离线版,可是网上基本都是各种限制下载的资源,所以决定自己尝试做了一份。在网上找了大神的教程,按部就班的做了一份,动手党可以一起尝试,链接在此:...

    Vue3.x+AntV G6+Element Plus

    一个开箱即用的基于Vue3使用AntV G6绘制图谱的项目,项目中包含两个demo,其一:图谱可以实现自适应窗口大小;其二:图谱自适应DOM元素大小。帮助你更好的理解并在Vue3.x中使用AntV G6库,有助于初学者快速上手

    template-vue-admin:vue2 + vuex + element-ui管理后台模板

    template-vue-admin 说明 eslint airbnb验证 stylelint标准验证 部分功能需要调整支持,可以直接查看原始里的使用方式(如快照上传,图片裁剪等) babel-eslint如果升级到9以上(包含9),会导致i18n里的语言懒加载...

    在vue2.0中引用element-ui组件库的方法

    在Vue.js框架的2.0版本中,引用Element UI组件库是构建现代化Web应用界面的常用方式之一。Element UI是一套由饿了么前端团队开发的基于Vue2.0的组件库,提供了丰富的界面元素,比如按钮、输入框、表单、表格、分页等...

    详解vue 兼容IE报错解决方案

    以下将详细解释在使用Vue.js时,如何解决兼容IE所遇到的问题和报错。 首先,需要了解IE浏览器对于现代JavaScript的ECMAScript 6 (ES6) 和ECMAScript 2015 (ES2015) 规范中引入的新特性并不完全支持。Babel是一个...

    element-ui_rplib.zip

    例如,使用 `npm install element-ui -S` 命令安装,接着在 main.js 文件中引入并使用 `import { Button } from 'element-ui'` 和 `Vue.use(Button)`。 8. **按需引入**:为了优化项目体积,Element-UI 提供了按需...

    Vue Element UI + OSS实现上传文件功能

    Element提供了upload上传组件,可以查看官网upload组件的详细介绍;查看upload组件的上传源码upload/ajax,使用的是XHR对象上传文件。在项目实践中,发现该上传方法上传大文件时会出现问题,所以决定使用阿里云对象...

    如何使用VuePress搭建一个类型element ui文档

    网站成果样式 项目书写步骤 ...官网:...最后,参考element的设计样式,修改并增加代码,形成一个平台组件库的网站。 (1)在已有项目中安装 # 安装为本地依赖项 npm in

    利用vue+elementUI实现部分引入组件的方法详解

    在Vue.js应用中,Element UI是一个非常受欢迎的UI组件库,它提供了丰富的界面元素和设计模式,便于快速构建用户界面。然而,对于小型项目或为了优化加载速度,我们可能只需要引入部分组件,而不是整个库。以下是如何...

    用Vue-cli搭建的项目中引入css报错的原因分析

    '/node_modules/element-ui/lib/' // 增加此项 ], loader: 'style-loader!css-loader' } ``` 这个配置告诉webpack,需要编译src目录下的css文件和ElementUI库中的css文件。这样,css文件就可以正确地被引入项目...

    vue版本冲突 解决 替换包

    运行vue项目时,启动报错 error in ./~/_element-ui@2.7.2@element-ui/packages/form/src/label-wrap.vue Syntax Erroe:Unexpected token (20:14) ;; 将此压缩包解压到node_moudel里面找到 element-ui,替换即可

    Vue elementui字体图标显示问题解决方案

    Vue ElementUI字体图标显示问题是一个常见的前端开发中遇到的困扰,尤其在集成ElementUI框架时。ElementUI使用了自定义的字体图标来呈现组件中的图形元素,这些图标以`.ttf`、`.woff`或`.woff2`等字体文件的形式存在...

Global site tag (gtag.js) - Google Analytics