解决vue-cli使用组件报错

今天使用vue-cli，明明写的没错，都是vue-cli自动生成的，编译时怎嘛就会报错呢？

报错信息如下：

浏览器端报错：

Failed to compile. ./src/components/Hi1.vue Module not found:
Error: Can't resolve 'stylus-loader' in 'E:\desktop\vue-review\vuejs\vue-cli\vuecli\src\components' @ ./src/components/Hi1.vue 4:2-310 @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

控制台报错：

These dependencies were not found:* !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-3232a8d1","scoped":true,"hasInlineConfig":false}!stylus-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./Hi2.vue in ./src/components/Hi2.vue
* !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-32249150","scoped":true,"hasInlineConfig":false}!stylus-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./Hi1.vue in ./src/components/Hi1.vueTo install them, you can run: npm install --save !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-3232a8d1","scoped":true,"hasInlineConfig":false}!stylus-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./Hi2.vue !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-32249150","scoped":true,"hasInlineConfig":false}!stylus-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./Hi1.vue

原来vue-cli在初始化项目时在package.json中没有引入 stylus和stylus-loader，而我在写代码时有用vscode的自动提示功能，然后就导致了错误的代码出现，（其实也不算错误，但我还是这么叫它）

<style lang="stylus" scoped></style>

就因为代码提示自动生成的lang="stylus",巧了，vue-cli初始化就没这方面的包

只要在项目根目录下运行：npm install stylus stylus-loader --save-dev,在停止vue-cli，重新npm run dev一下就ok了（如果过改了package.json里的dev，可能不是这个命令运行vue-cli）

有时候太图方便也不好，尤其是在不了解它时o(╥﹏╥)o

解决vue-cli使用组件报错相关推荐

vue CLI异步组件报错import' and 'export' may only appear at the top level
目录简介解决方案简介 Vue的官网中提到了有关异步组件的语法,链接如下: https://cn.vuejs.org/v2/guide/components-dynamic-async.html ...
01-路由跳转安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题
01-路由跳转安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题参考文章: (1)01-路由跳转安装less this.$router.re ...
vue/cli的安装报错以及解决问题的方法
一.在安装vue/cli的过程中,一直报错,通过翻译了解到是权限出现了问题? 解决方法:打开cmd管理员权限(华为快捷键ctrl+x),再次运行vue/cli安装代码(npm install -g @ ...
解决使用下拉组件报错：Error in callback for watcher “focusing“: “TypeError: Cannot set property className......
直接先贴报错图原因:本人在点击下拉菜单的报错,但是功能正常解决:个人手贱把包裹下拉菜单这四个字的span标签给删了(也可以是div,但是必须有标签包裹)
解决 vue 项目运行过程报错 JavaScript heap out of memory（内存溢出） “‘node --max-old-space-size=10240“‘ 不是内部或外部命令
你是不是也遇到过 vue 项目当你 ctrl+s,编译代码,项目就挂掉的情况?那么恭喜你,内存溢出了.兄dei,你膨胀了哟~ 不过不要慌,以下有完整的解决方案! 1.我们全局安装 i ...
vue导入xlsx-style组件报错Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx
官方给出了解决方案,我们只需要修改一下配置 vue2x版本就是有webpack配置就是在webpack.base.conf.js中加入下面这段 module.exports = {external ...
mac下npm安装全局组件报错
1.没有权限安装在你的安装指令前面加上sudo,然后会提醒你输入密码,这个密码是你mac的开机解锁码!如: sudo npm install egg-init -g 2.更换全局变量文件夹 2.1. ...
vue 引用组件报错——找不到组件的解决方案
vue在开发页面时引用组件报错在使用vue开发页面时报如下错,到处找问题,components的注入也是写正确的后来才发现是这里引入写错了,引入组件不能写{} 改成下面这种就可以了记录下工作中的 ...
QML添加图片资源和自定义组件报错解决
QML添加图片资源和自定义组件报错解决建立工程添加图片资源使用自定义组件 QML工程如果选择Qt Quick Application,那么添加图片资源和自定义组件会出现不能文件或该类型不存在的错 ...
引用element-ui的Drawer抽屉组件报错问题
引用element-ui的Drawer抽屉组件报错问题 **前提:**vue项目采取按需引入的方式引入element,并且使用其他组件都正常,没有发生异常问题表现: 在vue项目中引用了Drawer ...

解决vue-cli使用组件报错

解决vue-cli使用组件报错相关推荐

最新文章

热门文章