Vue2项目架构搭建(二)——vue-cli脚手架创建项目

7 篇文章 0 订阅

        vue-cli是官方命令行工具该工具为现代化的前端开发工作流提供了开箱即用的构建配置,只需几行命令就可以搭建好基础架构。

安装vue-cli
     使用npm全局安装vue-cli
npm install -g vue-cli
     安装完成后,执行
vue list
     会报“vue不是内部或外部的命令”,说明环境变量有问题

vue-cli环境变量设置
     设置vue-cli的系统环境变量指向npm全局文件目录,找到系统环境变量里的“path”,将全局文件的路径添加进去
     再执行   vue list   如下图所示证明vue-cli已经安装配置成功,可以用vue-cli创建项目了


vue-cli创建项目
        上述已经测试vue命令已经可以执行,现在可以直接使用vue命令安装项目了,在你想要创建项目的文件夹下执行(为了方便,我直接丢D盘里了)
 vue init webpack my-vue
上述的命令意思为创建一个名为 my-vue的项目,模板为webpack,还有一种比较简单的模板是webpack- simple,根据你项目大小来确定,一直回车就好。

等自动安装好模块内容,会有两行提示

        cd my-vue 进入到自己的项目目录  npm run dev 启动项目,完成后打开浏览器,打开返回的“http://localhost:8080”就能看到vue-cli创建的项目界面了,也说明项目创建成功



本人才疏学浅,如果哪位小伙伴发现问题或者有更好的优化,希望能留言我好及时修改和优化,大家一起学习一起进步,免得被不合理或者错误的东西误导后续看到此博文的小伙伴。

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值