forgetest5
/
vue-manage-system1
mirror of https://mirror.trustie.net/testforgeroot/vue-manage-system1.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge branch 'master' of https://github.com/lin-xin/manage-system

This commit is contained in:
lin-xin 2019-03-22 17:27:14 +08:00
parent 23235f33bc 481c03937a
commit 41b0298e6a
51 changed files with 5464 additions and 6982 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.babelrc
View File

@ -1,12 +0,0 @@
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}

3
.browserslistrc Normal file
View File

@ -0,0 +1,3 @@
> 1%
last 2 versions
not ie <= 8

9
.editorconfig
View File

@ -1,9 +0,0 @@
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

23
.gitignore vendored
View File

@ -1,5 +1,22 @@
.DS_Store
node_modules/
dist/
npm-debug.log
node_modules
/dist
example.html
favicon.ico
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

9
.postcssrc.js
View File

@ -1,9 +0,0 @@
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
"plugins": {
// to edit target browsers: use "browserslist" field in package.json
"postcss-import": {},
"autoprefixer": {}
}
}

49
README.md
View File

@ -6,14 +6,15 @@
[更新日志](https://github.com/lin-xin/vue-manage-system/releases)
## 赞赏
请作者喝杯咖啡吧！
请作者喝杯咖啡吧！(微信号：linxin_20)
![微信扫一扫](http://blog.gdfengshuo.com/images/weixin.jpg)
## 前言 ##
之前在公司用了Vue + Element组件库做了个后台管理系统，基本很多组件可以直接引用组件库的，但是也有一些需求无法满足。像图片裁剪上传、富文本编辑器、图表等这些在后台管理系统中很常见的功能，就需要引用其他的组件才能完成。从寻找组件，到使用组件的过程中，遇到了很多问题，也积累了宝贵的经验。所以我就把开发这个后台管理系统的经验，总结成这个后台管理系统解决方案。
该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于vue.js,使用vue-cli脚手架快速生成项目目录，引用Element UI组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。
该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于vue.js,使用vue-cli@3.2.3脚手架快速生成项目目录，引用Element UI组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。
（已经升级到 vue-cli@3.2.3，请更新依赖）
## 功能 ##
- [x] Element UI
@ -32,54 +33,18 @@
- [x] 404 / 403
- [x] 三级菜单
- [x] 自定义图标
## 目录结构介绍 ##
|-- build // webpack配置文件
|-- config // 项目打包路径
|-- src // 源码目录
| |-- components // 组件
| |-- common // 公共组件
| |-- bus.js // Event Bus
| |-- Header.vue // 公共头部
| |-- Home.vue // 公共路由入口
| |-- Sidebar.vue // 公共左边栏
| |-- Tags.vue // 页面切换标签组件
| |-- page // 主要路由页面
| |-- 403.vue
| |-- 404.vue
| |-- BaseCharts.vue // 基础图表
| |-- BaseForm.vue // 基础表单
| |-- BaseTable.vue // 基础表格
| |-- DashBoard.vue // 系统首页
| |-- DragList.vue // 拖拽列表组件
| |-- Icon.vue // 自定义图标组件
| |-- Login.vue // 登录
| |-- Markdown.vue // markdown组件
| |-- Premission.vue // 权限测试组件
| |-- Upload.vue // 图片上传
| |-- VueEditor.vue // 富文本编辑器
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 代码编写规格
|-- .gitignore // 忽略的文件
|-- index.html // 入口html文件
|-- package.json // 项目及工具的依赖配置文件
|-- README.md // 说明
- [x] 可拖拽弹窗
## 安装步骤 ##
git clone https://github.com/lin-xin/vue-manage-system.git // 把模板下载到本地
cd vue-manage-system // 进入模板目录
npm install // 安装项目依赖，等待安装完成之后
npm install // 安装项目依赖，等待安装完成之后，安装失败可用 cnpm 或 yarn
## 本地开发 ##
// 开启服务器，浏览器访问 http://localhost:8080
npm run dev
npm run serve
## 构建生产 ##
@ -207,4 +172,4 @@ import 'element-ui/lib/theme-default/index.css'; // 默认主题
### 浅绿色皮肤 ###
![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms2.png)
![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms2.png)

37
README_EN.md
View File

@ -26,41 +26,6 @@ The scheme as a set of multi-function background frame templates, suitable for m
- [x] Custom icon
## Directory structure ##
|-- build // Webpack configuration file
|-- config // Project package path
|-- src // Source directory
| |-- components // Components
| |-- common // Common component
| |-- bus.js // Event Bus
| |-- Header.vue // Header component
| |-- Home.vue // Home component
| |-- Sidebar.vue // Sidebar component
| |-- Tags.vue
| |-- page // Router page
| |-- 403.vue
| |-- 404.vue
| |-- BaseCharts.vue // BaseCharts
| |-- BaseForm.vue // BaseForm
| |-- BaseTable.vue // BaseTable
| |-- Login.vue // Login
| |-- Dashboard.vue
| |-- DragList.vue
| |-- Markdown.vue // Markdown
| |-- Premission.vue
| |-- Upload.vue // Upload
| |-- VueEditor.vue // VueEditor
| |-- App.vue // Main component
| |-- main.js // Entry file
|-- .babelrc // ES6 syntax compiler configuration
|-- .editorconfig // Code specification
|-- .gitignore // Ignored file
|-- index.html // Entry HTML file
|-- package.json // Dependent configuration file
|-- README.md // Readme
## Installation steps ##
git clone https://github.com/lin-xin/vue-manage-system.git // Clone templates
@ -70,7 +35,7 @@ The scheme as a set of multi-function background frame templates, suitable for m
## Local development ##
// Open server and access http://localhost:8080 in browser
npm run dev
npm run serve
## Constructing production ##

5
babel.config.js Normal file
View File

@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/app'
]
}

