bootstrap的ace模板 vue的初步使用

2021-10-20 03:07:42 字數 902 閱讀 6764

簡單來說,就是ace模板,我們如果有看中的頁面,那麼,可以直接把對應的html**copy過來。

但是,copy的時候,要注意將css和js**放到特定的位置,不然就無法重現ace模板原本的樣子了。

那麼,下面就開始介紹一下怎麼個科學copy方法吧。

找到ace的login頁面,將< head>內引入的第三方的css和js檔案之類的,放到vue的index.html的< head>內。這是因為,vue都是通過元件替換index的div**塊,如下:

來實現頁面的跳轉之類的。

所以,後面開發的所有的頁面其實都共享乙個head頭部,因此,你如果要把ace的標頭檔案放好,就放到這個位置就沒錯了。

2. 找到vue生成檔案的base_url,然後將ace原本的依賴路徑修改為baseurl下的路徑。即將原本ace的依賴路徑改為你的專案的正確路徑。base_url在index的標頭檔案裡有:

然後需要修改的地方就是你的index.html,從ace那邊copy過來的第三方依賴。它們最開始的依賴是ace的路徑,現在改為你的路徑,我的專案路徑如下:

3. 將ace想要移入的介面的body內的**都copy到你新建的.vue檔案。

4. 這時候,因為vue是沒有body的(或者說被封裝了),所以,ace的樣式都是繫結在body,這樣會導致你的介面ui很奇怪。這時候可以通過js**直接賦值給body對應的class樣式。如下:

可以直接寫在vue的鉤子函式mounted上,在元件載入時,會自動執行。

到這裡,基本上就完成了ace模板的移植到vue了。

Bootstrap基本的HTML模板

bootstrap 是當下最流行的前端框架 介面工具集 是乙個用於快速開發 web 應用程式和 的前端框架。用於開發響應式布局 移動裝置優先的 web 專案。移動裝置優先 自 bootstrap 3 起,框架包含了貫穿於整個庫的移動裝置優先的樣式。響應式設計 bootstrap 的響應式 css 能...

bootstrap後台管理模板

adminlte演示 gentelella admin演示 vali admin演示 modularadmin演示 metis演示 ace演示 light bootstrap dashboard light bootstrap dashboard是乙個建立在bootstrap3之上的 完全響應的管理...

Bootstrap模板分析 按鈕篇

我們先從最常見也最易學的按鈕開始,選用的是 docs examples theme 模板 主題模板 用瀏覽器開啟可見 其實這張圖已經告訴我們不同樣式的按鈕使用方法了,稍後就能看到。用dw開啟index.html,因為theme示例中包含了按鈕 縮圖 標籤 角標等等的樣式,所以 還是挺長的,為了專注學...