Vue2+VueRouter2+webpack 构建项目实战（三）配置路由，整俩页面先（上）
Vue2+VueRouter2+webpack 构建项目实战（三）配置路由，整俩页面先
目录索引
《Vue2+VueRouter2+webpack 构建项目实战（一）准备工作》
《Vue2+VueRouter2+webpack 构建项目实战（二）目录以及文件结构》
《Vue2+VueRouter2+webpack 构建项目实战（三）配置路由，整俩页面先》
《Vue2+VueRouter2+webpack 构建项目实战（四）接通api，先渲染个列表》
《Vue2+VueRouter2+webpack 构建项目实战（五）配置子路由》
《Vue2+VueRouter2+webpack 构建项目实战（六）修复代码并通过验证，另发布代码》
制作模板文件
通过前面的两篇博文的学习，我们已经建立好了一个项目。问题是，我们还没有开始制作页面。下面，我们要来做页面了。
我们还是利用 http://cnodejs.org/api 这里公开的api来做项目。不过本章节不涉及调用接口等内容。这里，我们假设我们的项目是做俩页面，一个列表页面，一个内容页面。列表页面有分页等，内容页面展示。
因此，我们需要两个模板文件。
我们在src/page目录下面新建两个文件，分别是index.vue和content.vue
代码分别是
//index.vue
<div>indexdiv>
template>
//content.vue
<template>
<div>contentdiv>
template>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
这里，我们只要先把基础的内容写好就是了。我就用两个单词代表我们的页面。
安装VueRouter2
接下来，我们需要安装VueRouter2到我们的项目。参考文档见VueRouter2安装文档
在终端中，我们把当前目录跳转到我们的项目，然后执行npm install vue-router -D命令。如下：
cd ~/Sites/MyWork/vuedemo
npm install vue-router -D- 1
- 2
- 1
- 2
我们查阅文档，会知道，命令是npm install vue-router，那为什么我后面加一个-D的参数呢？这个是为了让我们的安装的vue-router这个插件写入到package.json配置文件中。以便于下次再其他地方安装的时候，可以一并安装进去，否则，还得再安装一遍。
配置 main.js
通过在终端中执行命令，我们已经安装好路由了。下面，我们需要在src/main.js文件中进行配置。
整理代码如下：
// 引用 vue 没什么要说的
import Vue from 'vue'
// 引用路由
import VueRouter from 'vue-router'
// 光引用不成，还得使用
Vue.use(VueRouter)
// 入口文件为 src/App.vue 文件 所以要引用
import App from './App.vue'
// 引用路由配置文件
import routes from './config/routes'
// 使用配置文件规则
const router = new VueRouter({
routes
})
// 跑起来吧
new Vue({
router,
el: '#app',
render: (h) => h(App)
})- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
上面的配置文件中的一部分在官方文档里面也找不到，这是我整理出来的，不用管，全部复制过去吧！
配置 App.vue
入口文件肯定和默认的不一样，我的配置文件如下：
<div>
<router-view
class="view"
keep-alive
transition
transition-mode="out-in">
router-view>
div>
template>
<script>
export default {
components: {}
}
script>
<style lang="scss">
@import "./style/style";
style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
就只是一个单纯的路由入口页面。比较特殊的是，下面我 import了一个scss文件。我喜欢把css独立出来，而不是写在一起，所以我之前在src目录下面建立了一个style的文件，里面放scss文件。
我建议你先跟着我走，回头自己根据自己的习惯调整。
注：这里 引入的scss 按前两个来，有点问题，应该改为@import"./style/scss/style";
配置 routes.js
下面我们配置路由文件。
// 引用模板
import index from '../page/index.vue'
import content from '../page/content.vue'
// 配置路由
export default [
{
path: '/',
component: index
},
{
path: '/content',
component: content
},
]- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
如上，我们引用模板，然后再配置路由，这里，我们没有涉及自路由的内容，我们先这样配置上。然后，我们就可以在终端里面输入 npm run dev 来看我们做的效果了。
配置运行端口
如果没有跑起来，提示下面的错误，就表明默认的端口8080被占用了。一般不会被占用，但是也有可能被占用。所以，我们这边来学习一下如何配置运行端口。
# 端口被占用的提示
Error: listen EADDRINUSE :::8080
at Object.exports._errnoException (util.js:953:11)
at exports._exceptionWithHostPort (util.js:976:20)
at Server._listen2 (net.js:1253:14)
......- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
打开项目根目录下/config/index.js配置文件，找到
dev: {
env: require('./dev.env'),
port: 8080,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
如上，把 port 后面的端口改成其他数字，如9000 即可。