第一个单页面应用

初始化项目

vue-init webpack-simple my-project  //my-project为项目名

// 此处选择no
Use sass? No
 
// 依次执行如下代码
 To get started:
     cd 001-my-project
     npm install
     npm run dev

出现下图表示，脚手架初步完成

安装vue-router

npm install vue-router --save

写逻辑代码

目录结构

修改main.js

import Vue from 'vue'
import App from './App.vue'

// 引入router
import router from './routers/index'

new Vue({
  el: '#app',
  router, //挂载router
  render: h => h(App)
})

新增router文件夹

说明：在src下自行创建routers/index.js文件

暴露router

说明：由于在main.js文件中引入了router,因此必须在这里导出router

// 引入vue和vue-router的包
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);
// 引入用户组件，下面步骤创建
import Home from '../components/Home/Home'
import Course from '../components/Course/Course'

const router = new VueRouter({
  routes:[
    {
      name:'home',
      path:'/Home',
      component:Home
    },
    {
      name:'course',
      path:'/Course',
      component:Course
    },
  ]
})
// 导出router
export default router;

新建components文件夹

说明：此文件夹存放所有的组件

Home.vue代码

<template>
  <div>我是首页</div>
</template>
<script>
  export default {
    name:'Home',
    data(){
      return{
        
      }
    }
  }
</script>
<style>
</style>

Course.vue代码

<template>
  <div>我是免费课程</div>
</template>
<script>
  export default {
    name:'Course',
    data(){
      return{
        
      }
    }
  }
</script>
<style>
</style>

修改App.vue文件

说明：在App.vue文件中添加如下内容

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>

    <router-link :to="{name:'Home'}">首页</router-link>
    <router-link :to="{name:'Course'}">免费课程</router-link>

    <!-- 路由匹配到的组件将显示在这里 -->
    <router-view></router-view>
  </div>
</template>

启动项目