Webpack

webpack是项目自动化工具
webpack.config.js是webpack配置文件

entry:'./src/main.js',
output: {
    path: path.resolve(__dirname,'./dist'),
    publicPath:'/dist/',
    filename:'build.js'
}

entry：指定了程序的入口文件，告诉webpack源文件在哪里。
output:指定了程序的输出文件，告诉webpack把文件解析后，放到哪里，以及名字叫什么

module : {
    rules: [
        {
            test:/\.vue$/,
            oader:'vue-loader',
            options: {// vue-loader options go here}
        },
        {
            test:/\.js$/,
            loader:'babel-loader',
            exclude:/node_modules/
        },
        ...
    ]
}

插件集对 test匹配的文件做批处理
include 表示需要插件处理的目录
exclude 表示不需要插件处理的目录

vue-router

npm isntall vue-router --save-dev
安装vue-router

Vue.js 添加链接

<div class="row">
    <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
            <router-link class="list-group-item" to="/Home">Home</router-link>
            <router-link class="list-group-item" to="/About">About</router-link>
            <router-link class="list-group-item" to="/Hello">Hello</router-link>
        </div>
    </div>
    <div class="col-xs-6">
        <div class="panel">
             <div class="panel-body">
                 <router-view></router-view>
             </div>
        </div>
    </div>

在src文件目录下创建route.js

import Vue from 'vue'
import VueRouter from "vue-router"
import Hello from './component/Hello.vue'
import Home from './component/Home.vue'
import About from './component/About.vue'
Vue.use(VueRouter)
const routes = [
{
  path: '/Hello',
  component: Hello
},{
  path: '/Home',
  component: Home
},{
  path: '/About',
  component: About
}];
const router = new VueRouter({
    routes // （缩写）相当于 routes: routes
})
export default router

main.js引入route.js

import Vue from 'vue'
import router from './route'
new Vue({
    el: '#app',
    router,
    render: h => h(App),
})

创建Hello.vue,About.vue,Home.vue

<template>
    <div id="app">
        <h2>Hello<h2>
    </div>
</template>

运行vue-route起效