vue 自定義元件 的封裝 上傳 使用

2021-09-19 18:58:26 字數 1105 閱讀 4069

1、建立乙個資料夾xxplugin，並初始化專案

npm init -y
2、定義乙個單檔案元件 實現某些功能例如：loading.vue，swiper.vue

yarn add swiper -s

>


>


div>


template


>


....


>


import swiper from


'swiper'


export


default


script


>
3、在xxplugin根目錄建立有乙個index.js檔案，在這個檔案中使用install方法來全域性註冊該元件，並將其暴露

import vue from


'vue'


import loadingtpl from


'./components/loading'


import bannertpl from


'./components/banner'


export


const loading=


}export


const loading=


}
4、在main.js中引入並使用

import


from


'./xxplugin'


vue.


use(loading)
5、即可在vue全域性中使用

6、上傳至npm.js,登入，並上傳，注意上傳前將node_modules檔案刪除

npm adduser
npm publish
yarn  add xxplugin -d
8、修改主入口檔案main.js外掛程式的引入路徑

import


from


'xxplugin'


vue.


use(loading)

vue自定義封裝Loading元件

一 需求問題 在vue專案的開發中，會經常遇到這樣的需求。當在頁面內容進行載入的時候，會進行請求資料，然後顯示頁面。在這個等待的過程中，會出現一段時間的白屏，我們可以通過加乙個loading的效果，進行過渡，然後顯示頁面。二 需求分析 在components資料夾中，建立loading資料夾，裡面建...

vue 使用自定義元件

新建專案，ctrl r進入cmd，切換至工作目錄 c users asus f f cd study f study cd vue f study vue cd demo 安裝 vue cli npm install g vue cli?target directory exists.continu...

vue自定義元件的使用

新建乙個定義元件的js配置檔案 引入元件模組 import submit from submit 確認提交按鈕 import addimg from addimg 新增 import selectgroup from selectgroup 請假 import ordinarybtn from or...