vue 引用js_手把手教你实现一个vue组件npm包

我们都知道vue的核心为js,所以不管是用库还是组件、插件的方式,最终都是将对应的文件打包成js然后进行npm包封装或者安装调用。

53c66dcda0b34bf574333f7d43d4b593.gif 为了将我们的vue组件封装成npm包的方式,我们有几种方式来实现。 59b2ac04b59ededa563ec433f7334481.png

vue插件

从文档我们可以知道,我们可以用插件的方式来实现一 些什么样的功能,我们如果用过vuex,应该都知道,vue插件的调用方式也非常简单,我们只需要在调用 new Vue() 启动应用之前通过全局方法Vue.use()使用插件就行:
// 调用 `MyPlugin.install(Vue)`Vue.use(MyPlugin, { someOption: true })new Vue({  // ...组件选项})
掌握了vue插件的使用方法,我们可以快速地使用别人开发的插件。而我们又要如何去开发一个自己的插件呢? Vue.js的插件应该暴露一个install  方法,这个方法第一个参数是Vue 构造器,第二个参数为可选项:
MyPlugin.install = function (Vue, options) {  // do something})
结合前面文档建议的插件功能,我们就可以在install方法内去添加实现插件的一些功能了。 所以其实看起来也很简单,我们可以简单地去看一下vue.use( )的源码:
import { toArray } from '../util/index'export function initUse (Vue: GlobalAPI) {  Vue.use = function (plugin: Function | Object) {    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))    if (installedPlugins.indexOf(plugin) > -1) {      return this    }    // additional parameters    const args = toArray(arguments, 1)    args.unshift(this)    if (typeof plugin.install === 'function') {      plugin.install.apply(plugin, args)    } else if (typeof plugin === 'function') {      plugin.apply(null, args)    }    installedPlugins.push(plugin)    return this  }}
其实从源码我们可以知道,其实vue.use( )大概的功能就是取出对应的参数,并调用install的方法,还有一些额外的代码用来确保同一个插件只注册一次,不会重复注册。 这些都是一些偏文档的东西,看起来都非常简单。理论的知识点,最终我们要用实践来验证!
  • 首先,我们用 vue init 脚手架来创建项目

vue init webpack-simple myprojectcd myprojectnpm install
  • 接下来按上面的项目结构,新建对应的vue组件文件,开始组件的编写。

49311d868ffa2de983d4b26732198b8a.png

  • 接下来就是要实现我们前面说的vue插件最关键的install方法的暴露,在上面的项目结构里,我新建了一个lib的文件夹来放我们的组件文件,lib下的index.js用来作为我们的插件的入口文件,所以我们的install方法就在该文件下来实现:

// index.jsimport BaseTag from './BaseTag/BaseTag';const components = [BaseTag];const MyPlugin = {}MyPlugin.install = function (Vue, options) {  components.forEach(component => {    Vue.component(component.name, component);  });}if (typeof window !== 'undefined' && window.Vue) {  window.Vue.use(MyPlugin);}export default MyPlugin;
  • 接下来是对我们项目的webconfig配置做一下简单的配置:

// webpack.config.jsentry: './src/lib/index.js',// 入口output: {    path: path.resolve(__dirname, './dist'),  //打包输出目录    publicPath: '/dist/',   // 静态资源前缀    filename: 'vue-basetag.min.js',    //打包生成文件的名字    library: 'BaseTag',    //umd 打包的时候模块的名字    libraryTarget: 'umd',   //打包方式 amd    umdNamedDefine: true    //打包未定义的时候使用默认名字},
  • 接下来对整个项目的package.json做一下简单的配置,确保用户安装后访问到我们的插件依赖的时候,对应的入口是正确的:

2b3bf6f171b167cbb8ca38c522bc2127.png

这里其实就是在vue init生成的package.json加了一个main的入口,这里对应前面webpack.config.js里output打包生成的文件,以及将private值变更为false。 接下来对我们的插件进行打包:
npm run build

执行完上面的指令后,我们可以在我们的项目中看到打包生成的dist文件夹:

205c69521c41ccebaef5bb9b03ed7601.png

至此,其实我们的插件包就开发完成了。

后面再统一介绍npm发布的流程,如果我们的插件包已经发布到npm仓库上的话,我们就可以在其他的项目中进行安装使用了:
npm install vue-basetagimport BaseTag from "./vue-basetag"Vue.use(BaseTag)
59b2ac04b59ededa563ec433f7334481.png

vue组件 / 库

在vue cli官方文档中,我们可以通过vue cli脚手架 快速构建我们目标 ,我们只需要在运行 vue-cli-service build 时,通过--target  选项来指定不同的构建目标。在这里,我们主要构建库 、 组件的方式来操作。
  • 构建成库

vue-cli-service build --target lib --name myLib [entry]
  • 构建成组件

vue-cli-service build --target wc --name my-element [entry]
这里需要注意的一点是,构建成库的时候,我们的entry入口文件可以是一个.js或.vue文件,而构建成组件,则只能是.vue文件。 还有一个点,就是两种模式下,vue都是外置的,即你的构建包内本身不含vue,你需要在你引用该构建包的项目中引入一个可用的vue。 构建成web components组件模式下,允许使用者以一个普通DOM元素的方式调用这个vue组件:
<script src="https://unpkg.com/vue">script><script src="path/to/my-element.js">script><my-element>my-element>
这种调用方式下,需要注意一点,就是组件所有的属性值,都是html节点元素的属性值,所以没法直接传入引用型的数据,因为传入的属性值都是默认以字符串格式解析了,而不会想vue动态属性那样去解析变量。 这里跟前面插件的构建类似,为了让用户通过npm install我们的包,能正常调用,所以我们需要在package.json入口指向我们构建打包生成的最终js文件

cf78d59850b7f10700a993ebe22a1630.png

67839646705aa5012fdb15b00e97e2a0.png

这样,我们就实现了将我们的组件以库 / web components组件的方式构建打包。 这里可以简单知道一下插件跟组件的关系,vue插件可以在install方法里注册组件,组件可以暴露数据给插件。插件可以是多个组件的集合,最后通过install方法进行多个组件的注册。

59b2ac04b59ededa563ec433f7334481.png

npm包发布

为了让你前面封装打包好的包让别的用户能快速地安装使用,你需要将你的包发布到npm仓库。你可以通过以下几步将你的包快速发布到npm仓库:
  1. 到https://www.npmjs.com/ 平台注册一个你的npm账号。

  2. 登录发布:

npm logincd myprojectnpm publish

这样你就将你的npm包发布到npm仓库了,然后在npmjs.org平台就可以搜索到你刚发布的包了。

59b2ac04b59ededa563ec433f7334481.png

调用

前面的工作完成后,你在你的工作项目中就能正常地通过npm install安装你发布的包来进行调用了,这里需要注意一下的地方就是,前面不同的包对应的vue调用是不一样的。 首先是vue插件包格式,前面已经说过,vue插件,我们需要在new vue()实例前,进行vue.use(myplugin)进行引入后就可以在全局调用了,这个对应最典型的就是vue官方的vuex插件的使用:
import MyPlugin from '../dist/my-input.min.js'Vue.use(MyPlugin);
而库或者web components包格式下,就跟你自己项目内的组件引用一样,直接import进来就可以使用了! 上面的这些都是你将你的npm包发布到npm仓库,然后在项目中通过install的方式进行调用,而你在将你的npm包发布到npm仓库前,你为了进行调试测试,老是要先打包,然后在发布,再install来调试是很不方便的,所以为了对你的npm包在发布前进行测试,你可以直接本地打包,然后安装本地包的方法来调试,等最终测试调试好了后再进行发布到npm仓库:
// npm 包项目cd myprojectnpm pack   // 会在当前目录下打包生成一个 packname.version.tgz格式的包// 工作项目npm install myproject 路径/文件全名import myproject from "../myproject"

3ba5769db9aa707d9789e3839f39c815.png

这样你就不用每次都先将包发布出去,再安装下来调试了。 以上就是将你自己开发的vue组件,通过npm包的方式发布到npm仓库,让别人能快速引用的步骤方法总结,希望对你的工作有点帮助!
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值