Vue+Router+Webpack+Axios 构建项目实战(三)调整 App.vue 和 router 路由
2018-09-02 11:21
1131 查看
版权声明:Made in DreamBoy https://blog.csdn.net/qq_37536200/article/details/82313647
在上一篇《Vue+Router+Webpack+Axios 构建项目实战(二)认识项目文件》,我们已经重新整理了我们的目录结构,如果你已经忘记了,可以先去看一下。
如果你按照我的结构框架去调整了之后,那么,现在你的项目应该是出错,并且跑不起来了。所以,我们需要进行一些调整,让项目重新跑起来。
调整app.vue
把代码调整为下面的样子。<router-view></router-view>是默认路由路径
[code]<template> <div id="app"> <router-view></router-view> </div> </template> <script> export default { name: 'App' } </script>
调整 home.vue 和 router/index.js 文件
home.vue添加一些内容
[code]<template> <div> home.vue </div> </template>
router/index.js修改根目录文件路径
[code]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 } ] })
好,我们现在,项目应该是没有任何错误,可以跑起来了。忘记跑起来的命令了?如下:
[code]npm run dev
如果你的项目没有能够顺利的跑起来,则说明你哪里写错了。在终端里面或者浏览器里面,是会告诉你出错在哪里的。
但很可能你的英文不是很好,看不懂那些提示。没有关系,借助搜索引擎和翻译引擎,应该能够很快的排查出来,到底是哪里出错了。
即便你可能遇到一些问题。你还是能够顺利的跑起来,得到如下的结果:
为项目添加scss
修改app.vue,如下:
[code]<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包。
我们在项目终端内输入下面的两句命令来进行安装:
[code]npm install sass-loader -D npm install node-sass -D
安装完成之后,我就可以顺利的使用起来项目了,npm run dev如下scss也已经成功的加载了,是不是很简单?如果你在这其中还出现过其他问题,我的建议就是,重新走一遍我所写下的教程,因为你会发现你所出现的问题其实都不是问题
阅读更多
相关文章推荐
- Vue2+VueRouter2+Webpack+Axios 构建项目实战(四)调整 App.vue 和 router 路由
- Vue项目实战(四)调整 App.vue 和 router 路由
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(四)调整 App.vue 和 router 路由
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(四)调整 App.vue 和 router 路由
- 用vue-router和webpack搭建路由项目
- # webpack+vue+vueRouter 模块化构建完整项目实例
- Vue2+VueRouter2+Webpack+Axios 构建项目实战(一)基础知识概述
- windows下vue-cli及webpack 构建网站及 路由vue-router的使用
- Vue.js结合vue-router和webpack编写单页路由项目
- vue.js2.0基于MVVM框架(Vuex+Vue Router+axios+jsonp+webpack 2.0+es6)全家桶技术实战
- webpack+vue+vueRouter+es6 构建的简单实例项目
- windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用
- Vue.js结合vue-router和webpack编写单页路由项目
- 详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用
- webpack+vue+vueRouter模块化构建完整项目实例详细步骤-入门篇
- webpack+vue+vueRouter模块化构建完整项目实例详细步骤-入门篇
- Vue2+VueRouter2+webpack 构建项目实战(三)配置路由,整俩页面先
- Vue2+VueRouter2+webpack 构建项目实战(三):配置路由,运行页面
- Vue.js结合vue-router和webpack编写单页路由项目
- webpack+vue+vueRouter模块化构建完整项目实例超详细步骤(附截图、代码、入门篇)