[SpringBoot+VueJs] 3.2 Admin-LTE介绍

环境搭建
后端
2.1 数据库设计
2.2 SpringBoot + Mybatis
2.3 SpringBoot+RestfulAPI
前端
3.1 VueJS 2.0 + Webpack工程介绍
3.2 Admin-LTE介绍及使用
3.3 VueJS一些基础知识
3.4 项目中用到的和VueJS的开源组件

1 admin-LTE是什么？

admin-LTE，是一个UI的框架。它主要提供仪表盘式的前端样式。大大节省了前端开发的成本。它基于Bootstrap3。

2 Admin-LTE详细介绍

需要这个Index.html（这里请在官方网站上下载源码包）
整个样子：

Snip20170712_181.png

这里分几部分：

2.1 <head>

这里和传统的HTML的head并无两样，都是引入的CSS样式：

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 2 | Dashboard</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
  <!-- iCheck -->
  <link rel="stylesheet" href="plugins/iCheck/flat/blue.css">
  <!-- Morris chart -->
  <link rel="stylesheet" href="plugins/morris/morris.css">
  <!-- jvectormap -->
  <link rel="stylesheet" href="plugins/jvectormap/jquery-jvectormap-1.2.2.css">
  <!-- Date Picker -->
  <link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
  <!-- Daterange picker -->
  <link rel="stylesheet" href="plugins/daterangepicker/daterangepicker.css">
  <!-- bootstrap wysihtml5 - text editor -->
  <link rel="stylesheet" href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

2.2 <body>

整个Body是在<div class="wrapper">里。
然后里面分了几部分：

<header>标签的内容，主要是页面的上面头部信息。

header

<aside class="main-sidebar">，主要是左侧边栏信息。

aside

<div class="content-wrapper">，主要是除了上部和左侧边栏的内容区。

content

<footer class="main-footer">，页脚信息：

footer

<aside class="control-sidebar control-sidebar-dark">。右侧伸缩边栏，如果需要的话可以用。

image.png

一个空白的页面可以从starter.html开始构造

3 根据我们的需要改造

我们既然要做单页应用，必须要改在这个starter.html。
所以：
第一步：改造页面，使之能够挂载我们的vue app。

image.png

可以看到，我们将整个body的内容，复制给id = “app”了。这样的话，只要我们的main vue实例挂载在这个id=“app”上，即可。就会成为我们的整个工程的入口。

第二步：挂载vue.app：
回顾下 3.1 VueJS 2.0 + Webpack工程介绍，里我们通过webpack生成的工程模板。
打开里面的main.js，是这样的：

import Vue from 'vue'
import App from './App.vue'
new Vue({
  // el: '#app',
  template: '<App/>',
  components: { App }
}).$mount('#app')

这里的意思就是通过Vue构造函数生成的实例，mount（挂载）到id = “app”整个view-model上。从而实现我们整个MVVM整合Admin-LTE成功。

下面请使用npm run dev。看看是否能够加载页面。

4 admin-LTE的配置

这里不做赘述，请参考Admin-LTE的官方解读。
如果你下载源码包到本地应该是这个目录：
file:///Users/xxx/Documents/AdminLTE-2.3.11/documentation/index.html
线上的是：https://adminlte.io/docs/2.4/installation

我这里大部分的js css都是用cdn来load的。是的，为什么不用呢？
可以从这里搜索：http://www.bootcdn.cn/

源码

Git Hub Demo