npm run dev 报error in ./src/components/Breadcrumb/index.vue

npm run dev 报error

 error  in ./src/components/Breadcrumb/index.vue
Module build failed: Error: Node Sass does not yet support your curre
nt environment: Windows 64-bit with Unsupported runtime (93)
For more information on which environments are supported please see: 
https://github.com/sass/node-sass/releases/tag/v4.9.3

我是一名后端开发,在使用某个项目前端代码时,需要 build构建前端代码,
在安装了node.js的Windows 的msi 包后,安装了vue 和vue-cli 之后,打开了前端项目,使用
npm run dev
node 报错,提示我Node sass 版本不符,
在看了诸多教程,采取了换淘宝镜像源,用淘宝镜像源 安装卸载 sass-loader 和从https://github.com/sass/node-sass/releases/tag/v7.0.1 上下载对应的.node文件一些列手段失败后,

https://blog.csdn.net/jay168999/article/details/79990403

找到了这篇文章
在这里插入图片描述

使用了

   npm insttall cnpm -g
cnpm rebuild node-sass --force

后终于成功,原天堂不要让前端代码和工具为难后端开发,大家和睦相处

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
`BreadCrumbs.vue` 是一个 Vue.js 组件,用于实现面包屑导航的渲染和交互逻辑。面包屑导航是指在网站或应用程序中,以列表形式显示当前页面所在的层次结构,以便用户快速了解自己所处的位置和路径。在前端开发中,`BreadCrumbs.vue` 组件通常包括以下功能: 1. 传入当前页面的路径参数:通常从路由信息中获取当前页面的路径参数,用于生成面包屑导航的路径列表。 2. 渲染面包屑导航列表:根据传入的路径参数,生成面包屑导航的列表,并根据用户点击事件进行相应的路由跳转。 3. 根据路由信息更新面包屑导航:当用户通过路由跳转到其他页面时,根据路由信息更新面包屑导航的显示内容。 代码示例: ``` <template> <div class="breadcrumbs"> <router-link to="/">Home</router-link> <span v-for="(crumb, index) in crumbs" :key="index"> <i class="fas fa-angle-right"></i> <router-link :to="crumb.path">{{ crumb.label }}</router-link> </span> </div> </template> <script> export default { data() { return { crumbs: [] } }, mounted() { this.updateCrumbs() }, watch: { '$route': 'updateCrumbs' }, methods: { updateCrumbs() { const routes = this.$route.matched this.crumbs = routes.map(route => ({ path: route.path, label: route.meta.label })) } } } </script> <style scoped> .breadcrumbs { display: flex; align-items: center; font-size: 14px; color: #666; margin-bottom: 20px; & > span { display: flex; align-items: center; margin-left: 10px; & > i { margin: 0 5px; } } } </style> ``` 在上述代码中,我们定义了一个 `BreadCrumbs.vue` 组件,通过 `this.$route.matched` 获取当前路由的匹配记录,根据路由记录的 `path` 和 `meta.label` 生成面包屑导航的路径列表,并通过 `v-for` 渲染到页面上。在路由切换时,通过 `watch` 监听 `$route` 的变化,更新面包屑导航的显示内容。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值