vue3 0元件開發並發布npm

本文基於vue3.0進行元件開發並發布。

cmd 中 vue create plugin-test 進行建立

建立目錄plugin使用者存放元件，新建plugintest檔案用於存放plugintest外掛程式，資料夾中包含兩個檔案：

// 為元件提供 install 安裝方法，供按需引入

import plugintest from './plugintest.vue'
;plugintest.install = vue =
> vue.component(plugintest.name,plugintest)
export default plugintest

hello 

}export default 
}, props:
}

//匯入元件

import plugintest from './components/plugintest/index'
;//存在所有元件
const components =
[plugintest]
// 定義 install 方法，接收 vue 作為引數。如果使用 use 註冊外掛程式，則所有的元件都將被註冊
const install
=function
(vue, opts =))
// 判斷是否是直接引入檔案
if(typeof window !=
'undefined'
&& window.vue)
}export default 

"hello"

>
"quentin"
>
import vue from 'vue'
//匯入元件
import plugintest from '../plugin/plugintest/index'
;//使用元件
在package.json中一條命令 npm run lib
"lib"

:"vue-cli-service build --target lib --name plugintest --dest lib src/index.js"
npm run lib ，會在lib下生成對應檔案

1，註冊npm賬號
2，登入npm
3，進行npm publish
 
Vue 3 0元件庫初始化
該專案使用rollup.js進行打包 新建乙個空資料夾後，進入進行專案初始化 npm init y全域性安裝rollup.js npm i rollup g建立.babelrc 檔案後 安裝 babel preset env package.json檔案 keywords author 奕初 lic...
封裝vue元件並發布到npm上
1.使用webpack 模板建立乙個vue專案，命令 vue init webpack kingtreebtn 新建專案目錄如下 2.在src目錄下新建lib目錄存放元件原始碼 3.元件封裝完後新建元件出口檔案index.js，檔案內容如下 4.修改package.json檔案 5.修改webpac...
vue 3 0 元件之間的方法的相互呼叫
給子元件新增 ref 屬性 通過 this.refs.屬性名.子元件的函式名 即可觸發子元件的函式 子元件通過 this.emit 函式名,引數 觸發父元件的方法。子元件1中父元件的方法 this.emit 函式名,引數 通過父元件去觸發子元件2的方法 參考 父元件呼叫子元件的方法 示例 如下 父元...