webpack安装以及使用
安装：

npm install webpack webpack-cli -g

新建目录modules,目录下一个模块文件hello.js代码：

exports.helloWorld = function(){
    document.write("<div>Hello,World</div>");
}

另一个主文件main.js代码如下：

var hello = require("./hello.js");
hello.helloWorld();

modules目录外建一个webpack配置文件webpack.config.js代码如下：

module.exports = {
    entry:"./modules/main.js",
    output:{
        filename:"./js/bundle.js"
    },
    watch:false
}

cmd定位到目录，命令webpack，可以看到生成了一个目录dist，文件dist/js/bundle.js，
建一个index.htm，代码：

 <script src="./dist/js/bundle.js"></script>

可以看到内容生效。

路由使用

安装路由依赖：

npm install vue-router@3.4.9 --save-dev

在main.js中，

import Vue from 'vue'
import App from './App'
import router from './router'
import VueRouter from 'vue-router'
//使用vue-router
Vue.use(VueRouter);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

新增目录router，目录下新建一个index.js，

import Vue from 'Vue'
import VueRouter from 'vue-router'
import Content from '../components/Content'
Vue.use(VueRouter)
export default new VueRouter({
    routes:[{
        path:'/content',
        name:'Content',
        component:Content
    }]
})

在App.vue中使用：

<router-link to="/">首页</router-link>
<router-link to="/content">内容页</router-link>
<router-view></router-view>

在目录components新建一个Content.vue，内容：

<template>
    <div>内容2</div>
</template>