Vue2+VueRouter2+webpack 构建项目实战（三）配置路由，整俩页面先
Vue2+VueRouter2+webpack 构建项目实战（三）配置路由，整俩页面先
制作模板文件
通过前面的两篇博文的学习，我们已经建立好了一个项目。问题是，我们还没有开始制作页面。下面，我们要来做页面了。
我们还是利用
http://cnodejs.org/api
这里公开的api来
做项目。不过本章节不涉及调用接口等内容。这里，我们假设我们的项目是做俩页面，一个列表页面，一个内容页面。列表页面有分页等，内容页面展示。
因此，我们需要两个模板文件。
我们在src/page目录下面新建两个文件，分别是index.vue和content.vue
代码分别是
//index.vue
<
div
>
index
div
>
template
>
//content.vue
<
template
>
<
div
>
content
div
>
template
>
这里，我们只要先把基础的内容写好就是了。我就用两个单词代表我们的页面。
安装VueRouter2
接下来，我们需要安装VueRouter2到
我们的项目。参考文档见
VueRouter2安装文档
在终端中，我们把当前目录跳转到我们的项目，然后执行npm install vue-router -D命
令。如下：
cd ~/Sites/MyWork/vuedemonpm install vue-router -D
我们查阅文档，会知道，命令是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)})
注：关于render: (h) => h(App)
首先需要了解这是 es 6 的语法，表示 Vue 实例选项对象的 render 方法作为一个函数，接受传入的参数 h 函数，返回 h(App) 的函数调用结果。
其次，Vue 在创建 Vue 实例时，通过调用 render 方法来渲染实例的 DOM 树。
最后，Vue 在调用 render 方法时，会传入一个 createElement 函数作为参数，也就是这里的 h 的实参是 createElement 函数，然后 createElement 会以 APP 为参数进行调用，关于 createElement 函数的参数说明参见：
Element-Arguments
上面的配置文件中的一部分在官方文档里面也找不到，这是我整理出来的，不用管，全部复制过去吧！
配置 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
>
就只是一个单纯的路由入口页面。比较特殊的是，下面我 import了一个scss文件。我喜欢把css独立出来，而不是写在一起，所以我之前在src目录下面建立了一个style的文件，里面放scss文件。
我建议你先跟着我走，回头自己根据自己的习惯调整。
配置 routes.js
下面我们配置路由文件。
// 引用模板
import index from
'../page/index.vue'
import content from
'../page/content.vue'
// 配置路由
export
default
[ { path:
'/'
, component: index }, { path:
'/content'
, component: content },]
如上，我们引用模板，然后再配置路由，这里，我们没有涉及自路由的内容，我们先这样配置上。然后，我们就可以在终端里面输入 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)
......
打开项目根目录下/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
}
如上，把 port 后
面的端口改成其他数字，如9000
即可。
关闭格式检查插件eslint
如上，我们再次运行 npm run dev 跑起来，结果发现命令行里面错误一片。。。很多人在这里就都晕了。。。没关系，其中大部分错误都是格式造成的，并不是很重要的错误，但是这样的提示很不爽。因此，我们把检查错误插件eslint给关闭掉。
打开根目录下面的/build/webpack.base.conf.js
文件，找到如下代码：
preLoaders: [ { test:
/\.vue$/
, loader:
'eslint'
, include: projectRoot, exclude:
/node_modules/
}, { test:
/\.js$/
, loader:
'eslint'
, include: projectRoot, exclude:
/node_modules/
}],
全部注释掉，如下
// preLoaders: [
// {
// test: /\.vue$/,
// loader: 'eslint',
// include: projectRoot,
// exclude: /node_modules/
// },
// {
// test: /\.js$/,
// loader: 'eslint',
// include: projectRoot,
// exclude: /node_modules/
// }
// ],
回头，调整格式的时候可以再打开。先关掉，解决核心错误，再来考虑这些格式错误。
安装sass-loader以及node-sass插件
然后我们再跑，这回错误肯定少多了，但是还是有错误。如果你上面是严格按照我的代码来的，这里应该会提示缺少sass-loader组
件错误。
没关系，缺什么，就安装什么，我们输入 npm install sass-loader -D进
行安装。
如上图所示，就安装好了。
安装好了再跑，这回又提示我们缺少node-sass插件。折磨疯了吧？没关系，缺啥，安啥。
输入命令npm install node-sass -D进行安
装。
安装node-sass时候出现问题：
在
测试
gulp-webapp
的时候遇到了
styles
不能被正常编译的问题，究其原因是node-sass没有被正常安装。
根本原因是国内网络的原因。
最终的解决方法是通过淘宝的
npm镜像
安装
node-sass
首先安装
cnpm
[javascript]
view plain
copy
- $ npm install -g cnpm --registry=https://registry.npm.taobao.org
然后安装node-sass
[html]
view plain
copy
- $ cnpm install node-sass
- 安装成功
安装结果不截图，然后，我们运行npm run dev，
如果不出意外的话，应该能够顺利的跑起来了。
我们在地址栏后面输入http://localhost:9000/#/content应
该就能访问到我们配置的内容页面的模板了，如下图所示：
小结
好，通过本章的学习，我们已经顺利的安装好路由，并简单的配置了两个页面，并且顺利的跑起来了。
可能是我写的代码不太标准，因此在跑起来的时候不能通过校验，必须把校验关闭掉才能跑起来。如果你知道我的代码有什么问题，欢迎留言给我，让我修复我的问题。
通过本章学习，我们需要掌握如下技能：
- 简单配置main.js文件。
- 简单安装组件，以及相应的配置。
- 遇到错误提示的时候，不要着急，一步一步排查，最终解决问题。
我的博文和官方文档最大的差别就是，我是一步一步走，并不是简单给你几个命令就好了。在这过程中，我们要学会排查问题，解决问题。要多看官方文档。