2.單文件組件

1.使用 Vue CLI 構建項目

閱讀 Vue CLI 3 的官方文檔 https://cli.vuejs.org/zh/guide/creating-a-project.html

vue create my-components

2.創建 .vue 文件

將之前的 my-button 組件單獨做一個文件並放入 my-components/src/components 文件夾中

<template>
  <button><slot></slot></button>
</template>

3.在 App.vue 中使用 my-button

將默認的helloworld修改爲my-button

<template>
  <div id="app">
    <my-button>click me</my-button>
  </div>
</template>

<script>
import myButton from './components/my-button.vue'

export default {
  name: 'App',
  components: {
    myButton
  }
}
</script>

4.啓動 vue-cli-service

使用 npm 腳本運行 vue-cli-service

閱讀 Vue CLI 3 的官方文檔 CLI 服務

https://cli.vuejs.org/zh/guide/cli-service.html#%E4%BD%BF%E7%94%A8%E5%91%BD%E4%BB%A4

npm run serve

打開瀏覽器 輸入 http://localhost:8080/ 查看效果