一：创建项目

在桌面创建一个新的文件夹，点开新建文件夹在地址位置输入cdm打开黑窗口，然后子啊黑窗口中输入vue create 项目名创建一个项目。

选择要创建项目的类型这里我通过方向键的上下键选择最后一个的自定义类型

对项目中需要的内容进行选择通过空格来进行选择和取消选择

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

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

选择css的预处理器我们选择less

选择是否把设置的文件单独放在一个文件夹中还是放在package.json文件夹里这里我们选择放在一个文件夹中

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

现在项目成功创建好了系统提示了两句话一句是 “cd project02”表示进入这个项目 “npm run serve” 运行项目依次输入着两句话
在将黑窗口返回的网址复制到浏览器上进行查看

二：vue-router

vue-router是基于路由和组件的

路由用户设定访问路径的，将路径和组件映射起来。
在vue-router的单页面应用中，页面的路径的改变就是组件的切换

vue-router实现原理

SPA(single page application):单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面;vue-router在实现单页面前端路由时，提供了两种方式：Hash模式和History模式；根据mode参数来决定采用哪一种方式。

1、Hash模式：

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 hash（#）是URL 的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也就是说 #是用来指导浏览器动作的，对服务器端完全无用，HTTP请求中也不会不包括#；同时每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置；所以说Hash模式通过锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据

2、History模式：

由于hash模式会在url中自带#，如果不想要很丑的 hash，我们可以用路由的 history 模式，只需要在配置路由规则时，加入"mode: 'history'",这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

router-link

组件支持用户在具有路由功能的应用中 (点击) 导航。通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。

to

类型: string | Location

required

表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。

active-class

类型: string

默认值: "router-link-active"

设置链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

router-view

<router-view> 组件是一个 functional 组件，渲染路径匹配到的视图组件。<router-view> 渲染的组件还可以内嵌自己的 <router-view>，根据嵌套路径，渲染嵌套组件。

name

类型: string

默认值: "default"

如果 <router-view>设置了名称，则会渲染对应的路由配置中 components 下的相应组件。

vue-router核心要点

vue-router如何参数传递

①用name传递参数

在路由文件src/router/index.js里配置name属性

routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
]

②通过<router-link> 标签中的to传参

这种传参方法的基本语法：

<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>

③vue-router 利用url传递参数----在配置文件里以冒号的形式设置参数。

我们在/src/router/index.js文件里配置路由

{
    path:'/params/:newsId/:newsTitle',
    component:Params
}

vue项目的创建和vue-router的详解