协调写的vue组件怎么才能让别的人引用呢,只怕是共用组件怎么着让别的品种引用。本文就粗细的牵线下,如有疑问欢迎共同钻探。在这边你能精通下如下知识点:

  1. 哪些揭橥三个包到npmjs仓库上

2.什么样引用三个npm包,尤其是地点引用

3.vue组件的三种引用方案

壹 、公布三个包到npm的步子

  • 在npmjs.org上登记贰个账号
  • 接下来进入命令提醒窗口输入:
    1. npm adduser: 进入增加用户
    2. Username your name: 设置用户名
    3. Password your password: 设置密码
    4. Email youremail:设置邮箱

图片 1

报到消息都保留在用户目录下的.npmrc文件中(以token的主意保存)

  • npm publish:发布包

推行npm publish那前,请切换成要求发包的花色根目录下。

图片 2

  • npm unpublish –force:移除一个发表包(也得以移除钦赐版本的包)
  • 注意:
    • 发包前必供给在npmjs上登记一个账号
    • 每一次发布的时候都亟需重新更新版本
    • 也能够用npm logout登出用户,用npm login登录用户

图片 3

② 、build格局引用vue组件

示范使用的是地点安装三个npm包。因为把包公布到npmjs,然后再npm到花色中太过费力(由于大家要做来回调整和测试)。达成vue组件三步骤:

1. 配置组件(被引用的机件),能够简单

  • 布署package.json,首借使扩展main节点

    “main”: “index.js”

主是main的这么些节点,假诺不配备,大家在其余门类中就无须import XX from '包名'来引用了,只可以以包名作为源点来钦命相对的门径。

  • 导出可供外部访问的机件

    import VueTree from ‘./components/Hello’
    module.exports = {

    VueTree
    

    }

重中之重是导出能够让外部访问的机件,那里没有从来导出main.js,是因为我们所急需的是一些子组件,而根组件(因为她存在直接挂载到dom上的操作)。

  • 编写打包改成1个零件的本子

    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)
    })

此种打包方式会将此组件的具备引用打包成1个文件,照旧存在不制造的情景。

  • 扭转让承包通过上述五个步骤的布署,只须求周转打包成组件的剧本就足以变动揭橥包了。

贰 、本地如何引用npm包(安装发表好的包)

用命令情势进入支付项目文件夹,用命令安装包。npm install –save 本地路径 
即可。

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

③ 、依照包名直接固定组件

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <hello></hello>
    <VueTree></VueTree>
  </div>
</template>

<script>
import Hello from './components/Hello'
import {VueTree} from 'vue-tree/dist/vue-tree-common' //重点

export default {
  name: 'app',
  components: {
    Hello,  
    VueTree
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

那里小编用的是import {VueTree} from 'vue-tree/dist/vue-tree-common那种艺术引入的包,因为在原到用的package.json中main节点配置的index.js。

三 、更为直白的引用vue组件

  1. 咱们还供给npm本地安装也许再次出现安装;
  2. 依照如下图所示引用:

图片 4

四、总结

  1. vue的版本须求一致,假若不同需求调整。
  2. vue的两种包装格局:UMD、common、esm。
  3. vue分为一些和成就打包,分化正是template的支撑。
  4. vue组件样式存在图片的引用时,请使用单独的样式引入,因为零部件的引入是不带图片的。
  5. “build方式引用vue组件”此办法得以把组件打成不相同的包,方便分歧标准引用。

相关文章

网站地图xml地图