Vue整合AdminLTE模板的方法

import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import store from './store/store'
import 'bootstrap/dist/css/bootstrap.css'
//AdminLTE
import './assets/css/skins/_all-skins.min.css'
import './assets/css/AdminLTE.min.css'

引入后的效果

头部似乎正常了，但是body的内容都没有显示出来。原因是AdminLTE是基于bootstrap的，而bootstrap又是需要jquery的。此时我们只引入了css文件，而还没引入所需的js文件。但是此时引入js文件会因为没有jquery而导致引入的文件无法起作用。所以先解决Vue中使用jquery的问题。首先需要通过npm下载jquery到项目中（这里最好和AdminLTE中使用的jquery版本一致，我这里是2.2.3）。打开shell导航到我们项目所在的文件夹使用npm install来安装jquery。

安装好之后应该能在项目的node_modules文件夹中找到jquery文件夹，并且package.json中也记录了项目引用的jquery版本。

接下来要修改项目的webpack配置文件。文件位于项目的build文件夹下，文件名是webpack.base.conf.js。需要在这个文件中新增2处配置。

引入了jquery之后，我们就可以在main.js中继续引入bootstrap和AdminLTE的js文件了。

import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import store from './store/store'
//bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.min.js'
//AdminLTE
import './assets/css/skins/_all-skins.min.css'
import './assets/css/AdminLTE.min.css'
import './assets/js/app.min.js'

引入之后再看一下效果

总算看起来好一些了，但是我们发现图标都没有显示出来，这是因为AdminLTE还使用了font-awesome。我们还需要再使用npm在项目中安装font-awesome，之后在main.js中导入font-awesome的css文件（这次只需要安装，不需要修改webpack的配置文件了）。