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 选项里

巴特西

Vue 几种常见开局方式

最新文章

热门文章