Vue项目搭建 (Vue-cli )脚手架构建项目

第一步 安装Node.js 与 vue.cli

Nide.js链接下载后傻瓜式安装就可以

点击下载 Node.js 安装包

node -v npm -v

输出版本号就安装成功

// CMD执行
npm install -g cnpm --registry=https://registry.npm.taobao.org
// 验证
cnpm -v

这个用于cnpm 不懂的小伙伴自行百度 cnpm比npm下载速度要快

vue.cli

如果你还没有安装 VueCLI,请执行下面的命令安装或是升级

npm install --global @vue/cli

第二步 搭建项目

创建项目

找个文件夹运行cmd

1.使用命令行创建项目

vue create helloworld(项目名)

在这里插入图片描述
2.请选择一个预设
这里我们选择最后一个选项->手动选择配置
在这里插入图片描述
3.让你选择项目要用到的依赖这里勾选router(路由),方向键上下选择空格选择 选择路由后回车 进入下一步
在这里插入图片描述
4.让你选择vue的版本 这里我们选择2.x版本
在这里插入图片描述
5.选择模式 Y就是history模式 N就是hash模式,下面是对这两种模式的扩展

1、hash 模式:
即地址栏URL中的 # 符号。
比如这个URL:http://www.abc.com/#/hello, hash 的值为 #/hello。它的特点在于:hash 虽然出现URL中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变hash不会重新加载页面。
hash模式下,仅hash符号之前的内容会被包含在请求中,如 http://www.abc.com, 因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回404错误。
2、history 模式:
利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。(需要特定浏览器支持)
这两个方法应用于浏览器的历史记录站,在当前已有的back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改是,虽然改变了当前的URL,但你浏览器不会立即向后端发送请求。
history模式,会出现404 的情况,需要后台配置。
history模式下,前端的url必须和实际向后端发起请求的url 一致,如http://www.abc.com/book/id 。如果后端缺少对/book/id 的路由处理,将返回404错误。

在这里插入图片描述
6.选择一个代码检查工具选择第三个
在这里插入图片描述
7.什么时候检查
选第一个 保存时检查 commit提交时检查的话建议不可取
在这里插入图片描述
8.配置文件问题 默认选第一个
在这里插入图片描述
9.是否希望打成模板 Y打印 N不打印
在这里插入图片描述

10.预设名字填写创建的项目名称就好

第三步 等待构建项目

搭建完成
在这里插入图片描述
run一下 测试是否搭建成功

cd 项目名
npm run serve

run成功
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

国家级著名CV工程师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值