Vue中的.vue文件的使用

需要安装vue-loader
npm i vue-loader vue-template-complier -D
然后在配置文件中新增匹配规则
{test:/\.vue$/,use:'vue-loader'}

1. 定义.vue文件

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

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

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

</style>

2. 引用.vue文件

在.js文件中应用

import 组件名称 from '.vue文件的路径'

3. 使用render函数

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

render的简写：

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

页面就会把该Vue实例用.vue文件写的组件覆盖
更加方便vue的组件化开发