关闭

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(四)调整 App.vue 和 router 路由

标签: VueVueRouterWebpackapp-vuerouter
15119人阅读 评论(72) 收藏 举报
分类:

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(四)调整 App.vue 和 router 路由

前情回顾

在上一篇《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(三)认识项目所有文件》,我们已经重新整理了我们的目录结构,如果你已经忘记了,可以先去看一下。

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

调整 App.vue 文件

我们先把默认项目里面没用的东西先删除掉,把代码调整为下面的样子。

<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 其中,文件名前缀的下划线,也是可以省略的。
更多内容可以参考我以前写的博文《CSS预编译技术之SASS学习经验小结

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

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

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

npm install sass-loader -D

npm install node-sass -D

因宿舍翻墙效果不好,这里用 cnpm 替代了 npm 进行安装的。效果是一样一样的。

调整 index.vue 和 content.vue 文件

昨天,我们在 page 文件夹下面建立了两个空文本文件 index.vuecontent.vue 文件,是我们准备用来放列表和内容的。

这里,我们先去填写一点基础内容在里面。

index.vue

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

content.vue

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

好,写上如上的代码就行,我们后面再丰富这些内容。

调整 router 路由文件

现在,这个项目还跑不起来呢,如果你运行 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
    }
  ]
})

默认,我们的首页,就是我们的 Index 组件,这里,你可能要问 :id 是什么意思?

因为我们的内容页面是要展示N条内容的,我们如何来区分这些内容呢,就是根据ID来进行区分。所以,这里使用了动态路由匹配。

更多内容,可以参考官方文档《动态路由匹配

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

npm run dev

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

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

另外,我是使用 Atom 编辑器来编写代码的。关于如何在 Atom 编辑器里面开启代码检查,请参看我另外一篇博文 《Atom 编辑器安装 linter-eslint 插件,并配置使其支持 vue 文件中的 js 格式校验

即便你可能遇到一些问题。但是我希望你还是能够顺利的跑起来,得到如下的结果:

npm run dev

如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的博文,以避免误人子弟。

本文由 FungLeo 原创,允许转载,但转载必须保留首发链接。

23
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

Vue2+VueRouter2+webpack+Axios 构建项目实战(七)重构API文件为使用axios

Vue2+VueRouter2+webpack+Axios 构建项目实战(七)重构API文件为使用axios前言我们在前面的教程Vue2+VueRouter2+webpack 构建项目实战(四)接通a...
  • FungLeo
  • FungLeo
  • 2017-05-10 17:55
  • 3933

Vue2+VueRouter2+webpack 构建项目实战(五)配置子路由

Vue2+VueRouter2+webpack 构建项目实战(五)配置子路由前情回顾《Vue2+VueRouter2+webpack 构建项目实战(一)准备工作》《Vue2+VueRouter2+we...
  • FungLeo
  • FungLeo
  • 2016-11-18 10:14
  • 20027

Vue2+VueRouter2+webpack 构建项目实战(一)准备工作

Vue2+VueRouter2+webpack 构建项目实战(一)准备工作之前写的博客没有采用打包工具,而是直接引用js的方式来做的。这种方式很扯淡,也因此,我写了三篇博客之后就没有再写了。通过几个月...
  • FungLeo
  • FungLeo
  • 2016-11-15 14:43
  • 41368

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述

前言 2016年,我写了一系列的 VUE 入门教程,当时写这一系列博文的时候,我也只是一个菜鸟,甚至在写的过程中关闭了代码审查,否则通不过校验。 本来写这一系列的博文只是为了给自己看的,但...
  • kchangfu
  • kchangfu
  • 2017-12-02 22:01
  • 95

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述

前言 2016年,我写了一系列的 VUE 入门教程,当时写这一系列博文的时候,我也只是一个菜鸟,甚至在写的过程中关闭了代码审查,否则通不过校验。 本来写这一系列的博文只是为了给自己看的,但没想到的...
  • mck477
  • mck477
  • 2017-11-16 15:24
  • 93

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(九)再把内容页面渲染出来

前情回顾 在上一篇博文《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(八)渲染一个列表出来先》中,我们已经成功的把一个列表给渲染出来了。我们从文章中留下...
  • kchangfu
  • kchangfu
  • 2017-12-02 22:19
  • 106

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十四)在项目中使用 jQuery

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十四)在项目中使用 jQuery前情回顾在上一篇博文中,我们讲到了,如何在 vue 项目中 使用百度的 UEdi...
  • FungLeo
  • FungLeo
  • 2017-09-07 11:32
  • 4257

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(六)将接口用 webpack 代理到本地

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(六)将接口用 webpack 代理到本地前情回顾在上一篇博文《Vue2+VueRouter2+Webpack+A...
  • FungLeo
  • FungLeo
  • 2017-08-26 15:27
  • 10208

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(六)将接口用 webpack 代理到本地

前情回顾 在上一篇博文《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(五)配置 Axios api 接口调用文件》中,我们已经非常顺利的调用到了 cno...
  • kchangfu
  • kchangfu
  • 2017-12-02 22:14
  • 79

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(七)初识 *.vue 文件

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(七)初识 *.vue 文件前情回顾在上一篇文章《Vue2+VueRouter2+Webpack+Axios 构建...
  • FungLeo
  • FungLeo
  • 2017-08-26 16:14
  • 8661
    个人资料
    • 访问:1113745次
    • 积分:12072
    • 等级:
    • 排名:第1440名
    • 原创:213篇
    • 转载:39篇
    • 译文:1篇
    • 评论:841条
    站内搜索
    博客专栏
    文章分类
    友情链接
    最新评论