Vue2+VueRouter2+webpack 构建项目实战三：配置路由，运行页面

制作.vue模板文件

通过前面的两篇博文的学习，我们已经建立好了一个项目。问题是，我们还没有开始制作页面。下面，我们要来做页面了。

我们还是利用 http://cnodejs.org/api 这里公开的api来做项目。不过本章节不涉及调用接口等内容。这里，我们假设我们的项目是做俩页面，一个列表页面，一个内容页面。列表页面有分页等，内容页面展示。

因此，我们需要两个模板文件。

我们在src/page目录下面新建两个文件，分别是index.vue和content.vue

index.vue代码：

<template>
    div>这是首页</>
>

content.vue代码：

>
  >这是内容页> 

配置路由routes.js

在src目录下的config文件夹下新增routes.js文件代码如下：

import Vue from 'vue'
import Router from 'vue-router'
// 引用模板
import index from '../page/index.vue'
import content from '../page/content.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',component: index
    },{
        path: '/content'配置main.js
注意：变动部分为引入路由配置文件路径：

import Vue from 'vue'
import App from './App'
import router from './router/routes.js'

Vue.config.productionTip = false

 Vue({
  el: '#app'

配置App.vue

div id="app">
       class="nav-list">
      router-link ="nav-item" to="/">首页router-link="/content">内容页router-view></>

script>
export default {
  name: 'app
}
style
#app {
  font-family: 'Avenir',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-align center
  color #2c3e50
  margin-top 60px;
}
>

关闭格式检查插件eslint
当我们npm run dev的时候页面运行后出现如图所示：

然后去查看错误发现大部分是语法问题引起的，所以打开根目录下面的/build/webpack.base.conf.js文件，注释掉如下代码：

{
    test: /\.(js|vue)$/'pre')],options: {
      formatter: require('eslint-friendly-formatter')
    }
}

再次运行npm run dev 就会在浏览器出现如图所示的界面：

点击内容直接进入内容页界面。
到这儿页面就运行起来了，也就可以其它的开发了。
扩展：使用sass写样式
如果我们在App.vue中导入了sass,如：
那么App.vue代码如下：

style lang="scss"
  @import "./style/style";
>

这样以来页面就会报错，因为没有安装sass-loader,如下错误：

ERROR in ./src/App.vue
Module not found: Error: Can't resolve 'sass-loader' in 'D:\vue_test_project\vuedemo\src'
 @ ./src/App.vue 4:2-324
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

需要安装安装sass-loader以及node-sass插件才能正常运行。依次执行下面的指令：

npm install sass-loader -D
npm install node-sass -D

这样页面就顺利运行起来了。
结果如图所示：

参考
Vue2+VueRouter2+webpack+vue-cil构建完整项目实例（附:详细步骤截图）
Vue2+VueRouter2+webpack 构建项目实战（三）配置路由，整俩页面先