vue全局组件引用示例

1.在开始引用之前需要安装node.js，并保证已经可以使用vue命令，然后才能开始下面的操作步骤，目录结构为：

src下面的目录结构为：

它的默认加载顺序是index.html-->main.js-->App.vue

1.首先需要在components下面新增一个Users.vue，格式如下：

<template>
  <div class="users">
     <ul>
	   <li v-for="user in users">
	      {{user}}
	   </li>
	 </ul>
  </div>
</template>

<script>
export default {
  name: 'users',
  data () {
    return {
      users: ["mischen","luke","jack"]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

2.在main.js里面添加注册全局组件信息：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import Users from './components/Users'

Vue.config.productionTip = false

//全局注册组件
Vue.component("users",Users);

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

注册全局组件主要需要两个命令，一个是import Users from './components/Users'引入组件，一个是Vue.component("users",Users);注册组件，

3.最后在App.vue里面调用全局组件即可，代码如下：

<template>
  <div id="app">
     <h1>{{title}}</h1>
	 <users></users>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
     return {
	    title:"this is my first vue.js dffgb脚手架！"
	 }
  }
}
</script>

<style>

</style>