# Vue2集成AdminLte 后台模板
前提条件 安装最新版的nodejs
- 创建vue工程
npm install --global vue-cli
vue init webpack vue-adminlte
cd vue-adminlte
npm install
npm run dev
此时可以验证 http://localhost:8080/#/ 默认的demo
2 引入jQuery , 创建src/lib/jquery-vender.js , 修改src/main.js , src/components/HelloWorld.vue
jquery-vender.js : 引入jquery, 导出全局变量$, jQuery
import $ from 'jquery'
window.$ = $
window.jQuery = $
export default $
main.js , 增加第六行 import ‘./lib/jquery-vender.js’
5 import router from './router'
6 import './lib/jquery-vender.js'
HelloWorld.vue, 删除不要的 , 稍微做修改
<template>
<div class="hello" id="msg">
<h1>{
{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
修改完后, 执行npm i jquery –save , 从浏览器控制台进行测试jquery
$('#msg').text()
3 安装bootstrap3.X
npm i bootstrap@3 --save
在src/main.js 增加import ‘bootstrap’
import './lib/jquery-vender.js'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.css'
修改HelloWorld.vue如下 ,在template加入代码
<template>
<div class="hello" id="msg">
<h1>{
{ msg }}</h1>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</template>
4 使用font-awesome , 先安装以下font-awesome
npm i font-awesome --save
在main.js添加
import 'font-awesome/css/font-awesome.css'
HelloWorld.vue作如下修改 , 最后可以看到可爱的小图标出现在了页面上
<h1><i class='fa fa-fw fa-amazon'></i>{
{ msg }}</h1>
5 集成admin-lte正题上来
首先安装admin-lte
npm i admin-lte --save
修改src/main.js , 引入admin-lte样式js文件
7 import 'bootstrap'
8 import 'admin-lte'
9 import 'bootstrap/dist/css/bootstrap.css'
10 import 'font-awesome/css/font-awesome.css'
11 import 'admin-lte/dist/css/AdminLTE.min.css'
12 import 'admin-lte/dist/css/skins/_all-skins.min.css'
创建starter.vue , 把admin-lte源码中间部分copy过来如下内容
<template>
<div class="wrapper">
<!-- Main Header -->
<header class="main-header">
<!-- Logo -->
<a href="index2.html" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>A</b>LT</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg">