Vue+Router+Webpack+Axios 构建项目实战（三）调整 App.vue 和 router 路由

在上一篇《Vue+Router+Webpack+Axios 构建项目实战（二）认识项目文件》，我们已经重新整理了我们的目录结构，如果你已经忘记了，可以先去看一下。

如果你按照我的结构框架去调整了之后，那么，现在你的项目应该是出错，并且跑不起来了。所以，我们需要进行一些调整，让项目重新跑起来。

调整app.vue

把代码调整为下面的样子。<router-view></router-view>是默认路由路径

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

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

调整 home.vue 和 router/index.js 文件

home.vue添加一些内容

<template>
	<div>
		home.vue
	</div>
</template>

router/index.js修改根目录文件路径

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/page/home'

Vue.use(Router)

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

好，我们现在，项目应该是没有任何错误，可以跑起来了。忘记跑起来的命令了？如下：

npm run dev

如果你的项目没有能够顺利的跑起来，则说明你哪里写错了。在终端里面或者浏览器里面，是会告诉你出错在哪里的。

但很可能你的英文不是很好，看不懂那些提示。没有关系，借助搜索引擎和翻译引擎，应该能够很快的排查出来，到底是哪里出错了。

即便你可能遇到一些问题。你还是能够顺利的跑起来，得到如下的结果：

为项目添加scss

修改app.vue,如下：

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

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

<style lang='scss'>
	@import '@/assets/scss/main.scss';
</style>

，不出所料的话再次在终端执行npm run dev,会发现如下问题：

因为我们使用了 scss 文件预编译，所以我们需要安装两个支持 scss 的 npm 包。

我们在项目终端内输入下面的两句命令来进行安装：

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

安装完成之后，我就可以顺利的使用起来项目了，npm run dev如下scss也已经成功的加载了，是不是很简单？如果你在这其中还出现过其他问题，我的建议就是，重新走一遍我所写下的教程，因为你会发现你所出现的问题其实都不是问题