41
build/build.js
View File

@ -1,41 +0,0 @@
'use strict'
require('./check-versions')()
process.env.NODE_ENV = 'production'
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
const spinner = ora('building for production...')
spinner.start()
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
if (err) throw err
webpack(webpackConfig, (err, stats) => {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
chunks: false,
chunkModules: false
}) + '\n\n')
if (stats.hasErrors()) {
console.log(chalk.red(' Build failed with errors.\n'))
process.exit(1)
}
console.log(chalk.cyan(' Build complete.\n'))
console.log(chalk.yellow(
' Tip: built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n'
))
})
})

54
build/check-versions.js
View File

@ -1,54 +0,0 @@
'use strict'
const chalk = require('chalk')
const semver = require('semver')
const packageConfig = require('../package.json')
const shell = require('shelljs')
function exec (cmd) {
return require('child_process').execSync(cmd).toString().trim()
}
const versionRequirements = [
{
name: 'node',
currentVersion: semver.clean(process.version),
versionRequirement: packageConfig.engines.node
}
]
if (shell.which('npm')) {
versionRequirements.push({
name: 'npm',
currentVersion: exec('npm --version'),
versionRequirement: packageConfig.engines.npm
})
}
module.exports = function () {
const warnings = []
for (let i = 0; i < versionRequirements.length; i++) {
const mod = versionRequirements[i]
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
warnings.push(mod.name + ': ' +
chalk.red(mod.currentVersion) + ' should be ' +
chalk.green(mod.versionRequirement)
)
}
}
if (warnings.length) {
console.log('')
console.log(chalk.yellow('To use this template, you must update following to modules:'))
console.log()
for (let i = 0; i < warnings.length; i++) {
const warning = warnings[i]
console.log(' ' + warning)
}
console.log()
process.exit(1)
}
}

BIN
build/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.7 KiB

102
build/utils.js
View File

@ -1,102 +0,0 @@
'use strict'
const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')
exports.assetsPath = function (_path) {
const assetsSubDirectory = process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path)
}
exports.cssLoaders = function (options) {
options = options || {}
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
const output = []
const loaders = exports.cssLoaders(options)
for (const extension in loaders) {
const loader = loaders[extension]
output.push({
test: new RegExp('\\.' + extension + '$'),
use: loader
})
}
return output
}
exports.createNotifierCallback = () => {
const notifier = require('node-notifier')
return (severity, errors) => {
if (severity !== 'error') return
const error = errors[0]
const filename = error.file && error.file.split('!').pop()
notifier.notify({
title: packageConfig.name,
message: severity + ': ' + error.name,
subtitle: filename || '',
icon: path.join(__dirname, 'logo.png')
})
}
}

22
build/vue-loader.conf.js
View File

