在上一篇《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也已经成功的加载了,是不是很简单?如果你在这其中还出现过其他问题,我的建议就是,重新走一遍我所写下的教程,因为你会发现你所出现的问题其实都不是问题