Vue项目创建流程

一.Vue项目的创建

新建一个存放文件的文件夹，找到存放项目的文件夹 ，路径中输入cmd，点击enter就会弹出小黑窗 ，然后输入vue create 项目名，而后创建项目

 项目创建后，按上下键进行选择，选择自定义 就是最后一个 按回车

选择项目设置 按上下键切换 按空格键选择或者取消选择 最终我们选择上面四个 然后回车键 

 选择vue.js的版本 这里我们选择vue2.x的版本   通过方向键来进行选择

 选择路由的模式 输入y就是选择了history模式  ，输入n就是选择了hash模式  输入n，选择hash模式

 选择css的预处理器 ，这里选择less

这里询问你是把设置另外放在一个文件夹里 还是放在package.json文件夹里，我们选择一个文件夹中。

 选择是否把刚刚的设置保存下来 如果保存下来输入y回车在输入名字 如果不需要保存下来就输入n

现在项目成功创建好了 系统提示了两句话 一句是 “cd project”表示进入这个项目 “npm run serve” 运行项目 依次输入着两句话

 

项目创建完毕 

 

二、什么是Vue-Router？

• vue-router是vue官方给出的路由解决方案。它只能结合vue项目进行使用，能够轻松的管理SPA项目中组件的切换。
• 对于VueRouter而言，路由就是根据一个请求路径选中一个组件进行渲染的决策过程。

 vue-router组成

vue-router组件有三个部分
1.link：即v-link
2.view：元素指令，即
3.router：核心部分

 Router实现的两种模式

更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有2种方式：

1. Hash — 默认值，利用 URL 中的hash("#") 、

2. history-- 利用URL中的路径（/home）

1.Hash模式

hash就是指url尾巴后的 # 号以及后面的字符。这里的 # 和css里的 # 是一个意思。hash也称作锚点，本身是用来做页面定位的，他可以使对应的id元素显示在可视区域内。

    hash路由的优缺点

优点

• 实现简单，兼容性好（兼容到ie8）
• 绝大多数前端框架均提供了给予hash的路由实现
• 不需要服务器端进行任何设置和开发
• 除了资源加载和ajax请求以外，不会发起其他请求

缺点

• 对于部分需要重定向的操作，后端无法获取hash部分内容，导致后台无法取得url中的数据，典型的例子就是微信公众号的oauth验证
• 服务器端无法准确跟踪前端路由信息
• 对于需要锚点功能的需求会与目前路由机制冲突

 

2.History模式

 hash 的传参是基于 url 的，如果要传递复杂的数据，会有体积的限制，而 history 模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中。

History(browser)路由的优缺点 

优点

• 对于重定向过程中不会丢失url中的参数。后端可以拿到这部分数据
• 绝大多数前段框架均提供了browser的路由实现
• 后端可以准确跟踪路由信息
• 可以使用history.state来获取当前url对应的状态信息

缺点

• 兼容性不如hash路由(只兼容到IE10)
• 需要后端支持，每次返回html文档