vue2-admin-lte
vue2-admin-lte (Demo)
AdminLTE of Admin control panel template Based on Vuejs 2.x Front-end Framework.
Documentation
Demo Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
# run unit tests: coming soon
# npm run unit
# run e2e tests: coming soon
# npm run e2e
# run all tests: comping soon
# npm test
How to use
First, npm install
$ npm i --save vue2-admin-lte
append alias config in webpack
module.exports = {
resolve: {
alias: {
'va': 'vue2-admin-lte/src'
}
}
}
import css and javascript files
// css files
import 'va/lib/css'
// js files
import 'va/lib/script'
use the components in .vue
<template>
<va-button
name="Primary"
theme="primary"
size="btn-lg"
:isFlat="true"
></va-button>
</template>
<script>
import VAButton from 'va/components/VAButton.vue'
export default {
name: 'Button',
components: {
'va-button': VAButton
}
}
</script>
Example
<template>
<va-direct-chat
:talkList="talkList"
:badgeCount="3"
theme="primary"
title="Direct Chat"
placeholder="Type Messages ..."
></va-direct-chat>
</template>
<script>
import VADirectChat from '../path/to/components/VADirectChat.vue'
export default {
name: 'App',
data () {
return {
talkList: [
{
name: 'Alexander Pierce',
date: new Date(),
profileImage: 'http://path/to/image',
message: `Is this template really for free? That's unbelievable`,
isMine: false
},
{
name: 'Sarah Bullock',
date: new Date(),
profileImage: 'http://path/to/image',
message: `You better believe it!`,
isMine: true
}
}
},
components: {
'va-direct-chat': VADirectChat
}
}
</script>
how to start mock server
node ./mock-server/index.js
how to use Vuex
// /vuex/store.js
import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import modules from './modules'
Vue.use(Vuex)
export default new Vuex.Store({
actions,
getters,
modules,
strict: process.env.NODE_ENV !== 'production'
})
Contributing to Vue2 AdminLTE
The following is a set of guidelines for contributing to Vue2 AdminLTE
.
Submitting Issues
You can create an issue here.
If you can, please include:
- The version, name of Browser you are using
- The operating system you are using
Other things that will help resolve your issue:
- Screenshots or gif
- dev tools or an alert
- Perform a search to see if a similar issue has already been submitted
Submitting Pull Requests
- Include screenshots and animated gif in your pull request whenever possible.
- Use short, present tense commit messages.
Dependencies
Dependencies
autoprefixer: ^6.7.2axios-mock-adapter: ^1.7.1babel-core: ^6.22.1babel-eslint: ^7.1.1babel-loader: ^6.2.10babel-plugin-istanbul: ^3.1.2babel-plugin-transform-runtime: ^6.22.0babel-polyfill: ^6.23.0babel-preset-es2015: ^6.22.0babel-preset-stage-2: ^6.22.0babel-register: ^6.22.0chai: ^3.5.0chalk: ^1.1.3chromedriver: ^2.27.2connect-history-api-fallback: ^1.3.0cross-env: ^3.1.4cross-spawn: ^5.0.1css-loader: ^0.26.1eslint: ^3.14.1eslint-config-standard: ^6.2.1eslint-friendly-formatter: ^2.0.7eslint-loader: ^1.6.1eslint-plugin-html: ^2.0.0eslint-plugin-promise: ^3.4.0eslint-plugin-standard: ^2.0.1eventsource-polyfill: ^0.9.6express: ^4.14.1extract-text-webpack-plugin: ^2.0.0-rc.2faker: ^4.1.0file-loader: ^0.10.0friendly-errors-webpack-plugin: ^1.1.3function-bind: ^1.1.0html-webpack-plugin: ^2.28.0http-proxy-middleware: ^0.17.3inject-loader: ^2.0.1json-server: ^0.9.5karma: ^1.4.1karma-coverage: ^1.1.1karma-mocha: ^1.3.0karma-phantomjs-launcher: ^1.0.2karma-sinon-chai: ^1.2.4karma-sourcemap-loader: ^0.3.7karma-spec-reporter: 0.0.26karma-webpack: ^2.0.2lolex: ^1.5.2mocha: ^3.2.0nightwatch: ^0.9.12npm-run-all: ^4.0.2opn: ^4.0.2ora: ^1.1.0phantomjs-prebuilt: ^2.1.14selenium-server: ^3.0.1semver: ^5.3.0shelljs: ^0.7.6sinon: ^1.17.7sinon-chai: ^2.8.0url-loader: ^0.5.7vue-loader: ^10.3.0vue-style-loader: ^2.0.0vue-template-compiler: ^2.1.10webpack: ^2.2.1webpack-bundle-analyzer: ^2.2.1webpack-dev-middleware: ^1.10.0webpack-hot-middleware: ^2.16.1webpack-merge: ^2.6.1