1 创建项目

• 如果是创建vue脚手架项目，请参考该博客：https://www.cnblogs.com/ming1025/p/9887247.html
  

  配置脚手架
  
  
  修改Eslint

• 创建完成后，引入elementUI 到脚手架，则需要进入项目文件夹，执行命令npm i element-ui -S，该命令加载elementUI 组件。
  

  加载elementUI 组件
  2) 查看配置文件package.json，是否有element-u组件的版本号。在node_modules中也可以查看，所有安装的源文件可以在这里面找到。
  加载组件后新增部分
  3) 修改main.js
  在main.js文件中添加引用。

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

main.js文件修改

4）此时即可使用elementUI。

• npm run dev :运行vue
  npm run build:打包vue程序

****如果本地调试项目时，建议将build 里的assetsPublicPath的路径前缀修改为 ' ./ '（开始是 ' / '），因为打包之后，外部引入 js 和 css 文件时，如果路径以 ' / ' 开头，在本地是无法找到对应文件的（服务器上没问题）。所以如果需要在本地打开打包后的文件，就得修改文件路径。

2 脚手架结构详解

src文件夹

src文件夹

helloword示例

（a）、一个.vue文件由什么组成：template（模板）、js（script）、style（样式）

（b）、template：一个模板里面只能有一个父节点，比如在脚手架默认helloword.vue里的class为hello的父节点div，他没有其他的兄弟节点。

（c）、script：vue通常使用es6来写这部分，然后使用export default导出，他里面可以写比如data，mounted，methods等等。
其中，data一定要用return来返回。

（d）、style：跟我们写样式表一样，都是使用<style></style>来包裹，不过，他这里是默认影响全局的，也就是说回影响到包含他的所有页面。
这里的使用的是局部的，语法是<style scoped></style>，scoped的意思就是只作用于当前页面，不影响其他页面。

【3】router 路由
路由在router目录下的index.js
1、引入部分

说明

路由依赖

配置路由

app.vue

main.js

3 路由

index.js
假如单独安装的话需要安装下vue-router:命令为：npm install vue-router --save-dev【实际中，根据提示报错的提示信息运行出现的命令即可。npm install vue-router】

index.js

path

4 初步理解数据流程

1、声明组件，也就是需要写的部分，在components中创建.vue页面，每一个.vue都是一个组件，整个页面就是不同的组件之间的组合。【功能模块化】
2、然后注册路由，在router中的文件中，注册路由，个人理解就是中转，实现组件页面和另外页面的一个交流通道，路由提供[道路名称，路径，同时在此处引用vue环境即路由组件环境]。可以简单理解：为各种功能指明特定名称和路径，并搭配好环境。各种环境好比是高速路，各种页面路由属性好比是高速路的各个岔路口标识。
3、最后，在页面中通过路由引用2中路由属性，从而实现页面内容显示。

1、router-link
  <router-link to='./home'></router-link>
  vue 内置标签, 在渲染时渲染成a标签,在点击的情况,路由中的页面在<router-view>标签中渲染
  to属性可以跳转页面,后面跟随的是相应路由中的path属性，指引到需要的组件相对位置。
  tag="button" 属性可以渲染成想要的原生标签
2、router-view
  <router-view></router-view>写在组件想要渲染的地方,等组件跳转过来就渲染。
  可以理解为声明了一个区域，专门用来显示跳过来的组件显示的位置。

5 路由

传参

• name传递
  在接受的页面 <p>我是router-name：{{$route.name}}</p>即可传递，一般不这么传，
• to 传递
  利用router-link中的to传递。

语法：
    <router-link v-bind:to="{name:'xxx',params:{key:value}}"></router-link>
解释：
    a、首先：to需要绑定
    b、传参使用类似于对象的形式
    c、name就是我们在配置路由时候取的名字
    d、参数也是采用对象的形式

例子：
a、在App.vue中将to里的路径修改成上面那样

<router-link :to="{name:'hellovue',params:{username:'tomcat'}}">hellovue页面</router-link>

这里我们注意to的写法，前面加了冒号，因为那是绑定的，传一个username过去，值为tomcat。

例子图片

c、在hellovue.vue中接收参数
<p>传递的名字是：{{$route.params.username}}</p>

• url 传值
  在路由文件中采用冒号的形式传参，就是对参数的绑定。

• 动态路由匹配

const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

一个“路径参数”使用冒号:标记。当标记到一个路由时，参数值会被设置到this.route.params中，例如：

多段路径参数

响应路由参数的变化

1. 当使用路由参数时，两个路由都渲染同一个组件时，原来的组件实例会被复用，这样比销毁再创建显得更高效，但是，这也意味着组件的生命周期勾子不会被再次调用。
   2）复用组件时，假如要对参数的变化做出响应的话，可以watch(监测变化)$route对象。

const User = {
  template: '...',
  watch: {
    $route(to, from) {
      // 对路由变化作出响应...
    }
  }
}

或者使用导航守卫 beforeRouteUpdate
捕获所有路由或404 Not found路由
常规参数只会匹配被/分隔的url，如果想要匹配任意路径，可以使用通配符（*）；

{
  // 会匹配所有路径
  path: '*'
}
{
  // 会匹配以 `/user-` 开头的任意路径
  path: '/user-*'
}

当使用通配符路由时，需要确保路由的顺序是正确的，也就是说含有通配符的路由应该放在最后。路由{path:'*'}通常用户客户端404错误。
当使用一个通配符时，$router.params内会自动添加一个名为pathMatch参数。包含了URL通过通配符被匹配的部分。

// 给出一个路由 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
// 给出一个路由 { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'

高级匹配模式
vue-router 使用 path-to-regexp 作为路径匹配引擎，所以支持很多高级的匹配模式，例如：可选的动态路径参数、匹配零个或多个、一个或多个，甚至是自定义正则匹配。查看它的文档学习高阶的路径匹配，还有这个例子 展示 vue-router 怎么使用这类匹配。
匹配优先级
有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：**谁先定义的，谁的优先级就最高。

嵌套路由
实际中，很多应用页面是多层嵌套组件完成，同样的，url中各段动态路径也按照某种结构对应嵌套的各层组件，如下:

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

借助vue-router，使用嵌套路由配置，就可以很简单的表达这种关系。

实例：
const router = new VueRouter({
  routes: [
         // 此处的路径会被当作根路径，所以嵌套的组件中不许要写嵌套的路径。
    { path: '/user/:id', component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

• 要注意，以/开头的话嵌套路径会被当作根路径。可以让人充分的使用嵌套组件而无需设置嵌套的路径。 *
  children配置就是像routes配置一样的路由配置数组，所以可以嵌套多层路由。
  此时，基于上面的配置，当想访问/user/foo时，User的出口是不会渲染任何东西，这是因为没有匹配到合适的子路由。如果想要渲染什么，可以提供一个空的子路由：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id', component: User,
      children: [
        // 当 /user/:id 匹配成功，
        // UserHome 会被渲染在 User 的 <router-view> 中
        { path: '', component: UserHome },

        // ...其他子路由
      ]
    }
  ]
})

编程式的导航

• 除了使用<router-link>创建a标签定义导航链接，还可以借助router的实例方法，通过编写代码来实现。
  router.push(location, onComplete?, onAbort?)
  注意:在vue实例内部，可以通过$router访问路由实例。因此可以调用this.$router.push
• 想要导航到不同的url，则使用router.push方法，这个方法会向history栈添加一个新的记录，所以，当用户点击浏览器后腿按钮时，则回到之前的URL。
• 当点击<router-link>时，这个方法会在内部调用，所以说，点击<router-link >