webpack入坑之旅配合vue-router实现SPA
Posted ghyes
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack入坑之旅配合vue-router实现SPA相关的知识,希望对你有一定的参考价值。
在上面的练习当中我们已经成功的加载了一个.vue
格式的单文件组件,并且实现了在使用vue情况下的自动刷新。
但是我们最终的目的还是要实现单页面应用程序,这个时候我们就必不可少的需要使用到路由管理器来进行SPA的开发,vue官方为我们提供了一个官方库vue-router,并且配有对应的中文文档。关于里面的内容大家自行前去观看。在这里,只会把我们需要的东西拿出来讲。
vue组件
在Vue
中定义一个组件非常简单,只需要一对自定义标签,在其中填入内容就可以进行我们的组件编写了,然后使用Vue.component()
去注册我们的组件下面来看一个例子,来直观的看看vue的组件。
组件入门
1
|
<script src="js/vue.js"></script>
|
上面就是最简单的定义组件的方式,template
属性中写的东西:就是<my-component>
这个自定义标签渲染后展现出来的样式,这里渲染为:
1
|
<div id="app">
|
组件的基础介绍就到这,更多详细内容请移步官网,有着非常清晰的讲解。
vue-router
刚刚已经对于vue的组件有了一定的了解。现在来结合vue-router,来进行一下动态的切换。
首先是安装,如果使用npm的形式的话,直接运行npm install vue-router --save
,就可以看到vue-router
,已经被添加到了项目依赖中。直接上ES6
的语法来进行引入
1
|
import Vue from "vue";
|
起步
其实这一部分vue-router
的中文文档中已经讲的非常详细了。。在这里与它不同的是它用的CommonJS
的规范来进行模块安装,而我使用ES6的import,有兴趣自己去看- -。其他的内容我就直接扒下来了。
html:
1
|
<div id="app">
|
1
|
// 定义组件
|
我个人感觉这部分还是很好理解的,官方也给了一系列的例子:查看仓库的 README.md 来运行它们。很好的展现了它的路由切换。
简单的介绍到这,下面最重要的部分到了,看看如何结合我们定义的.vue
单文件组件。
首先来看我们的文件目录结构:
定义路由规则
最主要是main.js
的变化,直接在文件中讲解了:
1
|
import Vue from ‘vue‘
|
App.vue 需要有用于渲染匹配的组件,如下
1
|
<template>
|
现在当我们运行 npm start
进入http://localhost:8080/
就会自动跳转到http://localhost:8080/#/index
,并且读取里面的内容。
实现路由跳转
主要抽出index.vue
中的内容来讲解,的内容是:(list.vue
里面的内容自行设置查看吧)
1
|
<template>
|
因为自刷新的缘故,直接切换到浏览器。
点击上面使用的router-link
,与this.$router.push
的方式都可以跳转到list
定义的路由。(观察浏览器地址栏的变化)在这里我们使用 { path: ‘/list‘ }
,如有别名的话,使用的{name:"list"}
,会有同样的效果。
Vue组件的嵌套
在第一小点里面我们看到了在页面内的组件的使用方法,第二小点中学习到了vue-router
的制定路由规则。
看过这两个地方之后,我们把思维发散开来,应该就能触类旁通的想到如何在页面中嵌套加载别的组件了。
我们创建一个hello.vue
,里面内容随意。现在我们如果要在app.vue
中加载它,那么只需要在app.vue
中使用import hello from "./hello.vue"
(其实这个达到了使用require两步的效果。引入赋值)。
引入之后,只需要如下注册:
1
|
export default {
|
最后在app.vue
中添加<hello></hello>
这一对自定义标签,就可以实现加载hello.vue
中的内容。
组件的嵌套也就是这样,很简单的描述完了,但是怎么样去抽离组件,在工作中积累可以复用的组件才是我们真正需要去思考的。
那么先到这,关于组件之间通信的问题,留到以后慢慢了解。
路由嵌套
还是刚刚的代码与目录结构,我们已经实现了组件之间的嵌套,但是有时并不希望组件直接就加载进来,而是在用户点击后才展现在页面中,这是就需要使用到路由嵌套。
为了偷懒,这里就直接使用hello.vue
。实现嵌套路由主要有以下几步:
第一步:制定嵌套路由规则:
看main.js
下面这部分的代码:
1
|
{
|
第二步:在组件中添加<router-view>
来自官网的解释:
<router-view>
用于渲染匹配的组件,它基于Vue的动态组件系统,所以它继承了一个正常动态组件的很多特性。
将<router-view>
写在app.vue
的<template></template>
标签中。
第三步:写入跳转路径
还是在index.vue
中:
1
|
<router-link :to="{ path: ‘/index‘ }">回去主页</router-link>
|
,切换到浏览器,点击该嵌套的路由
即可让hello.vue
中的展现出来,在这里直接使用了router-link
来实现跳转 ,当然$router.push
同理。(注意在点击两个不同的文字时,地址栏的变化,以及展现内容的切换)
注意:
记录 vue-webapck 的学习基础,代码示例 github地址
这个教程更多的是从基础开始学习,vue 与 webpack 应该要怎么结合。在真实的实际项目中,还是推荐 vue-cli。
关于 vue-cli 生成的配置解析可以参考一下 vue-cli#2.0 webpack 配置分析
在我的源码中是在<style scoped></style>
标签中定义样式的,请注意scoped
的使用,它表示在该style
中定义的样式只会在当前的组件中起到效果,而不会去影响全局的css样式。
最简单的理解应该就是:
未写该scoped
属性的所有组件中的样式,在经过vue-loader
编译之后拥有全局作用域。相当于共用一份css
样式表。
而写了该属性的的组件中定义的样式,拥有独立作用域。相当于除去引入了公用的一份css
样式表外,但单独拥有一份css
的样式表。
以上是关于webpack入坑之旅配合vue-router实现SPA的主要内容,如果未能解决你的问题,请参考以下文章