@ -1,22 +0,0 @@
'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap
module.exports = {
loaders: utils.cssLoaders({
sourceMap: sourceMapEnabled,
extract: isProduction
}),
cssSourceMap: sourceMapEnabled,
cacheBusting: config.dev.cacheBusting,
transformToRequire: {
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: 'xlink:href'
}
}

83
build/webpack.base.conf.js
View File

@ -1,83 +0,0 @@
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'static': path.resolve(__dirname, '../static'),
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}

80
build/webpack.dev.conf.js
View File

@ -1,80 +0,0 @@
'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
const devWebpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
},
// cheap-module-eval-source-map is faster for development
devtool: config.dev.devtool,
// these devServer options should be customized in /config/index.js
devServer: {
clientLogLevel: 'warning',
historyApiFallback: true,
hot: true,
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay
? { warnings: false, errors: true }
: false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
poll: config.dev.poll,
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
]
})
module.exports = new Promise((resolve, reject) => {
portfinder.basePort = process.env.PORT || config.dev.port
portfinder.getPort((err, port) => {
if (err) {
reject(err)
} else {
// publish the new Port, necessary for e2e tests
process.env.PORT = port
// add port to devServer config
devWebpackConfig.devServer.port = port
// Add FriendlyErrorsPlugin
devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
compilationSuccessInfo: {
messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
},
onErrors: config.dev.notifyOnErrors
? utils.createNotifierCallback()
: undefined
}))
resolve(devWebpackConfig)
}
})
})

145
build/webpack.prod.conf.js
View File

@ -1,145 +0,0 @@
'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const env = require('../config/prod.env')
const webpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true,
usePostCSS: true
})
},
devtool: config.build.productionSourceMap ? config.build.devtool : false,
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
}),
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
// extract css into its own file
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
// Setting the following option to `false` will not extract CSS from codesplit chunks.
// Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
// It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
// increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
allChunks: true,
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}),
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),
// keep module.id stable when vender modules does not change
new webpack.HashedModuleIdsPlugin(),
// enable scope hoisting
new webpack.optimize.ModuleConcatenationPlugin(),
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks (module) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
}),
// This instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk, similar to the vendor chunk
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
new webpack.optimize.CommonsChunkPlugin({
name: 'app',
async: 'vendor-async',
children: true,
minChunks: 3
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
]
})
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig

7
config/dev.env.js
View File

@ -1,7 +0,0 @@
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
})

85
config/index.js
View File

@ -1,85 +0,0 @@
'use strict'
// Template version: 1.2.7
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api':{
target:'http://jsonplaceholder.typicode.com',
changeOrigin:true,
pathRewrite:{
'/api':''
}
},
'/ms':{
target: 'https://www.easy-mock.com/mock/592501a391470c0ac1fab128',
changeOrigin: true
}
},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false,
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
/**
* Source Maps
*/
productionSourceMap: false,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}

4
config/prod.env.js
View File

@ -1,4 +0,0 @@
'use strict'
module.exports = {
NODE_ENV: '"production"'
}

12
index.html
View File

@ -1,12 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-manage-system</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_830376_qzecyukz0s.css">
</head>
<body>
<div id="app"></div>
</body>
</html>

11146
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

73
package.json
View File

@ -1,68 +1,27 @@
{
"name": "vue-manage-system",
"version": "3.2.0",
"description": "基于Vue.js 2.x系列 + element-ui 内容管理系统解决方案",
"author": "lin-xin <2981207131@qq.com>",
"version": "4.0.0",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"build": "node build/build.js"
"dev": "npm run serve",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"axios": "^0.15.3",
"babel-polyfill": "^6.23.0",
"element-ui": "^2.4.5",
"mavon-editor": "^2.5.4",
"vue": "^2.5.16",
"vue-cropperjs": "^2.2.0",
"vue-quill-editor": "3.0.6",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"element-ui": "^2.4.11",
"mavon-editor": "^2.6.17",
"vue": "^2.5.21",
"vue-cropperjs": "^3.0.0",
"vue-quill-editor": "^3.0.6",
"vue-router": "^3.0.1",
"vue-schart": "^1.0.0",
"vuedraggable": "^2.16.0"
"vuedraggable": "^2.17.0"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 5 versions",
"not ie <= 8"
]
"@vue/cli-plugin-babel": "^3.2.0",
"@vue/cli-service": "^3.2.0",
"vue-template-compiler": "^2.5.21"
}
}

5
postcss.config.js Normal file
View File

