我们来举一个例子
    以上是一个完整的例子，我们想做一个url管理系统

    index.html

    1. <!DOCTYPE html>
    2. <html lang="">
    4.   <head>
    5.     <meta charset="utf-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width,initial-scale=1.0">
    8.     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    9.     <title><%= htmlWebpackPlugin.options.title %></title>
    10.   </head>
    12.   <body>
    13.     <div id="app"></div>
    14.   </body>
    17. </html>

    main.js
    入口文件

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

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

    App.Vue

    <template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <OpUrl>

    </OpUrl>
  </div>
</template>

<script>

import OpUrl from "@/components/OpUrl";
export default {
  name: 'App',
  components: {
    OpUrl,
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

    components下的OpenUrl.vue

    <template>
  <div>
    <li v-for="(item,index) in myurl">
      <button @click="openurl(item)"> {{ item.label }} </button>
    </li>
  </div>
</template>

<script>
export default {
  name: "OpUrl",
  data() {
    return {
      myurl: [
        {label: "uat-jenkins", url: "http://1.1.1.1:8080/login"},
        {label: "bj-jenkins", url: "http://2.2.2.2:18080/login?"},
      ]
    }
  },
  methods:{
    openurl(item){
      //  window.location.href = item.url
      window.open(item.url)
    }
  },
}
</script>

<style scoped>

</style>

    那么入口文件main.js中
    import Vue from ‘vue’
    import App from ‘./App.vue’

    Vue.config.productionTip = false

    new Vue({
    render: h => h(App),
    }).$mount(‘#app’)

    render 是什么意思呢？
    1.首先脚手架的时候要使用render来解析模版
    2.render是一个函数，用来解释模版

    我们回到最初始的时候的html做一个实验
    我们发现rander可以替换html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<script type="text/javascript" src="./vue.js"> </script>
<div id="app" >

</div>

<script type="text/javascript">
    // 创建一个student组件
    new Vue({
        el:"#app",
        data:{
            mydata :"mydata",
        },

        render(h){
            return h('h1',"一级标题")

        },

    })

</script>

</body>
</html>

    结果
    image.png