欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue 封裝 Adminlte3組件的實現(xiàn)

 更新時間：2020年03月18日 08:37:49   作者：nejinn  
這篇文章主要介紹了vue 封裝 Adminlte3組件的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

之前找了一下vue關于adminlte3的組件庫，github大部分都是2的。比較老了，都是幾年前更新的。有adminlte3的，但是都只封裝了一兩個組件，而且居然還引入jq，然后一股腦把adminlte3的html代碼復制進去，這樣就成了一個組件。感覺沒啥用。感覺是那些作者在練手。

vue引入jq我覺得真的沒必要，會產(chǎn)生很多bug，可能可以解決，但是我之前遇到過引入jq出現(xiàn)單頁面進入之后jq沒法掛載，要刷新才能掛載的情況，一直沒解決。所有我打算自己封裝一個vue版本的adminlte3.
目前已經(jīng)封裝了快30個組件了。npm版本到0.1.8了。

github 地址nly-adminlte-vue

目前完成事情

組件

  • 皮膚 theme
  • 折疊板 collapse
  • 導航欄 navbar
  • 導航 nav
  • 柵格布局 grid row col
  • 容器 container
  • 正文容器 content
  • 包裝容器 wrapper
  • 文字路由 link
  • 按鈕 button
  • 開關 switch
  • 卡片 card
  • 小標簽 badge
  • 下拉菜單 dropdown
  • 圖標 icon
  • 右側收縮板 control-sidebar
  • 罩層 overlay
  • 彈框消息 toast
  • 旋轉loading spinner
  • 進度條 progress
  • 時間軸 timeline
  • 面包屑導航 breadcrumb

指令

  • 左側導航欄收起指令 v-nly-sidebar-collapse
  • 右側收縮版收起指令 v-nly-control-sidebar-collapse
  • 卡片最大化指令 v-nly-card-maximized
  • 折疊版收起展開指令 v-nly-toggle

使用github下載項目

git clone https://github.com/nejinn/nly-adminlte-vue.git

npm install 

npm run server

// 查看example，所有組件demo都在這里
http://localhost:8080

npm下載

npm install nly-adminlte-vue

main.js

import "nly-adminlte-vue/dist/adminlte/css/adminlte.css";
import "nly-adminlte-vue/dist/adminlte/fontawesome-free/css/all.css";
import "nly-adminlte-vue/dist/adminlte/icon/iconfont.css";
import "nly-adminlte-vue/dist/nly-adminlte-vue.css";
import { NlyAdminlteVue } from "nly-adminlte-vue";
Vue.use(NlyAdminlteVue);

到此這篇關于vue 封裝 Adminlte3組件的實現(xiàn)的文章就介紹到這了,更多相關vue 封裝Adminlte3 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

  • Vue中div contenteditable 的光標定位方法

    Vue中div contenteditable 的光標定位方法

    今天小編就為大家分享一篇Vue中div contenteditable 的光標定位方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • vue3?reactive響應式依賴收集派發(fā)更新原理解析

    vue3?reactive響應式依賴收集派發(fā)更新原理解析

    這篇文章主要為大家介紹了vue3響應式reactive依賴收集派發(fā)更新原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2023-03-03
  • Vue中進行分布式鑒權與認證的過程

    Vue中進行分布式鑒權與認證的過程

    在Vue應用中，我們通常需要實現(xiàn)分布式鑒權和認證，以確保用戶的安全性和數(shù)據(jù)的保密性，本文將介紹在Vue中如何進行分布式鑒權與認證,需要的朋友可以參考下
    2023-06-06
  • el-input無法輸入的問題和表單驗證失敗問題解決

    el-input無法輸入的問題和表單驗證失敗問題解決

    在做項目的時候發(fā)現(xiàn)一個情況,輸入框無法輸入值并且表單校驗失靈,所以下面這篇文章主要給大家介紹了關于el-input無法輸入的問題和表單驗證失敗問題解決的相關資料,需要的朋友可以參考下
    2023-02-02
  • tdesign vue初始化組件源碼解析

    tdesign vue初始化組件源碼解析

    這篇文章主要為大家介紹了tdesign vue初始化組件源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-12-12
  • vue實現(xiàn)登錄攔截

    vue實現(xiàn)登錄攔截

    這篇文章主要介紹了vue實現(xiàn)登錄攔截，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-06-06
  • vue中的axios配置及接口請求路徑api配置

    vue中的axios配置及接口請求路徑api配置

    這篇文章主要介紹了vue中的axios配置及接口請求路徑api配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-09-09
  • 使用 JSON.stringify() 列化一個Error

    使用 JSON.stringify() 列化一個Error

    這篇文章主要介紹了使用 JSON.stringify() 列化一個Error,需要的朋友可以參考下
    2023-10-10
  • Vue3+TypeScript實現(xiàn)遞歸菜單組件的完整實例

    Vue3+TypeScript實現(xiàn)遞歸菜單組件的完整實例

    Vue.js中的遞歸組件是一個可以調(diào)用自己的組件,遞歸組件一般用于博客上顯示評論,形菜單或者嵌套菜單,文章主要給大家介紹了關于Vue3+TypeScript實現(xiàn)遞歸菜單組件的相關資料,需要的朋友可以參考下
    2021-08-08
  • vue中使用typescript配置步驟

    vue中使用typescript配置步驟

    本文主要介紹了vue中使用typescript配置，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-11-11

最新評論