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

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

为了将我们的vue组件封装成npm包的方式，我们有几种方式来实现。

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组件文件，开始组件的编写。

• 接下来就是要实现我们前面说的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做一下简单的配置，确保用户安装后访问到我们的插件依赖的时候，对应的入口是正确的：

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

npm run build

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

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

后面再统一介绍npm发布的流程，如果我们的插件包已经发布到npm仓库上的话，我们就可以在其他的项目中进行安装使用了：

npm install vue-basetagimport BaseTag from "./vue-basetag"Vue.use(BaseTag)

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文件

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

npm包发布

为了让你前面封装打包好的包让别的用户能快速地安装使用，你需要将你的包发布到npm仓库。你可以通过以下几步将你的包快速发布到npm仓库：

1. 到https://www.npmjs.com/ 平台注册一个你的npm账号。

2. 登录发布：

npm logincd myprojectnpm publish

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

调用

前面的工作完成后，你在你的工作项目中就能正常地通过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"

这样你就不用每次都先将包发布出去，再安装下来调试了。 以上就是将你自己开发的vue组件，通过npm包的方式发布到npm仓库，让别人能快速引用的步骤方法总结，希望对你的工作有点帮助！