1 创建项目
-
如果是创建vue脚手架项目，请参考该博客：https://www.cnblogs.com/ming1025/p/9887247.html
配置脚手架
修改Eslint -
创建完成后，引入elementUI 到脚手架，则需要进入项目文件夹，执行命令
npm i element-ui -S，该命令加载elementUI 组件。
2) 查看配置文件package.json，是否有element-u组件的版本号。在node_modules中也可以查看，所有安装的源文件可以在这里面找到。加载elementUI 组件3) 修改main.js加载组件后新增部分
在main.js文件中添加引用。
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
4）此时即可使用elementUI。
- npm run dev :运行vue
npm run build:打包vue程序
****如果本地调试项目时，建议将build 里的assetsPublicPath的路径前缀修改为 ' ./ '（开始是 ' / '），因为打包之后，外部引入 js 和 css 文件时，如果路径以 ' / ' 开头，在本地是无法找到对应文件的（服务器上没问题）。所以如果需要在本地打开打包后的文件，就得修改文件路径。
2 脚手架结构详解
src文件夹
【1】assets
作用：存放静态文件，里面包含一个如js,css，图片之类。
【2】components
作用：存放组件
（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、引入部分
2、使用路由依赖
3、配置路由
【4】App.vue
主要说明<router-view/>，此处是用来展示路由页面内容，如果要跳转的话就使用<router-link to='xxx'></router-link>
【5】main.js
3 路由
index.js
假如单独安装的话需要安装下vue-router:命令为：npm install vue-router --save-dev【实际中，根据提示报错的提示信息运行出现的命令即可。npm install vue-router】
从此处发现，只要把写好的vue组件引用到此处即可。解释下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中，例如：
响应路由参数的变化
- 当使用路由参数时，两个路由都渲染同一个组件时，原来的组件实例会被复用，这样比销毁再创建显得更高效，但是，这也意味着组件的生命周期勾子不会被再次调用。
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 >
