Vue2几种常见开局方式详解

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

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 template: '<App/>',
 components: { App }
})

<template>
 <div id="app">
  <img src="./assets/logo.png">
  <hello></hello>
  <!-- 这里还可以写点其他组件, 或者路由也可以 <router-view></router-view> -->
 </div>
</template>
<script>
import Hello from './components/Hello'
export default {
 name: 'app',
 components: {
  Hello
 }
}
</script>
<style>
</style>

<div id="app"></div>

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

render: funciton(creatElment) {
  return creatElment(App)
}

<div id="app"></div>

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

<div id="app"></div>

import App from './app.vue'
new Vue({
 el: '#app',
 ...App
})

{
  "presets": ["es2015", "stage-2"]
}

<div id="app">
  <App></App>
</div>

import App from './app.vue'
new Vue({
 el: '#app',
 components: {
   App
 }
})

module.exports = {
 resolve: {
  alias: {
   'vue$': 'vue/dist/vue.common.js'
  }
 }
}

<div id="app"></div> 

import App from './app.vue'
new Vue({
 el: '#app',
 template: '<App/>',
 components: {
   App
 }
})

module.exports = {
 resolve: {
  alias: {
   'vue$': 'vue/dist/vue.common.js'
  }
 }
}