@ -0,0 +1,5 @@
module.exports = {
plugins: {
autoprefixer: {}
}
}

17
public/index.html Normal file
View File

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_830376_qzecyukz0s.css">
<title>vue-manage-system</title>
</head>
<body>
<noscript>
<strong>We're sorry but vms doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

84
static/vuetable.json → public/vuetable.json
View File

@ -1,43 +1,43 @@
{
"list": [{
"date": "1997-11-11",
"name": "林丽",
"address": "吉林省 辽源市 龙山区"
}, {
"date": "1987-09-24",
"name": "文敏",
"address": "江西省 萍乡市 芦溪县"
}, {
"date": "1996-08-08",
"name": "杨秀兰",
"address": "黑龙江省 黑河市 五大连池市"
}, {
"date": "1978-06-18",
"name": "魏强",
"address": "广东省 韶关市 始兴县"
}, {
"date": "1977-07-09",
"name": "石秀兰",
"address": "江苏省 宿迁市 宿豫区"
}, {
"date": "1994-09-20",
"name": "朱洋",
"address": "海外 海外 -"
}, {
"date": "1980-01-22",
"name": "傅敏",
"address": "海外 海外 -"
}, {
"date": "1985-10-10",
"name": "毛明",
"address": "内蒙古自治区 包头市 九原区"
}, {
"date": "1975-09-08",
"name": "何静",
"address": "西藏自治区 阿里地区 普兰县"
}, {
"date": "1970-06-07",
"name": "郭秀英",
"address": "四川省 巴中市 恩阳区"
}]
{
"list": [{
"date": "1997-11-11",
"name": "林丽",
"address": "吉林省 辽源市 龙山区"
}, {
"date": "1987-09-24",
"name": "文敏",
"address": "江西省 萍乡市 芦溪县"
}, {
"date": "1996-08-08",
"name": "杨秀兰",
"address": "黑龙江省 黑河市 五大连池市"
}, {
"date": "1978-06-18",
"name": "魏强",
"address": "广东省 韶关市 始兴县"
}, {
"date": "1977-07-09",
"name": "石秀兰",
"address": "江苏省 宿迁市 宿豫区"
}, {
"date": "1994-09-20",
"name": "朱洋",
"address": "海外 海外 -"
}, {
"date": "1980-01-22",
"name": "傅敏",
"address": "海外 海外 -"
}, {
"date": "1985-10-10",
"name": "毛明",
"address": "内蒙古自治区 包头市 九原区"
}, {
"date": "1975-09-08",
"name": "何静",
"address": "西藏自治区 阿里地区 普兰县"
}, {
"date": "1970-06-07",
"name": "郭秀英",
"address": "四川省 巴中市 恩阳区"
}]
}

18
src/App.vue
View File

@ -1,10 +1,10 @@
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<style>
@import "../static/css/main.css";
@import "../static/css/color-dark.css"; /*深色主题*/
/*@import "../static/css/theme-green/color-green.css"; 浅绿色主题*/
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<style>
@import "./assets/css/main.css";
@import "./assets/css/color-dark.css"; /*深色主题*/
/*@import "./assets/css/theme-green/color-green.css"; 浅绿色主题*/
</style>

0
static/css/color-dark.css → src/assets/css/color-dark.css
View File

0
static/css/icon.css → src/assets/css/icon.css
View File

0
static/css/main.css → src/assets/css/main.css
View File

0
static/css/theme-green/color-green.css → src/assets/css/theme-green/color-green.css
View File

0
static/css/theme-green/fonts/element-icons.ttf → src/assets/css/theme-green/fonts/element-icons.ttf
View File

0
static/css/theme-green/fonts/element-icons.woff → src/assets/css/theme-green/fonts/element-icons.woff
View File

0
static/css/theme-green/index.css → src/assets/css/theme-green/index.css
View File

0
static/img/img.jpg → src/assets/img/img.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.0 KiB

After

Width:  |  Height:  |  Size: 6.0 KiB

0
src/assets/login-bg.jpg → src/assets/img/login-bg.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 69 KiB

After

Width:  |  Height:  |  Size: 69 KiB

43
src/assets/vuetable.json Normal file
View File

@ -0,0 +1,43 @@
{
"list": [{
"date": "1997-11-11",
"name": "林丽",
"address": "吉林省 辽源市 龙山区"
}, {
"date": "1987-09-24",
"name": "文敏",
"address": "江西省 萍乡市 芦溪县"
}, {
"date": "1996-08-08",
"name": "杨秀兰",
"address": "黑龙江省 黑河市 五大连池市"
}, {
"date": "1978-06-18",
"name": "魏强",
"address": "广东省 韶关市 始兴县"
}, {
"date": "1977-07-09",
"name": "石秀兰",
"address": "江苏省 宿迁市 宿豫区"
}, {
"date": "1994-09-20",
"name": "朱洋",
"address": "海外 海外 -"
}, {
"date": "1980-01-22",
"name": "傅敏",
"address": "海外 海外 -"
}, {
"date": "1985-10-10",
"name": "毛明",
"address": "内蒙古自治区 包头市 九原区"
}, {
"date": "1975-09-08",
"name": "何静",
"address": "西藏自治区 阿里地区 普兰县"
}, {
"date": "1970-06-07",
"name": "郭秀英",
"address": "四川省 巴中市 恩阳区"
}]
}

2
src/components/common/Header.vue
View File

@ -23,7 +23,7 @@
<span class="btn-bell-badge" v-if="message"></span>
</div>
<!-- 用户头像 -->
<div class="user-avator"><img src="static/img/img.jpg"></div>
<div class="user-avator"><img src="../../assets/img/img.jpg"></div>
<!-- 用户名下拉菜单 -->
<el-dropdown class="user-name" trigger="click" @command="handleCommand">
<span class="el-dropdown-link">

16
src/components/common/Sidebar.vue
View File

@ -94,12 +94,22 @@
},
{
icon: 'el-icon-rank',
index: 'drag',
title: '拖拽列表'
index: '6',
title: '拖拽组件',
subs: [
{
index: 'drag',
title: '拖拽列表',
},
{
index: 'dialog',
title: '拖拽弹框',
}
]
},
{
icon: 'el-icon-lx-warn',
index: '6',
index: '7',
title: '错误处理',
subs: [
{

16
src/components/common/Tags.vue
View File

@ -89,6 +89,22 @@
},
created(){
this.setTags(this.$route);
// 监听关闭当前页面的标签页
bus.$on('close_current_tags', () => {
for (let i = 0, len = this.tagsList.length; i < len; i++) {
const item = this.tagsList[i];
if(item.path === this.$route.fullPath){
if(i < len - 1){
this.$router.push(this.tagsList[i+1].path);
}else if(i > 0){
this.$router.push(this.tagsList[i-1].path);
}else{
this.$router.push('/');
}
this.tagsList.splice(i, 1);
}
}
})
}
}

80
src/components/common/directives.js Normal file
View File

@ -0,0 +1,80 @@
import Vue from 'vue';
// v-dialogDrag: 弹窗拖拽属性
Vue.directive('dialogDrag', {
bind(el, binding, vnode, oldVnode) {
const dialogHeaderEl = el.querySelector('.el-dialog__header');
const dragDom = el.querySelector('.el-dialog');
dialogHeaderEl.style.cssText += ';cursor:move;'
dragDom.style.cssText += ';top:0px;'
// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
const sty = (() => {
if (window.document.currentStyle) {
return (dom, attr) => dom.currentStyle[attr];
} else {
return (dom, attr) => getComputedStyle(dom, false)[attr];
}
})()
dialogHeaderEl.onmousedown = (e) => {
// 鼠标按下，计算当前元素距离可视区的距离
const disX = e.clientX - dialogHeaderEl.offsetLeft;
const disY = e.clientY - dialogHeaderEl.offsetTop;
const screenWidth = document.body.clientWidth; // body当前宽度
const screenHeight = document.documentElement.clientHeight; // 可见区域高度(应为body高度，可某些环境下无法获取)
const dragDomWidth = dragDom.offsetWidth; // 对话框宽度
const dragDomheight = dragDom.offsetHeight; // 对话框高度
const minDragDomLeft = dragDom.offsetLeft;
const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
const minDragDomTop = dragDom.offsetTop;
const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;
// 获取到的值带px 正则匹配替换
let styL = sty(dragDom, 'left');
let styT = sty(dragDom, 'top');
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
if (styL.includes('%')) {
styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100);
styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100);
} else {
styL = +styL.replace(/\px/g, '');
styT = +styT.replace(/\px/g, '');
};
document.onmousemove = function (e) {
// 通过事件委托，计算移动的距离
let left = e.clientX - disX;
let top = e.clientY - disY;
// 边界处理
if (-(left) > minDragDomLeft) {
left = -(minDragDomLeft);
} else if (left > maxDragDomLeft) {
left = maxDragDomLeft;
}
if (-(top) > minDragDomTop) {
top = -(minDragDomTop);
} else if (top > maxDragDomTop) {
top = maxDragDomTop;
}
// 移动当前元素
dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;
};
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
};
}
}
})

