Vue2集成AdminLte 后台模板

最新推荐文章于 2024-08-15 09:34:42 发布

DaJiangU

最新推荐文章于 2024-08-15 09:34:42 发布

阅读量1.5w

点赞数 4

分类专栏：前后端分离文章标签： vue2 adminlte

本文链接：https://blog.csdn.net/dajiangu/article/details/78500725

版权

本文详细介绍了如何在Vue2项目中集成AdminLte后台模板。首先确保安装了最新版nodejs，然后创建Vue工程并引入jQuery。接着安装和配置bootstrap3.X，使用font-awesome添加图标。最后，安装admin-lte并修改相关配置，实现admin-lte的starter页面。文章提供了完整的步骤和源码链接。

摘要由CSDN通过智能技术生成

# 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">&times;</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">