.vue 文件

.js 组件

跟常规的 .vue 组件没什么区别，就是个对象，样式 import 引入就好

上边的 MyLogo 对象，其实就是平常 .vue 汇总的 export default 对象

为什么有 .vue 文件

为了将上边 index.js 、index.scss 整合到一个文件里（.vue）边去。

• 分为

  • template
  • script
  • style

• 浏览器没法解析这种文件

• 让 vue-loader 去识别最后打包成类似上边 MyLogo/index.js 的文件

• 倒入时无需写 .vue 后缀

• vue-loader 解析 .vue 文件

• vue-style-loader 解析 css

全局组件

var app = new Vue({});

app.component('my-search', {
	data() {
  	return {
    	placeholder: 'Please type the keyword...',
      keyword: ''
    }
  },
  template: `
		<div style="float: left;">
			<input
				type="text"
				:placeholder="placeholder"
				v-model="keyword" />
			<button @click="searchAction">Search</button>
		</div>
	`,
  methods: {
  	searchAction() {
    	console.log(this.keyword);
    }
  }
});

注册后就不用在各文件中注册了