详解用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 相关文章推荐
IE php关于强制下载文件的代码
Aug 23 Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
JS中判断null、undefined与NaN的方法
Mar 26 Javascript
原生javascript模仿win8等待提示圆圈进度条
Apr 24 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
JavaScript数组各种常见用法实例分析
Aug 04 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
Mar 12 Javascript
利用NPM淘宝的node.js镜像加速nvm
Mar 27 Javascript
小程序点赞收藏功能的实现代码示例
Sep 07 Javascript
Angular4 Select选择改变事件的方法
Oct 09 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 Javascript
JavaScript indexOf()原理及使用方法详解
Jul 09 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
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
JS实现侧悬浮浮动实例代码
2013/11/29 Javascript
javascript进行数组追加方法小结
2014/06/16 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
浅析nodejs实现Websocket的数据接收与发送
2015/11/19 NodeJs
jQuery实现HTML表格单元格的合并功能
2016/04/06 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
zTree树形插件异步加载方法详解
2017/06/14 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
node.js中module模块的功能理解与用法实例分析
2020/02/14 Javascript
python转换摩斯密码示例
2014/02/16 Python
python集合类型用法分析
2015/04/08 Python
Python贪吃蛇游戏编写代码
2020/10/26 Python
python3库numpy数组属性的查看方法
2018/04/17 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
python3转换code128条形码的方法
2019/04/17 Python
python numpy 常用随机数的产生方法的实现
2019/08/21 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
python 操作hive pyhs2方式
2019/12/21 Python
基于OpenCV的路面质量检测的实现
2020/11/04 Python
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
模具设计与制造专业应届生求职信
2013/10/18 职场文书
最新党员的自我评价分享
2013/11/04 职场文书
50岁生日感言
2014/01/23 职场文书
MySQL root密码的重置方法
2021/04/21 MySQL