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


Posted in Javascript onMarch 15, 2019

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

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

启动项目 npm run dev

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

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

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

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

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

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

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

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

9、保存 运行 npm run dev

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

不用惊慌 打开App.vue

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

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

node-modules 》admin-lte 》dist

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在线编辑器中换行与内容自动提取
Apr 24 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
Jun 14 Javascript
node.js中的buffer.write方法使用说明
Dec 10 Javascript
jquery表单对象属性过滤选择器实例分析
May 18 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
Jun 14 Javascript
AngularJS基础 ng-selected 指令简单示例
Aug 03 Javascript
JavaScript使用键盘输入控制实现数字验证功能
Aug 19 Javascript
JS调用打印机功能简单示例
Nov 28 Javascript
Vue 2中ref属性的使用方法及注意事项
Jun 12 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
如何在JavaScript中优雅的提取循环内数据详解
Mar 04 Javascript
vue+element实现图片上传及裁剪功能
Jun 29 Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 #Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 #Javascript
详解React项目中碰到的IE问题
Mar 14 #Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 #Javascript
React+Antd+Redux实现待办事件的方法
Mar 14 #Javascript
Node.js + express基本用法教程
Mar 14 #Javascript
Vue渲染过程浅析
Mar 14 #Javascript
You might like
PHP+MySQL投票系统的设计和实现分享
2012/09/23 PHP
PHP如何实现跨域
2016/05/30 PHP
Yii2针对指定url的生成及图片等的引入方法小结
2016/07/18 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
php制作基于xml的RSS订阅源功能示例
2017/02/08 PHP
php数据序列化测试实例详解
2017/08/12 PHP
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
2013/01/11 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
jQuery实现炫酷的鼠标轨迹特效
2015/02/01 Javascript
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
jquery表单验证插件formValidator使用方法
2016/04/01 Javascript
详解vue2 $watch要注意的问题
2017/09/08 Javascript
浅谈vue项目重构技术要点和总结
2018/01/23 Javascript
浅谈vue项目,访问路径#号的问题
2020/08/14 Javascript
vue缓存之keep-alive的理解和应用详解
2020/11/02 Javascript
Python探索之pLSA实现代码
2017/10/25 Python
Python的多维空数组赋值方法
2018/04/13 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
Python考拉兹猜想输出序列代码实践
2019/07/05 Python
Django框架models使用group by详解
2020/03/11 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
python计算auc的方法
2020/09/09 Python
Django框架请求生命周期实现原理
2020/11/13 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
美国精油公司:Plant Therapy
2019/05/17 全球购物
《赠汪伦》教学反思
2014/04/12 职场文书
大学班级学风建设方案
2014/05/01 职场文书
党代会心得体会
2014/09/04 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
集结号观后感
2015/06/08 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
2016年青少年禁毒宣传教育活动总结(学校)
2016/04/05 职场文书
MySQL的prepare使用以及遇到的bug
2022/05/11 MySQL