您的位置: 首页 > 文章 > webpack中vue组件的识别与应用

webpack中vue组件的识别与应用

分类: 文章 • 2025-03-10 08:13:10

webpack打包无法处理.vue后缀的文件，所以需要先下载

npm i vue-loader vue-template-compiler -d

如果然后安装的vue-loader是15.x.x以上的需要配置webpack.config.js

webpack中vue组件的识别与应用

const VueloaderPlugin=require('vue-loader/lib/plugin')
new VueloaderPlugin()
{test: /\.vue$/, use: 'vue-loader'}

最后在main.js中引入所需的.vue文件，就可以打包执行了

import Vue from 'vue'
import login from './login.vue' //引入的vue组件

var vm=new Vue({
  el:'#app',
  data: {
    msg:123,
  },
  render(creatEle){  //调用render进行页面的渲染
    return creatEle(login)
  }
})