"main": "index.js"

import VueTree from './components/Hello'
module.exports = {
 VueTree
}

var webpack = require('webpack')
var path = require('path')
var vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
 return path.join(__dirname, '..', dir)
}

var opt = {
 entry: {
 'vue-tree-common': './src/comp.js'
 },
 output: {
 path: resolve('dist'),
 filename: '[name].js',
 library: 'vue-tree-common',
 libraryTarget: 'commonjs2' //注意这里，打包的标准
 },
 resolve: {
 extensions: ['.js', '.vue'],
 modules: [
  resolve('src'),
  resolve('node_modules')
 ]
 },
 module: {
 rules: [
  {
  test: /\.vue$/,
  loader: 'vue-loader',
  options: vueLoaderConfig
  },
  {
  test: /\.js$/,
  loader: 'babel-loader',
  include: [resolve('src'), resolve('node_modules')]
  }
 ]
 }
}

var compiler = webpack(opt)
compiler.run(function(err, state) {
 console.log(err)
})

npm install --save D:\MyProject\vue2-tree

<template>
 <div id="app">
 <img src="/UploadFiles/2021-04-02/logo.png">

此处我用的是import {VueTree} from 'vue-tree/dist/vue-tree-common这种方式引入的包，因为在原到用的package.json中main节点配置的index.js。
三、更为直接的引用vue组件

  
我们还需要npm本地安装或者再现安装；
  
按照如下图所示引用：




四、总结



  
vue的版本需要一致，如果不一致需要调整。
  
vue的几种打包方式：UMD、common、esm。
  
vue分为部分和完成打包，区别就是template的支持。
  
vue组件样式存在图片的引用时，请使用单独的样式引入，因为组件的引入是不带图片的。
  
“build方式引用vue组件”此方式可以把组件打成不同的包，方便不同规范引用。

  

本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。