搭建第一个Vue项目

准备工作

安装node并验证是否成功

下载需要的node安装文件,然后安装,略过不讲。

如果没有什么问题的话,nodejs安装成功后会将npm(包管理工具)自动添加至系统的环境变量。打开cmd,输入命令“npm -v”。我的结果如下,表示安装成功,npm已添加至系统环境变量


安装cnpm并验证

npm毕竟是国外的,抽风是极有可能的。所以可以使用taobao的替代产品cnpm。安装方式为在cmd中输入如下代码

npm install -g cnpm --registry= https://registry.npm.taobao.org

验证方式:在cmd中使用cnpm -v


安装webpack并验证

安装方式:在cmd中输入如下代码

npm install webpack -g

验证方式:在cmd中输入如下代码

webpack -v


安装vue-cli脚手架

使用vue-cli可以快速搭建vue开发环境

在cmd中输入如下代码

npm install vue-cli -g

验证方式:在cmd中输入如下代码:vue -V


至此,准备工作完毕

创建vue项目

cmd切换至要创建项目的目录,输入以下代码

vue init webpack 项目名称

注意项目名称不能使用中文

直接回车表示使用默认项目名

下边的步骤比较简单,如果能看懂的话,可以自己选择。如果有些选项不是很明白,可以自己搜索。也可以使用默认选项。最终的项目结构如下(在webstorm中)


在终端输入npm run dev,启动项目。如果启动成功,会显示最后一行的访问地址


结果:


搭建成功

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值