基于webpack创建项目脚手架,项目名project

第一步：构建脚手架

cd my-app

npm run dev

config/index.js文件:

port: 8080,  //修改端口号

autoOpenBrowser: false, //自动打开浏览器

第二步：开发

①src/components/module文件夹下创建四个组件文件：

Find.vue Home.vue Order.vue My.vue

<template>
  <div>订单</div>
</template>
<script>
export default {
  data () {
    return {}
  },
  activated () {},
  watch: {},
  created () {},
  mounted () {},
  methods: {}
}
</script>
<style scoped>
</style>

②App.vue

<template>
  <div id="app">
    <!-- 路由的出口：路由匹配夫人组件将在这里渲染 -->
    <router-view/>
    <NavBottom/>
  </div>
</template>

<script>
import NavBottom from './components/NavBottom'
export default {
  name: 'App',
  components: {
    NavBottom
  }
}
</script>

 ③src/components/NavBottom.vue文件

<template>
  <div>
    <router-link to="/home">首页</router-link>
    <router-link to="/find">发现</router-link>
    <router-link to="/order">订单</router-link>
    <router-link to="/my">我的</router-link>
  </div>
</template>
<script>
export default {
  data () {
    return {
      name: '发现' // 默认项目首页为发现页面
    }
  },
  activated () {},
  watch: {},
  created () {},
  mounted () {},
  methods: {}
}
</script>
<style scoped>
.active{    //路由样式
    color: red;
}
</style>

④router/index.js文件

import Vue from 'vue'
import Router from 'vue-router'
import Order from '@/components/module/Order'
import Find from '@/components/module/Find'
import Home from '@/components/module/Home'
import My from '@/components/module/My'

Vue.use(Router)
export default new Router({
  linkActiveClass: 'active',
  routes: [
    {
      path: '/home',
      component: Home
    },
    {
      path: '/find',
      component: Find
    },
    {
      path: '/my',
      component: My
    },
    {
      path: '/order',
      component: Order
    }
  ]
})

页面显示：