[Vue学习]Vue开发流程(一)创建项目

项目创建

创建一个基于"webpack"模板的新项目,项目名称可自定义,这里用默认的"my-project"
cmd或者git bash输入vue init webpack my-project
接下来会出现
image.png
这里直接回车默认就是my-peoject

然后下图是是项目描述,不是必填,按下回车继续
image.png
然后是项目作者
image.png
然后需要选择是否安装编译器
image.png

安装要选择Vue build方式时有两种:
standaloe方式打包的是/node_modules/vue/dist/vue.common.js
runtime打包的是/node_modules/vue/dist/vue.js
这两种方式对普通用户来说差不多,选一个大多数用的就可以了,然后按下Enter键

然后是否安装路由
image.png

是否使用ESLint,它是一个按照ECMAScript并且按照规则给出爆的代码检测工具,它可以避免低级错误并统一代码风格,但是需要严格按照规范来写,按自己习惯来,本文这里选n,然后回车
image.png
接着是否安装单元测试工具,可根据开发需求,本文这里选n然后回车
image.png
接着是否安装e2e测试工具,可根据开发需求,本文这里选择n
image.png
然后是项目创建后是否直接使用命令安装依赖包?
image.png
第一个:是的,使用npm安装,
第二个:是的,使用Yarm命令安装
第三个:不,自己手动安装
这里本文直接回车选第一个
然后到出现以下界面就可以了
image.png
然后进入根目录
cd my-project
安装依赖
cnpm install
然后会在根目录下发现多了个node_modules文件夹,就是安装的依赖文件夹
image.png
然后运行项目,输入npm run dev,出现http://localhost:8080并在浏览器访问即可


注意事项:

有时会出现安装后8080端被占用无法访问的情况(如运行了腾讯QQ),可以手动解除:
在命令行中输入netstat -ano,列出所有端口的情况。在列表中我们观察被占用的端口,这里是找到占用的8080,

2、查看被占用端口对应的PID,即,后面的2724,若觉得有点多,不太好找的话,

输入命令:netstat -aon|findstr “8080” (这里以8080端口为例),回车,记下最后一位数字,即PID,这里是2724。

3、继续输入tasklist|findstr “2724”,回车,查看是哪个进程或者程序占用了端口,结果是:node.exe

4、在cmd的命令窗口中输入:taskkill /f /t /im node.exe,即可,结束进程,解除占用的端口。


解除占用后,得重新运行启动一次,用ctrl+c停掉之前运行的npm run dev,再用npm run dev运行一次即可,若仍然得不到解决,可以试着重启计算机,正常来说在qq前运行npm run dev是不会被占用的


如果本文帮助到你了,请点赞收藏,谢谢支持
简书同步文章https://www.jianshu.com/p/3c39f4d9778d

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值