输入vue -V后返回两条line (Mac配置node运行vue一直不成功)

 报错信息如下,请看这篇文章

% vue -V
/usr/local/bin/vue: line 14: /usr/local/bin/node: is a directory
/usr/local/bin/vue: line 14: exec: /usr/local/bin/node: cannot execute: Undefined error: 0

npm ERR! code EACCES

npm ERR! syscall mkdir

npm ERR! path /usr/local/bin/node/node_cache/_cacache/index-v5/78/1c

npm ERR! errno -13

npm ERR! 

npm ERR! Your cache folder contains root-owned files, due to a bug in

npm ERR! previous versions of npm which has since been addressed.

npm ERR! 

npm ERR! To permanently fix this problem, please run:

npm ERR!   sudo chown -R 501:20 "/usr/local/bin/node/node_cache"



npm ERR! Log files were not written due to an error writing to the directory: /usr/local/bin/node/node_cache/_logs

npm ERR! You can rerun the command with `--loglevel=verbose` to see the logs in your terminal

 

输入报错信息第10行的代码

sudo chown -R 501:20 "/usr/local/bin/node/node_cache"

如果输入密码正确不返回error的话,输入

npm create vue@latest 

再按照下图配置

如果成功,会提示输入项目名称,自定义就可以。

后面的yes/or (是或否) 全选否

返回三行绿色的代码,挨个执行一次就可以了 

(忘记截图了)

然后执行后返回一个路径

http://localhost:5173/

复制到浏览器中,显示下图 

就完成了! 

另外 我的node 版本号是这个 ,是用brew安装的node,在官网安装都是19.几 。如果版本不对的话可以去试试node彻底卸载,然后用brew安装一个( 我就是这样 )

node彻底卸载推荐几个命令

npm -g uninstall 
rm -rf ~/.npm

 在官网下载node默认好像是这个路径,如果不知道就在终端输入 which npm 查看,找到以后替换掉下面的路径

sudo rm -rf /usr/local/bin/npm

确定是否完全卸载 Node.js。在终端中输入以下命令:

node -v

如果显示“command not found”,则表示已经卸载干净。

再输入

npm -v

 同样如果显示“command not found”,则表示已经卸载干净。

