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>