详解用vue2.x版本+adminLTE开源框架搭建后台应用模版

1、创建工程

npm install --global vue-cli 安装脚手架
vue init webpack vue-adminlte 初始化webpack 项目
cd vue-adminlte 切换项目文件夹下
npm install 安装依赖库
npm run dev 运行项目

2、安装 jquery

npm install jquery —save-dev

并在build/webpack.base.conf.js中， 引入webpack

var webpack = require('webpack');

以及在当前文件下找到 module.exports 中 》resolve 〉alias 增加 如下

alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'components': path.resolve(__dirname, '../src/components'),
'jquery':path.resolve(__dirname,'../node_modules/jquery/src/jquery')
},
//并增加如下:
plugins: [
 new webpack.ProvidePlugin({
  $: "jquery",
  jQuery: "jquery",
  "windows.jQuery":"jquery"
 })
]

然后在main.js中引入：

import $ from 'jquery'
window.$ = $
window.jQuery = $

如果报eslint的错误，可能搭建项目时开启了es > 注释掉有关eslint检查

将 createLintingRule 删掉（去除eslint检查 首选项 》设置）

"vetur.validation.template": false, "eslint.enable": false

不报错之后 测试一下 看是否真正的引进了jquery

3、安装bootstrap

npm i bootstrap@3.3.0 --save

在build/webpack.base.conf.js中 对比一下看是否齐全：

alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'components': path.resolve(__dirname, '../src/components'),
'jquery':path.resolve(__dirname,'../node_modules/jquery/src/jquery')
},

引入： 在main.js中

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'

4、安装 font-awesome

npm i font-awesome --save

引入： 在main.js中

import 'font-awesome/css/font-awesome.css'

5、如果过程中报错 This dependency was not found: * !!vue-style-loader!css-loader。。

npm install stylus-loader css-loader style-loader --save-dev

如果还是如下：

This dependency was not found:
* !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-3c7429a2","scoped":false,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../node_。。

安装如下代码

npm i sass-loader --save
npm i node-sass --save

6、下载 /安装 adminLTE

GitHub：https://github.com/almasaeed2010/AdminLTE

git下载：git clone https://github.com/almasaeed2010/AdminLTE

也可npm安装：（推荐）

npm i admin-lte --save-dev

引入： 在main.js中

import 'admin-lte/dist/css/AdminLTE.min.css'
import 'admin-lte/dist/css/skins/_all-skins.min.css'
import 'admin-lte/dist/js/adminlte.min'

7、精简你的代码 测试是否引入 bootstrap、font-awesome

启动项目 npm run dev

8、那就开始 引用adminLTE中的 你要用的 一些代码吧

  • 在components下新建starter.vue文件
  • 打开node-modules》admin-lte》starter.html
  • 并复制整段的wrapper内容，放到starter.html中template下

再复制 body的class类名 放到index.html中的body中

修改路由信息 src/router/index.js

9、保存 运行 npm run dev

不用惊慌 打开App.vue

10、其他什么 自己需要的页面 直接拿过来 修修改改吧