5
src/components/page/BaseTable.vue
View File

@ -72,7 +72,7 @@
name: 'basetable',
data() {
return {
url: './static/vuetable.json',
url: './vuetable.json',
tableData: [],
cur_page: 1,
multipleSelection: [],
@ -209,4 +209,7 @@
.red{
color: #ff0000;
}
.mr10{
margin-right: 10px;
}
</style>

41
src/components/page/Dashboard.vue
View File

@ -4,7 +4,7 @@
<el-col :span="8">
<el-card shadow="hover" class="mgb20" style="height:252px;">
<div class="user-info">
<img src="static/img/img.jpg" class="user-avator" alt="">
<img src="../../assets/img/img.jpg" class="user-avator" alt="">
<div class="user-info-cont">
<div class="user-info-name">{{name}}</div>
<div>{{role}}</div>
@ -180,8 +180,7 @@
bgColor: '#F5F8FD',
bottomPadding: 30,
topPadding: 30
},
collapse: false
}
}
},
components: {
@ -193,23 +192,15 @@
}
},
created(){
bus.$on('collapse', msg => {
this.collapse = msg;
});
// 调用renderChart方法对图表进行重新渲染
window.addEventListener('resize', ()=>{
this.$refs.bar.renderChart();
this.$refs.line.renderChart();
})
this.handleListener();
this.changeDate();
},
watch: {
collapse(){
setTimeout(() => {
this.$refs.bar.renderChart();
this.$refs.line.renderChart();
}, 300);
}
activated(){
this.handleListener();
},
deactivated(){
window.removeEventListener('resize', this.renderChart);
bus.$off('collapse', this.handleBus);
},
methods: {
changeDate(){
@ -218,6 +209,20 @@
const date = new Date(now - (6 - index) * 86400000);
item.name = `${date.getFullYear()}/${date.getMonth()+1}/${date.getDate()}`
})
},
handleListener(){
bus.$on('collapse', this.handleBus);
// 调用renderChart方法对图表进行重新渲染
window.addEventListener('resize', this.renderChart)
},
handleBus(msg){
setTimeout(() => {
this.renderChart()
}, 300);
},
renderChart(){
this.$refs.bar.renderChart();
this.$refs.line.renderChart();
}
}
}

