不使用构建工具的vue组件书写方式

将vue组件转换为普通的js文件（IIFE）

先写个简单的,使用ESM方式组织的component

export default {
  data() {
    return { count: 0 }
  },
  template: `<button @click="count++">You clicked me {{ count }} times.</button>`
}

我们把这个组件保存为mycomponent.js

这个组件通过export default方式导出，

使用ESM方式时，导入要使用带有module标记的script，然后通过 import 导入组件

写法是这样的 import 组件名 from xxx.js 组件名是自定义的，导入方式是createApp时，加到 components 属性里，例如 import compoentA from 'mycomponent.js'，使用时，我们想以<my-component />的形式使用，那么createApp就这样写

createApp({
components:{
MyComponent : compoentA
}
})

下面是完整的例子：

<div id="app">
        <div>{{ message }}</div>
        <my-component></my-component>
    </div>
    <script type="module">
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        import MyComponent from '/component/my-component.js'
        var app = createApp({
            components:{MyComponent},
            data () {
                return {
                    message:"Hello Vue"
                }
            }
        });
        app.mount('#app')
    </script>

这样写的组件，是ESM标准的，无法使用<script src='...' />这种方式使用，如果想转换成IIFE方式，那么就把他直接复制给一个变量即可，如下：

var MyComponent = (function () {
    return {
        data() {
            return {count: 0}
        },
        template: `<button @click="count++">You clicked me {{ count }} times.</button>`
    }
})()

这样就可以直接使用了

<div id="app">
<my-component></my-component>
</div>
<script src="/component/my-component.js"></script>
<script>
var app = Vue.createApp({ data () {return {message:'helloword'}}})
//重点是下面这行
app.component('MyComponent',MyComponent);
app.mount("#app")
</script>

不用构建工具，使用原生的js也可以使用组件。