Vue.js（7）- 自定义组件

增加loader

　　webpack只能识别.js结尾的文件，这时就需要增加loader

1. 运行npm i vue-loader vue-template-compiler -D

2. 在webpack.config.js添加rules匹配规则：

{ test: /\.vue$/, use: 'vue-loader' }

　　3. 在webpack.config.js中导入并配置插件：

// 导入插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
// new 一个插件的实例对象
const vuePlugin = new VueLoaderPlugin()

// 把 new 出来的插件实例对象，挂载到 `plugins` 节点中：
plugins: [...其它插件, vuePlugin]

自定义全局组件

01.vue文件

<template>
  <h1>01.vue文件</h1>
</template>

<script>
export default {
  
}
</script>

<style>

</style>

index.js

// 导入自定义组件模板
import nothing from './01.vue'
// 把 .vue 文件注册为全局组件
Vue.component('nothing',nothing)

index.html以标签的方法使用组件

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

自定义私有组件

01.vue 同上

扫描二维码关注公众号，回复： 4083051 查看本文章

index.js

// 导入vue
import Vue from 'vue/dist/vue.js'
// 导入自定义组件模板
import nothing from './01.vue'


const vm = new Vue({
  el: '#app',
  components: {
    "nothing": nothing
  },
  data: {
    flag: false,
    msg: 'Vue in webpack'
  },
})

index.html以标签的方法使用组件,同上