我们都知道vue的核心为js,所以不管是用库还是组件、插件的方式,最终都是将对应的文件打包成js然后进行npm包封装或者安装调用。
![53c66dcda0b34bf574333f7d43d4b593.gif](https://i-blog.csdnimg.cn/blog_migrate/77888b3f3ed81caf6686bd1d34ee8c83.gif)
![59b2ac04b59ededa563ec433f7334481.png](https://i-blog.csdnimg.cn/blog_migrate/b33034dde76f0e0bbc42ec9a2b817a55.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组件文件,开始组件的编写。
接下来就是要实现我们前面说的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做一下简单的配置,确保用户安装后访问到我们的插件依赖的时候,对应的入口是正确的:
npm run build
执行完上面的指令后,我们可以在我们的项目中看到打包生成的dist文件夹:
至此,其实我们的插件包就开发完成了。
后面再统一介绍npm发布的流程,如果我们的插件包已经发布到npm仓库上的话,我们就可以在其他的项目中进行安装使用了:npm install vue-basetagimport BaseTag from "./vue-basetag"Vue.use(BaseTag)
![59b2ac04b59ededa563ec433f7334481.png](https://i-blog.csdnimg.cn/blog_migrate/b33034dde76f0e0bbc42ec9a2b817a55.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文件
![59b2ac04b59ededa563ec433f7334481.png](https://i-blog.csdnimg.cn/blog_migrate/b33034dde76f0e0bbc42ec9a2b817a55.png)
npm包发布
为了让你前面封装打包好的包让别的用户能快速地安装使用,你需要将你的包发布到npm仓库。你可以通过以下几步将你的包快速发布到npm仓库:到https://www.npmjs.com/ 平台注册一个你的npm账号。
登录发布:
npm logincd myprojectnpm publish
这样你就将你的npm包发布到npm仓库了,然后在npmjs.org平台就可以搜索到你刚发布的包了。
![59b2ac04b59ededa563ec433f7334481.png](https://i-blog.csdnimg.cn/blog_migrate/b33034dde76f0e0bbc42ec9a2b817a55.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"