console 命令行工具 X clear
console
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<div id="app">
    <!-- <el-button @click="visible = true">Button</el-button>
    
    <el-dialog :visible.sync="visible" title="Hello world">
        <p>Try Element</p>
    </el-dialog> -->

    <router-link to="/home">主页按钮</router-link>
    <router-link to="/news">新闻按钮</router-link>
    <el-button @click="add">add</el-button>{{this.$store.state.count}}
    <router-view></router-view>
</div>

<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/vue-router@3.0.2/dist/vue-router.js"></script>
<script src="https://unpkg.com/vuex@3.1.0/dist/vuex.js"></script>
<script>
var home = {
	template: "<h2>这里是zhuye 部分</h2>"
}

var news = {
	template: "<h2>这里是新闻部分</h2>"
}

var routes = [
	{path: "/home", component: home},
	{path: "/news", component: news},
	{path: "/", redirect: "/home"}
]

var router = new VueRouter({
	routes
})

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state){
            state.count++
        }
    }
})

new Vue({
    el: '#app',
    data() {
    return { visible: false }
    },
    methods: {
        add() {
            this.$store.commit("increment")
        }
    },
    router,
    store
})
</script>