详解用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 相关文章推荐
一个可以显示阴历的JS代码
Mar 05 Javascript
解析arp病毒背后利用的Javascript技术附解密方法
Aug 06 Javascript
javascript引导程序
Oct 26 Javascript
js 链式延迟执行DOME
Jan 04 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
May 19 Javascript
JS 中LocalStorage和SessionStorage的使用
Aug 17 Javascript
Vue项目添加动态浏览器头部title的方法
Jul 11 Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
Apr 14 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 Javascript
JS封装cavans多种滤镜组件
Feb 15 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中FTP函数ftp_connect、ftp_login与ftp_chmod用法
2014/11/18 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
2015/05/03 Javascript
如何解决vue与传统jquery插件冲突
2017/03/20 Javascript
react路由配置方式详解
2017/08/07 Javascript
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
Python的print用法示例
2014/02/11 Python
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
Python中 Lambda表达式全面解析
2016/11/28 Python
分数霸榜! python助你微信跳一跳拿高分
2018/01/08 Python
Python获取指定字符前面的所有字符方法
2018/05/02 Python
django如何自己创建一个中间件
2019/07/24 Python
python opencv实现gif图片分解的示例代码
2019/12/13 Python
Python使用正则实现计算字符串算式
2019/12/29 Python
python实现简单俄罗斯方块
2020/03/13 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
CSS3实现复选框动画特效示例代码
2016/09/27 HTML / CSS
美国宠物商店:Wag.com
2016/10/25 全球购物
OPPO手机官方商城:中国手机市场出货量第一品牌
2017/10/18 全球购物
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
法律系毕业生自荐信范文
2014/03/27 职场文书
办公室主任竞聘演讲稿
2014/05/15 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
python 中的jieba分词库
2021/11/23 Python
redis数据结构之压缩列表
2022/03/21 Redis