前端框架AdminLTE
1、adminlte 下載地址 ： https://github.com/almasaeed2010/AdminLTE/releases（點擊tar.gz這個比較全 下載zip也行 是個干凈的模板）
2、下載好后，將adminlte中index.html里body部分復制到vue項目中的index.vue(項目主頁)中的template模板中，此時頁面是一團糟，（adminlte，依賴於bootstrap3（4版本有問題），而bootstrap依賴於jquery（1.1+）。所以這兩個依賴一定要提前引入，具體版本，看上述鏈接）
3、將adminlte中dist下的js、css、img復制到vue中的assets中
在main.js中引入
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
//AdminLTE import './assets/css/adminlte/skins/_all-skins.min.css'; import './assets/css/adminlte/AdminLTE.min.css';
import './assets/js/adminlte/adminlte.js';
再看一下，比第一次效果好了許多。
但是圖標都沒顯示出來，因為adminlte用了font-awesome，然后npm 安裝
npm install font-awesome --save
在main.js中引入
//font-awesome
import 'font-awesome/css/font-awesome.min.css'
將圖片的引用路徑對應該一下。。
然后npm run serve啟動一下，ok頁面出來了。。（注意bootstrap要3版本的，不能是4版本的）
我把下載下來的adminlte文件里的index.html里的內容小心翼翼的刪了許多，目的是清出一個干凈的模板，but！！！ 我發現 這個文件里有一個starter.html 是專門的模板 浪費了半天！！！老鐵們 看到這 直接用starter模板就行了 可以省點時間。。。
下邊是我整理出來的一個模板：
<template> <div class="main hold-transition skin-blue sidebar-mini"> <div class="wrapper"> <header class="main-header"> <a href="index2.html" class="logo"> <span style="background:red;" class="logo-mini"><b>A</b>LT</span> <span class="logo-lg"><b>Admin</b>LTE</span> </a> <!-- 頂部導航 --> <nav class="navbar navbar-static-top"> <!-- 側邊欄控制按鈕 三橫杠--> <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button"> <span class="sr-only">Toggle navigation</span> </a> </nav> </header> <!-- 側邊欄 --> <aside class="main-sidebar"> <section class="sidebar"> <!-- 面板 --> <div class="user-panel"> <div class="pull-left image"> <img src="../assets/img/adminlte/user2-160x160.jpg" class="img-circle" alt="User Image"> </div> <div class="pull-left info"> <p>Alexander Pierce</p> <a href="#"><i class="fa fa-circle text-success"></i> Online</a> </div> </div> <!-- 搜索表單 --> <form action="#" method="get" class="sidebar-form"> <div class="input-group"> <input type="text" name="q" class="form-control" placeholder="Search..."> <span class="input-group-btn"> <button type="button" name="search" id="search-btn" class="btn btn-flat"> <i class="fa fa-search"></i> </button> </span> </div> </form> <!-- 側邊欄菜單 --> <ul class="sidebar-menu" data-widget="tree"> <!-- 側邊欄菜單頭部 --> <li class="header">MAIN NAVIGATION</li> <li class="active treeview"> <a href="#"> <i class="fa fa-dashboard"></i> <span>Dashboard</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <ul class="treeview-menu"> <li class="active"> <a href="index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a> </li> <li> <a href="index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a> </li> </ul> </li> <li> <a href="pages/calendar.html"> <i class="fa fa-calendar"></i> <span>Calendar</span> <span class="pull-right-container"> <small class="label pull-right bg-red">3</small> <small class="label pull-right bg-blue">17</small> </span> </a> </li> <li class="treeview"> <a href="#"> <i class="fa fa-share"></i> <span>Multilevel</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <ul class="treeview-menu"> <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li> <li class="treeview"> <a href="#"><i class="fa fa-circle-o"></i> Level One <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <ul class="treeview-menu"> <li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li> <li class="treeview"> <a href="#"><i class="fa fa-circle-o"></i> Level Two <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <ul class="treeview-menu"> <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li> <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li> </ul> </li> </ul> </li> <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li> </ul> </li> <li><a href="https://adminlte.io/docs"><i class="fa fa-book"></i> <span>Documentation</span></a></li> <li class="header">LABELS</li> <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li> </ul> </section> </aside> <div class="content-wrapper" style="background:pink;"> 這是內容顯示區 </div> <footer class="main-footer" style="background:green;"> 底部導航 </footer> </div> </div> </template> <script> export default { data(){ return{ text:"主頁" } } } </script> <style lang="less" scoped> </style>
下面就是 細節了，用子路由讓各個模塊顯示在內容區。。
ok
發現點擊按鈕時，側邊欄會突然出現突然隱藏，然后我自己定了個過度的樣式，分別加在 側邊欄和內容框上，然后效果就正常了
另外。內容為空時，整個內容區會壓縮沒，可以通過定位將整個容器拉扯開。
側邊欄的每一項都可以點擊，我使用了router子路由，的方式，讓對應的子模板顯示在粉色框內，下面是路由配置：
routes: [
{
path: "/",
name: "index",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ "./pages/index.vue"),
children:[
{
path:'/',
name:'com1',
component:()=>
import('./components/com1.vue')
},
{
path:'com2',
name:'com2',
component:()=>
import('./components/com2.vue')
}
]
}
]
不過每一個模板最外面的一層的類名不要亂起，我將一個模板的最外面一層，起了個box類名，結果內容與footer之間老多一塊空隙，將footer擠到了下面，初步判斷是，adminlte給box類名定義了樣式，所以換成了其它類名就沒事了，比如box1.