[SpringBoot+VueJs] 3.2 Admin-LTE介绍

目录

1. 环境搭建
2. 后端
   2.1 数据库设计
   2.2 SpringBoot + Mybatis
   2.3 SpringBoot+RestfulAPI
3. 前端
   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

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

2.2

整个Body是在

里。
然后里面分了几部分：

1. 标签的内容，主要是页面的上面头部信息。

header

2. ，主要是左侧边栏信息。

aside

3. ，主要是除了上部和左侧边栏的内容区。

content

4. ，页脚信息：

footer

5. 。右侧伸缩边栏，如果需要的话可以用。

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: '',
  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