[坑况]——this dependency was not found:'element-ui/lib/theme-chalk/index.css'

element ui

坑况:今日pull代码,潇洒npm run dev ,被告知:this dependency was not found:‘element-ui/lib/theme-chalk/index.css‘。。。。。。。

解决思路

1.找不到依赖,路径问题

这是不科学的啊,昨天能够跑通的代码,今天就狗带了? 但是你也要去找找路径相关的解答,万能度娘上线,大多是这样的,应该这样引用"./" emmmm 分析了一波不太对啊!elementui 的引用方式就是这样的

import ‘element-ui/lib/theme-chalk/index.css‘

2.去element官网看看

还真是他们的一个bug哈 贴链接:https://github.com/ChenCheng0914/forum-vue/pull/2/commits/bb03f0fcd8e8c348cb7398b3944c1f039cbb43b9 但是看看了代码 跟我的问题还是不相符

3.看看我的vue以及element 版本 是不是偷偷更新了什么

我出错的版本 vue 2.9.1 element 1.4.13 我去,element 版本这么低的吗? 齐刷刷的把版本提升了 element 2.3.6 然后跑一下 npm run dev 竟然就这样解决了 通过了~

4.webpack 配置

你以为真的解决了吗?当我洋洋洒洒的搬砖一天,提交代码编译的时候,给了我一个彩蛋 Module not found: Error: Can‘t resolve ‘element-ui/lib/theme-chalk/index.css‘ 我的上帝玩我啊,萌妹子也会生气的 我跟你说 正路:竟然是编译出了错,webpack走一波,通过element 知乎的提示发现要这样字配置 webpack.config.js里的loaders加上

{ test: /.(eot|woff|ttf)$/, loader: ‘url-loader‘ }

原因是:这种情况发生是因为模块解析失败,缺少.ttf格式解析模块,vue2.0以上,在webpack.config.js

中module->rules添加{ test: /.(eot|woff|ttf)$/, loader: ‘url-loader‘ }

当然你也要确保自已有安装 url-loader 贴心的放上代码 npm install url-loader/cnpm install url-loader -D

5.最后注意

正确方式:import ‘element-ui/lib/theme-chalk/index.css‘ 失败方式:import ‘element-ui/lib/theme-default/index.css‘ element 换了主题 没有同步代码

总结:

要是你遇到了同样问题,以上几种方式应该是可以给你解答的。

[坑况]——this dependency was not found:'element-ui/lib/theme-chalk/index.css'

原文地址:https://www.cnblogs.com/ifannie/p/8932988.html

时间: 2024-08-30 11:50:09

[坑况]——this dependency was not found:'element-ui/lib/theme-chalk/index.css'的相关文章

net MVC +Vue.js+Element UI 笔记

最近项目需求要用到Vue 与 Element UI.但是又不想用Node.js.就结合了Net.MVC来做项目开发.故而做个笔记来记录一些遇到的问题和处理思路 用到MVC主要考虑是到 对 Node.js 不是特别了解.不想给自己埋坑. 而且基于MVC的话,能用到MVC的服务器端渲染,Session,验证,路由机制等等还是非常和嗨皮的. 然而集合MVC的话,比较烦的是在做可复用Component和JS文件的封装上没Node.js那么方便. Note:不得不吐槽,Vue.js简直和Flash Fle

element UI 饿了么 UI 分页 按钮不显示的问题

https://blog.csdn.net/sinat_37255207/article/details/88914235 一个很坑的 深坑  element UI 的 按钮 不显示的深坑 <el-pagination background @size-change="availableStore2TableHandleSizeChange" @current-change="availableStore2TableHandleCurrentChange" :

关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加的表单验证是否正确,需要注意的点有: 1.使用此方法前检查prop一定必须要写在<el-form-item>上面,写在里面的input上或者其他任何地方都不行(el-form-item prop属性绑定) 2.el-form rules,model属性绑定,ref标识 自定义表单验证的坑: 一.valid

vue模块化(echart+element ui)

最近看了下vue的框架,随手做了个项目,记录分享下 技术框架: vue.js + webpack + element ui + echart 首先看下npm package.js 上面的图 主要是配置的是npm 打包命令 和引入vue-route vue的路由文件 和element ui 文件 下面这个是 引入echart.js 文件, 基本资料就这些. 首先我们开始构建一个vue-cli项目 1.首先node环境(这里就不多啰嗦了) 2.执行vue-cli命令 npm install --gl

关于vue和element ui的国际化

因为公司需求近日一直在做国际化处理, 首先,我们用的是vue的单文件组件,实现国际化是在写好的一个文件组件里面vue_min.js里,而且它相当于一个js的模块,在每一个单文件的组件里面使用. 遇见的第一个问题国际化失败,只显示自己定义的json文件国际化.而且element ui的的国际化不显示, 解决的方案就是, 1.引入的时候应该从新引入 import enLocale from 'element-ui/lib/locale/lang/en' import zhLocale from 'e

vue2.0 + element ui 后台管理系统

vue2.0 和 elementui  搭建的一个后台管理系统 概述: 这是一个用vuejs2.0和element搭建的后台管理界面. 技术栈: vue2.0:渐进式JavaScript框架,易用.灵活.高效,似乎任何规模的应用都适用. element ui:基于vue2.0的ui组件库. vue-router:一般单页面应用spa都要用到的前端路由. vuex:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式. webpack + es6/7 + less mock.js : 相

在使用element ui时 select组件获取label问题

最近在工作的时候需要实现多个条件联合查询,这个其实就是一条sql语句.但是,我们数据库中存储的是根据前端传来id的值所对应的值,而不是直接存的id,使用select组件时,却只能取到value值,无法作为后台查询的条件. 我们需要的是select 组件的label值,而不是看不见的value值. 首先,根据element ui select组件使用手册,给组件添加'change'方法 1 @change=changeValue 再根据Array 的 find方法找出对应的值即可. 1 chang

vue+vuex+router+element ui

1. cnpm install -g vue-cli 项目的main.js引入import Vue from 'vue' 2. 创建项目 vue init webpack +项目名称 3.  cnpm install ----->下载依赖文件 npm run dev ----->运行项目 4.config文件夹,下面的index.js里面修改port端口号 /////////////////////////////////////// 好像vue 在2.0之后自动的就引入了router和vue

Element UI 框架搭建

Element UI 框架搭建 1.webpack 全局安装 npm install -g webpack 2.淘宝镜像cnpm安装 npm install -g cnpm --registry=https://registry.npm.taobao.org 3.vue脚手架全局安装 -- 用于生成vue模板 npm install -g vue-cli 4.使用脚手架构建vue项目 -- 一路回车就行了 vue init webpack 目前可用的模板介绍 browserify–全功能的Bro