Vue 几种常见开局方式

vue的开局方式五花八门，这里列几种常见的。

我们先建立一个app.vue来当入口文件，即所有页面都会以这个组件为模板。

<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>

方式1：

模板文件：

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

main.js入口文件：

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

这种写法就是完全把App当成一个组件使用，所以我们要在模板里添加 <App></App>

方式2：

模板文件：

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

main.js入口文件：

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

这种写法就也是完全把App当成一个组件使用，不过模板直接写在了 template 选项里

转载于:https://www.cnblogs.com/wujiaqi/p/8018110.html