Vue中的.vue文件的使用方式

npm i vue-loader vue-template-complier -D

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

<template>
<!--这里定义html模板-->
</template>

<script>
//这里定义js
//在这里导入文件
import Vue from 'vue'
export default {
    //在这里定义组件的数据和方法
     data(){
        return {
            chart:null
        }
    },
    methods:{        
    }
}
</script>

<!--这里定义样式
    可以使用scoped属性，使得这里的样式只有这个文件中的组件可以使用
-->
<style>
</style>

var vm=new Vue({
    render:function(createElements){
        return createElements(组件名称)
    }
})

render:c=>c(组件名称)

// 创建一个Vue 应用
const app = Vue.createApp({})
// 定义一个名为 button-counter 的新全局组件
app.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button @click="count++">
      You clicked me {{ count }} times.
    </button>`
})