弄了好久!!解决没想到是自己摸索出来的 网上资源Mac版本好少啊!

  • 14
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue-flowchart是一款基于Vue.js框架的流程图插件,可用于快速构建流程图。使用方法如下: 1. 安装vue-flowchart 在命令行中输入以下命令安装vue-flowchart: ``` npm install vue-flowchart --save ``` 2. 引入vue-flowchart 在需要使用vue-flowchart的组件中引入vue-flowchart: ```javascript import VueFlowchart from 'vue-flowchart'; ``` 3. 使用vue-flowchart 在Vue组件中使用vue-flowchart: ```html <template> <div> <vue-flowchart :data="data"/> </div> </template> <script> import VueFlowchart from 'vue-flowchart'; export default { components: { VueFlowchart }, data() { return { data: { nodes: [ { id: '1', label: '开始', x: 100, y: 100, type: 'start' }, { id: '2', label: '节点1', x: 250, y: 100, type: 'process' }, { id: '3', label: '节点2', x: 400, y: 100, type: 'process' }, { id: '4', label: '结束', x: 550, y: 100, type: 'end' } ], edges: [ { id: '1', from: '1', to: '2', type: 'line' }, { id: '2', from: '2', to: '3', type: 'curve' }, { id: '3', from: '3', to: '4', type: 'line' } ] } } } } </script> ``` 上述代码中,定义了一个流程图数据对象data,包含了节点和连线的信息。其中,节点有以下属性: - id:节点唯一标识符 - label:节点显示内容 - x:节点在流程图中的横坐标 - y:节点在流程图中的纵坐标 - type:节点类型,可选值为start(开始节点)、process(处理节点)和end(结束节点) 连线有以下属性: - id:连线唯一标识符 - from:连线起始节点的id - to:连线终止节点的id - type:连线类型,可选值为line(直线)和curve(曲线) 4. 自定义节点和连线样式 通过在data中定义节点和连线的type属性,可以为不同类型的节点和连线指定不同的样式。例如: ```html <template> <div> <vue-flowchart :data="data" :options="options"/> </div> </template> <script> import VueFlowchart from 'vue-flowchart'; export default { components: { VueFlowchart }, data() { return { data: { nodes: [ { id: '1', label: '开始', x: 100, y: 100, type: 'start' }, { id: '2', label: '节点1', x: 250, y: 100, type: 'process' }, { id: '3', label: '节点2', x: 400, y: 100, type: 'process' }, { id: '4', label: '结束', x: 550, y: 100, type: 'end' } ], edges: [ { id: '1', from: '1', to: '2', type: 'line' }, { id: '2', from: '2', to: '3', type: 'curve' }, { id: '3', from: '3', to: '4', type: 'line' } ] }, options: { // 自定义节点样式 nodeTypes: { start: { component: 'start-node', style: { fill: '#f5f5f5', stroke: '#333333', 'stroke-width': 2 } }, process: { component: 'process-node', style: { fill: '#f5f5f5', stroke: '#333333', 'stroke-width': 2 } }, end: { component: 'end-node', style: { fill: '#f5f5f5', stroke: '#333333', 'stroke-width': 2 } } }, // 自定义连线样式 edgeTypes: { line: { component: 'line-edge', style: { stroke: '#333333', 'stroke-width': 2 } }, curve: { component: 'curve-edge', style: { stroke: '#333333', 'stroke-width': 2 } } } } } } } </script> ``` 上述代码中,通过在options中定义nodeTypes和edgeTypes对象,为不同类型的节点和连线指定了不同的样式。其中,component属性指定了节点和连线的自定义组件名称,style属性指定了节点和连线的样式。自定义组件可以在定义Vue组件时进行配置。 5. 自定义节点和连线组件 在使用vue-flowchart时,可以通过自定义节点和连线组件来实现自定义样式和功能。例如,定义一个自定义开始节点组件: ```html <template> <g> <circle :cx="x" :cy="y" r="30" :style="style" /> <text :x="x" :y="y+5" text-anchor="middle" font-size="20">{{label}}</text> </g> </template> <script> export default { name: 'start-node', props: ['id', 'label', 'x', 'y', 'style'] } </script> ``` 上述代码中,定义了一个SVG组件,包含了一个圆形和一个文本元素。通过props属性接收节点的属性信息,并根据属性信息渲染节点内容。 在Vue组件中引入自定义节点和连线组件: ```javascript import StartNode from './StartNode.vue'; import ProcessNode from './ProcessNode.vue'; import EndNode from './EndNode.vue'; import LineEdge from './LineEdge.vue'; import CurveEdge from './CurveEdge.vue'; export default { components: { VueFlowchart, StartNode, ProcessNode, EndNode, LineEdge, CurveEdge }, // ... } ``` 上述代码中,定义了五个自定义组件,分别为开始节点组件StartNode、处理节点组件ProcessNode、结束节点组件EndNode、直线连线组件LineEdge和曲线连线组件CurveEdge,并在Vue组件中引入。 6. 更多配置选项 除了上述介绍的options选项外,vue-flowchart还支持其他配置选项,例如: - zoomable:是否允许通过鼠标滚轮缩放流程图,默认值为true - draggable:是否允许拖拽节点和连线,默认值为true - selectMode:选择模式,可选值为node(节点选择)和edge(连线选择),默认值为node - allowMultiSelect:是否允许多选,默认值为true - nodeMenu:节点右键菜单配置 - edgeMenu:连线右键菜单配置 具体配置方法可参考vue-flowchart的文档。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

饿了就去喝水

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值