【转】VUE 组件注册使用示例

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

import Swiper from './components/01.globalReg/Swiper.vue'
import Test2 from './components/01.globalReg/Test2.vue'

const app = createApp(App)

app.component(Swiper.name,Swiper)
app.component(Test2.name,Test2)

app.mount('#app')

<template>
  <h1>这是 App.vue 根组件</h1>
  <hr />

  <my-swiper></my-swiper>
  <my-test></my-test>
</template>

<template>
    <h3>Swiper 轮播图组件</h3>
</template>

<script>
    export default{
        name:'MySwiper'
    }
</script>

<template>
    <h3>Test 组件</h3>
</template>

<script>
    export default{
        name: "MyTest"
    }
</script>

cnpm run dev

Expected A Javascript Module Script But The Server Responded With A Mime Type Of “text/plain”. Strict Mime Type Checking Is Enforced For Module Scripts Per Html Spec

<template>
  <h1>这是 App.vue 根组件</h1>
  <h3>abc -- {{username}}</h3>

  <hr />

  <my-swiper></my-swiper>
  <my-test></my-test>

  <hr />

  <my-search></my-search>

</template>

<script>

import Search from './components/02.privateReg/Search.vue'

export default {
  name: 'MyApp',
  data(){
    return {
      username: 'zs',
      count: 0
    }
  },
  methods:{
    addCount(){
      this.count += 2
    }
  },
  components: {
    'my-search': Search
  }
} 
</script>