Vue2集成AdminLte 后台模板

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

# Vue2集成AdminLte 后台模板

前提条件 安装最新版的nodejs
  1. 创建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">
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值