详解用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 相关文章推荐
简单的代码实现jquery定时器
Nov 17 Javascript
Javascript解析URL方法详解
Dec 05 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
Feb 19 Javascript
深入理解Webpack 中路径的配置
Jun 17 Javascript
AngularJS实现tab选项卡的方法详解
Jul 05 Javascript
vue服务端渲染的实例代码
Aug 28 Javascript
详解Vue-cli代理解决跨域问题
Sep 27 Javascript
node.js学习之断言assert的使用示例
Sep 28 Javascript
JS实现快递单打印功能【推荐】
Jun 21 Javascript
JavaScript中call和apply方法的区别实例分析
Aug 03 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
为什么那些咖啡爱好者大多看不上连锁咖啡店?
2021/03/06 咖啡文化
推荐php模板技术[转]
2007/01/04 PHP
php 广告调用类代码(支持Flash调用)
2011/08/11 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
javascript模拟订火车票和退票示例
2014/04/24 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
2016/12/13 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
JavaScript之Date_动力节点Java学院整理
2017/06/28 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
vue-i18n结合Element-ui的配置方法
2019/05/20 Javascript
图解NodeJS实现登录注册功能
2019/09/16 NodeJs
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
2020/02/11 Javascript
Vue-cli打包后如何本地查看的操作
2020/09/02 Javascript
[42:20]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python实现简单的可逆加密程序实例
2015/03/05 Python
python常用函数详解
2016/09/13 Python
Python多线程爬虫实战_爬取糗事百科段子的实例
2017/12/15 Python
python如何实现单链表的反转
2020/02/10 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
python redis存入字典序列化存储教程
2020/07/16 Python
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
财务方面个人工作的自我评价
2013/12/28 职场文书
初婚未育证明
2014/01/15 职场文书
车间机修工岗位职责
2014/02/28 职场文书
个人贷款担保书
2014/04/01 职场文书
拔河比赛新闻稿
2015/07/17 职场文书
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS
详解在OpenCV中如何使用图像像素
2022/03/03 Python