vue入门——解决搭建vue环境过程碰到的部分问题

学习前端开发需要用到vue.js框架,但在搭建vue环境过程中碰上了许多困难和不解,现在终于把问题给解决了,和大家分享分享。

一 搭建vue环境和安装脚手架*
详情见博客:https://blog.csdn.net/qq_30669833/article/details/78324355

二 问题和解决方法
作为小白,按照上博客顺利地搭建了vue环境,也顺利启动项目,如下图示:
在这里插入图片描述
但是接下来就束手无策了,不知道如何把在cmd生成的vue项目导入HbuilderX,最后寻找npm安装地址,默认是安装在:在这里插入图片描述
仔细检查发现,生成的Vue项目都在Roaming下,为了减小C盘的存储量,我想把生成的Vue项目放在D盘的MyVue文件下,一开始是尝试通过修改npm全局安装路径,把npm安装路径改到D盘,如下图示:
在这里插入图片描述
注:修改npm全局安装路径和查看路径:
npm config ls
npm config set prefix “新路径”

打算在D盘重新安装npm,但是在输入 cnpm install webpack -g 时出错,显示-cnpm不是内部或外部命令,也不是可运行的程序或批处理文件,安装失败,我只好把npm的prefix改为原来的默认路径。

其实根本不需要更改npm的安装路径,也不需要动npm. 想把vue项目放在D盘Myvue文件,只需要在生成项目之前进入这个文件夹,再生成项目,便能实现。上图解释:
在这里插入图片描述
下载以来文件时间会稍微长些,耐心等待一会儿就好。但是运行后却出错了。
在这里插入图片描述
错误提示文件不存在,搞不懂。查看了许多博客也没有找到解决方案,我就把Myvue中的文件全部删除,重新试一遍,不过这次比之前多了一步,那就是先在C盘中安装vuecli(或许这一部根本没有必要),在进入D盘,在D盘中导入npm和webpack,如下图操作便成功了!!!!!
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
同上,如果出现了端口号,就说明在D盘Myvue文件下生成vue项目成功了!打开浏览器,输入http://localhost:8080,如下图:项目搭建成功!(注意到网页名称为输入的projectName:demo1)
在这里插入图片描述
接着,就可以很简单地将vue项目导入HbuilderX中了。在HbuilderX中右键,选择从本地目录导入即可。
在这里插入图片描述
以上便是我遇到的问题和解决方法,如果大佬们有更好的解决方案,请多多指教呀。

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值