如何安装vue-cli脚手架,并启动项目

一,安装nodejs 官网下载,傻瓜式安装即可,安装完之后cmd 控制台输入node显示版本即为安装成功。
在这里插入图片描述

二,安装cnpm,npm是nodejs 的包管理器,管理项目依赖,cnpm 是npm的淘宝国内服务器,使用cnpm下载速度快。安装命令:
npm install -g cnpm --registry=https://registry.npm.taobao.org

三,安装vue-cli 安装命令 cnpm install -g @vue/cli。安装完之后输入vue -V正确显示版本号即为安装成功。
在这里插入图片描述

四,创建项目:
1,使用命令 vue create projectname 创建vue 项目,projectname:项目名。
2,进入配置 选择默认版和手动版(我选择的是手动版)
3,进入手动版配置界面,选择需要安装的插件,上下键移动选项,空格键选中插件,前面括号出现(*)即为选中。根据自己的需求选择插件,要搞懂每个插件分别是干什么的。我选择是babel和router。
在这里插入图片描述
4,选择路由模式:
Hash: 使用URL的hash值来作为路由。支持所有浏览器。
   History: 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式
   Abstract: 支持所有javascript运行模式。如果发现没有浏览器的API,路由会自动强制进入这个模
Hash 模式在url地址中都存在一个#号,一般比较常用,可根据自己的了解和需求选择不同的路由模式。
5,选择不同的方式配置文件,特定的配置文件还是package.json ,都可以,我选择的是特定的配置文件
在这里插入图片描述
6,是否保存保存模板,以后都按照这个设置创建项目,新手建议选择否,以后熟练了会有更好的模板。
在这里插入图片描述
7,点击空格,正式开始创建项目
在这里插入图片描述

在这里插入图片描述

创建成功,去目录中可以看到整个项目结构。
在这里插入图片描述

7, 用这两个命令启动项目,先进入创建好的项目中,在执行启动命令。
在这里插入图片描述
执行结果:
在这里插入图片描述
在这里插入图片描述
启动成功后有两个访问地址,尝试去访问。
在这里插入图片描述

访问成功。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值