36
src/components/page/DragDialog.vue Normal file
View File

@ -0,0 +1,36 @@
<template>
<section class="main">
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-rank"></i> 拖拽组件</el-breadcrumb-item>
<el-breadcrumb-item>拖拽弹框</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="container">
<p>通过指令 v-dialogDrag 使 Dialog 对话框具有可拖拽的功能。</p>
<br>
<el-button type="primary" @click="visible = true;">点我弹框</el-button>
</div>
<el-dialog v-dialogDrag title="拖拽弹框" center :visible.sync="visible" width="30%">
我是一个可以拖拽的对话框！
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取 消</el-button>
<el-button type="primary" @click="visible = false">确 定</el-button>
</span>
</el-dialog>
</section>
</template>
<script>
export default {
data(){
return {
visible: false
}
}
}
</script>
<style>
</style>

18
src/components/page/DragList.vue
View File

@ -2,7 +2,8 @@
<section class="main">
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-rank"></i> 拖拽排序</el-breadcrumb-item>
<el-breadcrumb-item><i class="el-icon-rank"></i> 拖拽组件</el-breadcrumb-item>
<el-breadcrumb-item>拖拽排序</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="container">
@ -15,7 +16,7 @@
<div class="item-title">todo</div>
<draggable v-model="todo" @remove="removeHandle" :options="dragOptions">
<transition-group tag="div" id="todo" class="item-ul">
<div v-for="(item,index) in todo" class="drag-list" :key="index">
<div v-for="item in todo" class="drag-list" :key="item.id">
{{item.content}}
</div>
</transition-group>
@ -25,7 +26,7 @@
<div class="item-title">doing</div>
<draggable v-model="doing" @remove="removeHandle" :options="dragOptions">
<transition-group tag="div" id="doing" class="item-ul">
<div v-for="(item,index) in doing" class="drag-list" :key="index">
<div v-for="item in doing" class="drag-list" :key="item.id">
{{item.content}}
</div>
</transition-group>
@ -35,7 +36,7 @@
<div class="item-title">done</div>
<draggable v-model="done" @remove="removeHandle" :options="dragOptions">
<transition-group tag="div" id="done" class="item-ul">
<div v-for="(item,index) in done" class="drag-list" :key="index">
<div v-for="item in done" class="drag-list" :key="item.id">
{{item.content}}
</div>
</transition-group>
@ -60,34 +61,43 @@
},
todo: [
{
id: 1,
content: '开发图表组件'
},
{
id: 2,
content: '开发拖拽组件'
},
{
id: 3,
content: '开发权限测试组件'
}
],
doing: [
{
id: 1,
content: '开发登录注册页面'
},
{
id: 2,
content: '开发头部组件'
},
{
id: 3,
content: '开发表格相关组件'
},
{
id: 4,
content: '开发表单相关组件'
}
],
done:[
{
id: 1,
content: '初始化项目，生成工程目录，完成相关配置'
},
{
id: 2,
content: '开发项目整体框架'
}
]

