VUE五

按之前的节奏到现在，项目跑不起来，接着调整App.vue和路由
打开App.vue文件，在template节把引用已经删除的asset文件内容部分的代码删除，写如下:

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

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

样式，都将从 src/style/style.scss 这个文件中引用，因此，在 App.vue 这个文件中，直接引用 ./style/style 即可。

scss 中，引用文件，是可以省略 .scss 这个后缀名的。 
并且，某个不用编译成 css 的文件，文件命名为 _xxx.scss

调整好了 App.vue 文件后，因为使用了 scss 文件预编译，所以需要安装两个支持 scss 的 npm 包。

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

在 page 文件夹下面有建立了两个空文本文件 index.vue 和 content.vue 文件，是准备用来放列表和内容的。

填写一点基础内容在里面。
index.vue

<template>
  <div>index page</div>
</template>

content.vue

<template>
  <div>content page</div>
</template>

项目还是跑不起来，运行 npm run dev 还是会出错。还要配置路由：

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
  ]
})

因为Hello组件已经被删除，所以报错，如下改动：

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/page/index'
import Content from '@/page/content'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: Index
    }, {
      path: '/content/:id',
      component: Content
    }
  ]
})

命令npm run dev,项目动起来了，如果还是不行请再仔细检查项目是否哪里出错。
原文：http://blog.csdn.net/FungLeo/article/details/77600798

推荐阅读更多精彩内容