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成功