2
src/components/page/Login.vue
View File

@ -61,7 +61,7 @@
position: relative;
width:100%;
height:100%;
background-image: url(../../assets/login-bg.jpg);
background-image: url(../../assets/img/login-bg.jpg);
background-size: 100%;
}
.ms-title{

2
src/components/page/Upload.vue
View File

@ -50,7 +50,7 @@
name: 'upload',
data: function(){
return {
defaultSrc: './static/img/img.jpg',
defaultSrc: require('../../assets/img/img.jpg'),
fileList: [],
imgSrc: '',
cropImg: '',

29
src/main.js
View File

@ -1,37 +1,42 @@
import Vue from 'vue';
import App from './App';
import router from './router';
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; // 默认主题
import 'element-ui/lib/theme-chalk/index.css'; // 默认主题
// import '../static/css/theme-green/index.css'; // 浅绿色主题
import '../static/css/icon.css';
import './assets/css/icon.css';
import './components/common/directives';
import "babel-polyfill";
Vue.use(ElementUI, { size: 'small' });
Vue.config.productionTip = false
Vue.use(ElementUI, {
size: 'small'
});
Vue.prototype.$axios = axios;
//使用钩子函数对路由进行权限跳转
router.beforeEach((to, from, next) => {
const role = localStorage.getItem('ms_username');
if(!role && to.path !== '/login'){
if (!role && to.path !== '/login') {
next('/login');
}else if(to.meta.permission){
} else if (to.meta.permission) {
// 如果是管理员权限则可进入，这里只是简单的模拟管理员权限而已
role === 'admin' ? next() : next('/403');
}else{
} else {
// 简单的判断IE10及以下不进入富文本编辑器，该组件不兼容
if(navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor'){
if (navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor') {
Vue.prototype.$alert('vue-quill-editor组件不兼容IE10及以下浏览器，请使用更高版本的浏览器查看', '浏览器不兼容通知', {
confirmButtonText: '确定'
});
}else{
} else {
next();
}
}
})
new Vue({
router,
render: h => h(App)
}).$mount('#app');
}).$mount('#app')

6
src/router/index.js
View File

@ -69,6 +69,12 @@ export default new Router({
component: resolve => require(['../components/page/DragList.vue'], resolve),
meta: { title: '拖拽列表' }
},
{
// 拖拽Dialog组件
path: '/dialog',
component: resolve => require(['../components/page/DragDialog.vue'], resolve),
meta: { title: '拖拽弹框' }
},
{
// 权限页面
path: '/permission',

0
static/.gitkeep
View File

6
static/js/vendor.dll.js
View File

File diff suppressed because one or more lines are too long

19
vue.config.js Normal file
View File

@ -0,0 +1,19 @@
module.exports = {
baseUrl: './',
productionSourceMap: false,
devServer: {
proxy: {
'/api':{
target:'http://jsonplaceholder.typicode.com',
changeOrigin:true,
pathRewrite:{
'/api':''
}
},
'/ms':{
target: 'https://www.easy-mock.com/mock/592501a391470c0ac1fab128',
changeOrigin: true
}
}
}
}