node-modules 》admin-lte 》dist

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue整合AdminLTE模板的方法

    上一次搞定了登录验证和跳转的问题,不过存在一处bug.在Vue的main.js中,使用了Vue-router的路由钩子来判断是否可以访问受保护的资源,问题就出在这里,先修复上次的bug. /* 全局路由钩子 访问资源时需要验证localStorage中是否存在token 以及token是否过期 验证成功可以继续跳转 失败返回登录页重新登录 */ router.beforeEach((to, from, next) => { if(localStorage.token && new D

  • 详解用vue2.x版本+adminLTE开源框架搭建后台应用模版

    1.创建工程 npm install --global vue-cli 安装脚手架 vue init webpack vue-adminlte 初始化webpack 项目 cd vue-adminlte 切换项目文件夹下 npm install 安装依赖库 npm run dev 运行项目 2.安装 jquery npm install jquery -save-dev 并在build/webpack.base.conf.js中, 引入webpack var webpack = require(

  • 详解Android studio 3+版本apk安装失败问题

    studio2.3升级到3.1之后将apk发给别人下载到手机上安装,华为提示安装包无效或与操作系统不兼容,魅族提示apk仅为测试版,要求下载正式版安装. 在网上找了一下,发现是studio3.0之后的instant run功能引起的,直接点击绿色箭头按钮烧出来的apk都是不完整的,也就是魅族指的测试版,并且这个apk的路径在app\build\intermediates\instant-run-apk\debug下,而原来的app\build\outputs\apk\debug路径下已经没有ap

  • 详解python中GPU版本的opencv常用方法介绍

    引言 本篇是以python的视角介绍相关的函数还有自我使用中的一些问题,本想在这篇之前总结一下opencv编译的全过程,但遇到了太多坑,暂时不太想回看做过的笔记,所以这里主要总结python下GPU版本的opencv. 主要函数说明 threshold():二值化,但要指定设定阈值 blendLinear():两幅图片的线形混合 calcHist() createBoxFilter ():创建一个规范化的2D框过滤器 canny边缘检测 createGaussianFilter():创建一个Ga

  • IDEA 单元测试创建方法详解（2020.03版本亲测）

    IntelliJ IDEA创建单元测试 在 Android 中,单元测试基于 JUnit,JUnit 的平面使用足以测试完全基于 Java 代码的功能. 但是,为了测试 Android 特定的功能,您需要一堆构建在 JUnit 之上的包装类.IntelliJ IDEA 简化了 Android 测试项目构建过程中的大部分任务. 1.确保你的代码是可测试的 单元测试要求源代码的编写方式使得模块之间的依赖关系可以很容易地通过模仿来消除.另外,单元测试要求功能相互隔离. 因为这个 HelloDroid

  • 详解解决IDEA2020.1版本的lombok插件问题

    相信大家更新idea2020.1版本出现之后,发现很多插件无法使用的问题,比如常用的lombok插件无法使用,这里将提供解决方案 一. 官网插件地址 在idea插件中心找到lombok,右边会显示官网插件地址,点进去即可 二. 官网插件下载 2.1 右边选择安装到IDE,选择 2020.1版本 2.2 菜单切换到Versions,选择我们想要的版本 查看所有,找到EAP的版本 下载完成后要在IDEA进行本地安装覆盖历史的版本,就可以正常使用了 三. 安装本地插件 安装本地插件方法如下: 找 到下

  • 详解springboot中各个版本的redis配置问题

    详解springboot中各个版本的redis配置问题

    今天在springboot中使用数据库,springboot版本为2.0.2.RELEASE,通过pom引入jar包,配置文件application.properties中的redis配置文件报错,提示例如deprecated configuration property 'spring.redis.pool.max-active',猜想应该是版本不对,发现springboot在1.4前后集成redis发生了一些变化.下面截图看下. 一.不同版本RedisProperties的区别 这是spri

  • 详解给Vue2路由导航钩子和axios拦截器做个封装

    1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2.具体需求 用户鉴权与重定向:使用Vue提供的路由导航钩子 请求数据序列化:使用axios提供的请求拦截器 接口报错信息处理:使用axios提供的响应拦截器 3.简单实现 3.1 路由导航钩子层面鉴权与重定向的封装 路由导航钩子所有配置均在router/index.js,这里是部分代码 import

  • 详解Xampp和wordpress在Centos7上的搭建与使用

    xampp下载地址(http://www.jb51.net/softs/308.html) 注意:并不是xampp版本越高越好,找到与之对应的PHP版本选择下载 wordpress下载地址(http://www.jb51.net/codes/17345.html) 注意:下载tar.gz包 安装xampp,把xampp文件权限给满,以防权限不够安装失败 chmod -R 777 xampp-linux-x64-5.6.30-1-installer.run ./xampp-linux-x64-5.

  • 详解Spring Cloud 跨服务数据聚合框架

    AG-Merge Spring Cloud 跨服务数据聚合框架 解决问题 解决Spring Cloud服务拆分后分页数据的属性或单个对象的属性拆分之痛, 支持对静态数据属性(数据字典).动态主键数据进行自动注入和转化, 其中聚合的静态数据会进行 一级混存 (guava). 举个栗子: 两个服务,A服务的某张表用到了B服务的某张表的值,我们在对A服务那张表查询的时候,把B服务某张表的值聚合在A服务的那次查询过程中 示例 具体示例代码可以看 ace-merge-demo 模块 |------- ac

  • 详解nvm管理多版本node踩坑

    Windows10 本机环境:win10 未安装node,安装了nvm工具,尝试使用nvm安装我开发环境的node版本(10.9.0 or later) 根据上面的截图看,应该是npm下载失败了,需要手动安装,我们使用命令查看node安装情况 nvm use 10.9.0 v10.9.0 node安装没问题,尝试安装单独的npm包的时候出问题了,上述的网站已经移植更改到 https://npm.community/ 然而这个网址很难打开,即使翻墙,github上也没有直接安装的包,暂时告一段落,

随机推荐