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

目录

• 定义.vue文件
• 引用.vue文件
• 使用render函数
• 什么是.vue文件，它的作用是什么

需要安装vue-loader

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

然后在配置文件中新增匹配规则

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

定义.vue文件

引用.vue文件

在.js文件中应用

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

使用render函数

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

render的简写：

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

页面就会把该Vue实例用.vue文件写的组件覆盖

更加方便vue的组件化开发 

什么是.vue文件，它的作用是什么

.vue文件就是一个（或局部）组件，又或者说是一个对象在导出时。

在Vue.createApp({ app }) app是一个.vue文件，里面包括 三个部分template 和 js css。

然后再对比下面图片，是不是很像，下面一个注册一个组件需要 template js，所以说，.vue文件就是一个组件，或者一个对象。

这里引用一个 vue官方的全局组件实例来说明

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。