今天使用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.vue To 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使用组件报错的更多相关文章

  1. 01-路由跳转 安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题

    2==解决vue2.0里面控制台包的一些语法错误. https://www.jianshu.com/p/5e0a1541418b 在build==>webpack.base.conf.j下注释掉 ...

  2. 使用Angular cli创建组件报错: Unexpected token / in JSON at position....

    之前为了熟悉流程一直都是手动创建组件,今天试着用cli创建组件,居然报错了,报错大致为: Unexpected token / in JSON at position.... ,并且错误指向了.ang ...

  3. vue中使用JSX报错,如何解决

    Support for the experimental syntax 'jsx' isn't currently enabled (32:12): 30 | }, 31 | render() { & ...

  4. vue init webpack nameXXX 报错问题:

    vue新建demo项目报错如下: M:\lhhVueTest>vue init webpack L21_VueProject vue-cli · Failed to download repo ...

  5. 安装skype for business server组件 报错“未满足先决条件”和安装KB2982006补丁提示“此更新不适用于你的计算机”

    安装skype for business server组件 报错“未满足先决条件” 上网经查询发现是没有安装KB2982006-x64 更新补丁 去官网上找这个补丁,发现这个补丁要热更新啥的,还要写邮 ...

  6. 解决MyEclipse中的js报错的小方法

    今天,下了个模版,但是导进去的时候发现js会报错.看了下其他都没有错误.而有一个js报错误,请原谅我有点红色强迫症,不能留一点红色 . 错误如下:Syntax error on token " ...

  7. [转]解决IIS下UTF-8文件报错乱码的问题

    找了两天才找到解决办法…….晕晕晕...用第二种方法解决了. 网上找到的方法都没有写这一条 If objASPError.ASPDescription > "" Then 后 ...

  8. Eclipse和MyEclipse使用技巧--解决MyEclipse中的js报错的小方法

    今天,下了个模版,但是导进去的时候发现js会报错.看了下其他都没有错误.而有一个js报错误,请原谅我有点红色强迫症,不能留一点红色 . 错误如下:Syntax error on token " ...

  9. 解决springMVC文件上传报错: The current request is not a multipart request

    转自:https://blog.csdn.net/HaHa_Sir/article/details/79131607 解决springMVC文件上传报错: The current request is ...

  10. vue 表单校验报错 "Error: please transfer a valid prop path to form item!"

    vue 表单校验报错 "Error: please transfer a valid prop path to form item!" 原因:prop的内容和rules中定义的名称 ...

随机推荐

  1. Nginx-入门(源码编译安装http://nginx.org/en/download.html)

    比较早的时候  web主要经典组合--->LAMP 近几年---->nginx后来居上--->LNMP=LEMP   Nginx = Engine x Nginx和Apache 都是 ...

  2. supervisor守护filebeat服务进程

    1.变更原因 部署安装supervisor进行filebeat守护及后面的各种服务进程守护可以用2.变更内容增加supervisor服务 3.变量时间:6月2号-6月3号4.变更风险评估:无风险4.1 ...

  3. NanUI | NanUI 0.7 正式发布

    2020年2月10日 NanUI 0.7版正式发布. 回顾过去的一年,浑浑噩噩.生活上.工作上太多的压力和变数让我身心疲惫,目睹亲人被病痛的摧残的痛苦,无法释怀的生死别离令我沉沦许久:公司业务的变动, ...

  4. mplayer命令行模式下的使用方法【转】

    mplayer命令行模式下的使用方法http://hi.baidu.com/lovehack2006/blog/item/162ef9778214111eb051b9d4.htmlMPlayerMPl ...

  5. Android客户端OkHttp的使用以及tomcat服务器的解析客户端发过来的数据

    2020-02-15 21:25:42 ### android客户端客户向服务器发送json字符串或者以参数请求的方式发送数据 其中又分为post请求和get请求 1.activity.xml < ...

  6. ARTS Week 8

    Dec 16, 2019 ~ Dec 22, 2019 Algorithm Problem 53 Maximum Subarray 最大子数组 题目链接 题目描述:给定一个数组,在所有连续的子数组中, ...

  7. meta的作用

    一.先明白几个概念 phys.width: device-width: 一般我们所指的宽度width即为phys.width,而device-width又称为css-width. 其中我们可以获取ph ...

  8. ASP.NET Core使用环境变量

    前言 通常在应用程序开发到正式上线,在这个过程中我们会分为多个阶段,通常会有 开发.测试.以及正式环境等.每个环境的参数配置我们会使用不同的参数,因此呢,在ASP.NET Core中就提供了相关的环境 ...

  9. VFP获取 SQL Server 的数据表、触发器、存储过程、视图等脚本

    本文代码转载自红雨先生 *-----------------------------------------------* SqlServer 相关函数*----------------------- ...

  10. STM32,ARM,Keil工具相关

    One ELF Section per Function https://blog.csdn.net/iceiilin/article/details/6091575 因此,可以得出,选项One EL ...