用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/almasaeed2...
git下载:git clone https://github.com/almasaeed2...
也可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
clipboard.png
启动项目 npm run dev

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

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

clipboard.png

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

clipboard.png

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

clipboard.png
9、保存 运行 npm run dev

clipboard.png

不用惊慌 打开App.vue

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

node-modules 》admin-lte 》dist
5 声望
0 粉丝
0 条评论
推荐阅读
Vue微信公众号开发踩坑记录
JS-SDK需要向服务端获取签名,且获取签名中需要的参数包括所在页面的url,但由于单页应用的路由特殊,其中涉及到iOS和android微信客户端浏览器内核的差异性导致的兼容问题

imwty132阅读 67.7k评论 81

Vue中的diff算法
diff算法是一种通过同层的树节点进行比较的高效算法,避免了对树进行逐层搜索遍历,所以时间复杂度只有 O(n)。diff算法的在很多场景下都有应用,例如在 vue 虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较更新时...

款冬27阅读 14.2k评论 7

【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.1k评论 10

封面图
vue-property-decorator使用手册
@Component 装饰器可以接收一个对象作为参数,可以在对象中声明 components ,filters,directives等未提供装饰器的选项,也可以声明computed,watch等

似曾相识17阅读 29.6k评论 7

前端开发工具
前端教程阿西河前端教程丨一个助你成为全栈开发的网站前端高手进阶JavaScript利用js实现表单的校验KeyCode 查询表现代 JavaScript 教程时间戳(Unix timestamp)转换工具HTML minifierJavaScript代码压缩-js代码压...

寒青14阅读 2.6k

万字长文~vue+express+mysql带你彻底搞懂项目中的权限控制(附所有源码)
所谓的权限,其实指的就是:用户是否能看到,以及是否允许其对数据进行增删改查的操作,因为现在开发项目的主流方式是前后端分离,所以整个项目的权限是后端权限控制搭配前端权限控制共同实现的

水冗水孚11阅读 1.5k

[译]Vue.js + Astro 比 Vue SPA 更好吗?
在本文中,我将向您展示如何使用 Astro 构建基于 Vue 的应用程序,我们将了解其独特的架构如何带来比单页应用程序 (SPA) 更好的性能。

杭州程序员张张7阅读 4.2k评论 3

5 声望
0 粉丝
宣传栏