vue封装js方法

① Vue封装组件并发布到npm仓库

使用Vue框架进行开发时，组件封装是一个非常常规的操作。封装好的组件可以在项目的任意地方使用，甚至可以直接从npm仓库下载别人封装好的组件进行使用，比如iview、element-ui等组件库。然而，每个公司的业务场景可能不同，开发人员仍需要封装自己的组件。如果换了新项目，只能复制组件代码到新项目中，这样略显繁琐。其实可以将组件上传到npm仓库，需要时可以直接从npm安装使用。

封装Vue组件的好处主要有两点：

由于此次封装的是Vue组件，因此直接在Vue脚手架项目中进行封装即可。

• 初始化Vue项目


• 运行项目

步骤1：新建package文件夹

• 在src下面新建一个package文件夹，存放所有需要上传的组件。


• 打算封装两个组件：pig-button、pig-input，分别在package文件夹下新建存放两个组件代码的文件夹。

步骤2：编写组件代码

• 以pig-button组件为例，编写代码，然后引用到App.vue组件验证组件可用性。


• 最终效果显示组件可用。

步骤3：使用Vue插件模式

• 封装组件的关键步骤，使用Vue提供的install方法，使得插件在使用Vue.use(plugin)时被调用，实现全局注册。


• 在package目录下新建index.js文件，配置组件的全局注册。

• 完成组件封装后，需要进行打包。


• 修改package.json文件，配置打包命令。


• 执行打包命令，生成打包后的文件。

• 初始化package.json文件。


• 注册npm账号，切换npm源。


• 添加npm用户。


• 在pig-ui目录下执行发布npm命令。


• 发布成功后，可在npm官网查看发布的npm包。

• 执行安装命令。


• 在main.js中引用注册。


• 修改App.vue文件，直接使用组件。

总结起来，Vue组件封装发布到npm仓库的整体难度不大，关键在于理解Vue的install方法以及打包相关知识。最重要的是如何封装一个适用范围广、扩展性高的公用组件。此项目源码已公开。

② 如何在.vue文件中引入外部js

Vue 的 createElement 方法，简单的封装一个组件解决问题。

解决方法
第一版代码（直接在操作 Dom ）如下：
export default {
mounted() {
const s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js';
document.body.appendChild(s);
},
}
使用 createElement 方法：
export default {
components: {
'dingtalk': {
render(createElement) {
return createElement(
'script',
{
attrs: {
type: 'text/javascript',
src: 'https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js',
},
},
);
},
},
},
}
// 使用在页面中调用
终极方案
通过封装一个组件 remote-js 实现：
export default {
components: {
'remote-js': {
render(createElement) {
return createElement('script', { attrs: { type: 'text/javascript', src: this.src }});
},
props: {
src: { type: String, required: true },
},
},
},
}
使用方法：
<remote-js src="https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js">remote-js>