增加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 同上

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以標籤的方法使用元件,同上