Vue2+VueRouter2+webpack 构建项目实战(三)配置路由,整俩页面先(上)

Vue2+VueRouter2+webpack 构建项目实战(三)配置路由,整俩页面先

目录索引

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

《Vue2+VueRouter2+webpack 构建项目实战(二)目录以及文件结构》

《Vue2+VueRouter2+webpack 构建项目实战(三)配置路由,整俩页面先》

《Vue2+VueRouter2+webpack 构建项目实战(四)接通api,先渲染个列表》

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

《Vue2+VueRouter2+webpack 构建项目实战(六)修复代码并通过验证,另发布代码》

制作模板文件

通过前面的两篇博文的学习,我们已经建立好了一个项目。问题是,我们还没有开始制作页面。下面,我们要来做页面了。

我们还是利用 http://cnodejs.org/api 这里公开的api来做项目。不过本章节不涉及调用接口等内容。这里,我们假设我们的项目是做俩页面,一个列表页面,一个内容页面。列表页面有分页等,内容页面展示。

因此,我们需要两个模板文件。

我们在src/page目录下面新建两个文件,分别是index.vuecontent.vue

代码分别是

//index.vue
<template>
  <div>index</div>
</template>

//content.vue
<template>
  <div>content</div>
</template>
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

这里,我们只要先把基础的内容写好就是了。我就用两个单词代表我们的页面。

安装VueRouter2

接下来,我们需要安装VueRouter2到我们的项目。参考文档见VueRouter2安装文档

在终端中,我们把当前目录跳转到我们的项目,然后执行npm install vue-router -D命令。如下:

cd ~/Sites/MyWork/vuedemo
npm install vue-router -D
 
 
  • 1
  • 2
  • 1
  • 2

我们查阅文档,会知道,命令是npm install vue-router,那为什么我后面加一个-D的参数呢?这个是为了让我们的安装的vue-router这个插件写入到package.json配置文件中。以便于下次再其他地方安装的时候,可以一并安装进去,否则,还得再安装一遍。

配置 main.js

通过在终端中执行命令,我们已经安装好路由了。下面,我们需要在src/main.js文件中进行配置。 
整理代码如下:

// 引用 vue 没什么要说的
import Vue from 'vue'
// 引用路由
import VueRouter from 'vue-router'
// 光引用不成,还得使用
Vue.use(VueRouter)
// 入口文件为 src/App.vue 文件 所以要引用
import App from './App.vue'
// 引用路由配置文件
import routes from './config/routes'
// 使用配置文件规则
const router = new VueRouter({
  routes
})
// 跑起来吧
new Vue({
  router,
  el: '#app',
  render: (h) => h(App)
})
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

上面的配置文件中的一部分在官方文档里面也找不到,这是我整理出来的,不用管,全部复制过去吧!

配置 App.vue

入口文件肯定和默认的不一样,我的配置文件如下:

<template>
  <div>
    <router-view
      class="view"
      keep-alive
      transition
      transition-mode="out-in">
    </router-view>
  </div>
</template>

<script>
export default {
  components: {}
}
</script>

<style lang="scss">
  @import "./style/style";
</style>
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

就只是一个单纯的路由入口页面。比较特殊的是,下面我 import了一个scss文件。我喜欢把css独立出来,而不是写在一起,所以我之前在src目录下面建立了一个style的文件,里面放scss文件。

我建议你先跟着我走,回头自己根据自己的习惯调整。

注:这里 引入的scss  按前两个来,有点问题,应该改为@import"./style/scss/style";

配置 routes.js

下面我们配置路由文件。

// 引用模板
import index from '../page/index.vue'
import content from '../page/content.vue'
// 配置路由
export default [
  {
    path: '/',
    component: index
  },
  {
    path: '/content',
    component: content
  },
]
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

如上,我们引用模板,然后再配置路由,这里,我们没有涉及自路由的内容,我们先这样配置上。然后,我们就可以在终端里面输入 npm run dev 来看我们做的效果了。

配置运行端口

如果没有跑起来,提示下面的错误,就表明默认的端口8080被占用了。一般不会被占用,但是也有可能被占用。所以,我们这边来学习一下如何配置运行端口。

# 端口被占用的提示
Error: listen EADDRINUSE :::8080
    at Object.exports._errnoException (util.js:953:11)
    at exports._exceptionWithHostPort (util.js:976:20)
    at Server._listen2 (net.js:1253:14)
......
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

打开项目根目录下/config/index.js配置文件,找到

dev: {
  env: require('./dev.env'),
  port: 8080,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {},
  // CSS Sourcemaps off by default because relative paths are "buggy"
  // with this option, according to the CSS-Loader README
  // (https://github.com/webpack/css-loader#sourcemaps)
  // In our experience, they generally work as expected,
  // just be aware of this issue when enabling this option.
  cssSourceMap: false
}
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

如上,把 port 后面的端口改成其他数字,如9000 即可。




  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值