【工作经验】Vue项目框架搭建

【背景】

   最近小编在工作过程中经历了项目的前后端框架搭建和项目前端、后端的打包部署,个人觉得还是挺重要的,所以总结一下。本篇博客主要介绍一下前端Vue项目框架的搭建(并非权威,可能有错漏,欢迎指正!不胜感激!

【内容】

Vue项目新建有多种方式,我这里选用的是使用模板创建,因为模板默认集成了很多项目中必用的东西,所以采用了这种。

1、Windows+R,输入“cmd”打开cmd窗口或直接在需要新建项目的目录地址栏里输入cmd,然后回车,即可进入当前目录的cmd窗口。

在这里插入图片描述
在这里插入图片描述

2、在cmd窗口里输入“vue init webpack 项目名”后回车开始新建Vue项目。

在这里插入图片描述

(1)第一步会要求确认Project name即项目名,如果无误则直接回车下一步。

在这里插入图片描述

(2)第二步会要求确认Project description即项目描述,如果无需改动则直接回车下一步。

在这里插入图片描述

(3)第三步会要求确认Author即创建者,一般直接回车下一步

在这里插入图片描述

(4)第四步会要求选择Vue build方式即打包方式,默认standalone,所以直接回车下一步。

在这里插入图片描述

(5)第五步是否安装vue-router即路由,路由是项目中必须用的,所以直接回车下一步。

在这里插入图片描述

(6)第六步是否采用Eslint即代码检查,可根据自己需求选择是或否然后回车下一步。

在这里插入图片描述

(7)第七步是否配置unit tests即单元测试,可根据自己情况选择是或否后回车进入下一步。

在这里插入图片描述

(8)第八步是否使用“npm install”安装npm依赖,可根据自己情况选择是或否后回车进入下一步。若选了是则创建完成后可直接启动项目,若选择了否则在创建完成项目后需先安装npm依赖之后才能启动项目。

在这里插入图片描述

(9)第九步执行“npm install”安装npm依赖之后初步完成Vue项目框架的搭建。

在这里插入图片描述
在这里插入图片描述

npm依赖安装完之后可使用“cd 项目名文件夹”命令进入项目目录,再执行“npm run dev”命令可启动项目。也可通过Vscode打开项目,然后启动项目。

在这里插入图片描述

【小结】

以上仅为小编自己搭建前端Vue项目框架的一些收获和总结,如有错误,欢迎评论指出。(✿◡‿◡)

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值