umbrella22
......@@ -24,7 +24,7 @@ else if (process.env.BUILD_TARGET === 'web') web()
else build()
function clean () {
del.sync(['build/*', '!build/icons', '!build/icons/icon.*'])
del.sync(['build/*', '!build/icons','!build/lib','!build/lib/electron-build.*', '!build/icons/icon.*'])
console.log(`\n${doneLog}\n`)
process.exit()
}
......
......@@ -5,6 +5,7 @@ const electron = require('electron')
const path = require('path')
const { say } = require('cfonts')
const { spawn } = require('child_process')
const config = require('../config')
const webpack = require('webpack')
const WebpackDevServer = require('webpack-dev-server')
const webpackHotMiddleware = require('webpack-hot-middleware')
......@@ -37,6 +38,28 @@ function logStats(proc, data) {
console.log(log)
}
function removeJunk(chunk) {
if (config.dev.removeElectronJunk) {
// Example: 2018-08-10 22:48:42.866 Electron[90311:4883863] *** WARNING: Textured window <AtomNSWindow: 0x7fb75f68a770>
if (/\d+-\d+-\d+ \d+:\d+:\d+\.\d+ Electron(?: Helper)?\[\d+:\d+] /.test(chunk)) {
return false;
}
// Example: [90789:0810/225804.894349:ERROR:CONSOLE(105)] "Uncaught (in promise) Error: Could not instantiate: ProductRegistryImpl.Registry", source: chrome-devtools://devtools/bundled/inspector.js (105)
if (/\[\d+:\d+\/|\d+\.\d+:ERROR:CONSOLE\(\d+\)\]/.test(chunk)) {
return false;
}
// Example: ALSA lib confmisc.c:767:(parse_card) cannot find card '0'
if (/ALSA lib [a-z]+\.c:\d+:\([a-z_]+\)/.test(chunk)) {
return false;
}
}
return chunk;
}
function startRenderer() {
return new Promise((resolve) => {
rendererConfig.entry.renderer = [path.join(__dirname, 'dev-client')].concat(rendererConfig.entry.renderer)
......@@ -128,10 +151,10 @@ function startElectron() {
electronProcess = spawn(electron, args)
electronProcess.stdout.on('data', data => {
electronLog(data, 'blue')
electronLog(removeJunk(data), 'blue')
})
electronProcess.stderr.on('data', data => {
electronLog(data, 'red')
electronLog(removeJunk(data), 'red')
})
electronProcess.on('close', () => {
......
......@@ -7,6 +7,11 @@ const { dependencies } = require('../package.json')
const webpack = require('webpack')
const BabiliWebpackPlugin = require('babili-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
let mainConfig = {
entry: {
......@@ -49,7 +54,10 @@ let mainConfig = {
path: path.join(__dirname, '../dist/electron')
},
plugins: [
new webpack.NoEmitOnErrorsPlugin()
new webpack.NoEmitOnErrorsPlugin(),
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: resolve('dist/electron')
})
],
resolve: {
......
......@@ -11,6 +11,7 @@ const BabiliWebpackPlugin = require('babili-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader')
function resolve(dir) {
......@@ -144,11 +145,23 @@ let rendererConfig = {
minify: {
collapseWhitespace: true,
removeAttributeQuotes: true,
removeComments: true
removeComments: true,
minifyJS: true,
minifyCSS: true
},
nodeModules: process.env.NODE_ENV !== 'production'
? resolve('node_modules')
: false
templateParameters(compilation, assets, options) {
return {
compilation: compilation,
webpack: compilation.getStats().toJson(),
webpackConfig: compilation.options,
htmlWebpackPlugin: {
files: assets,
options: options
},
process,
};
},
nodeModules: false
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
......@@ -201,6 +214,24 @@ if (process.env.NODE_ENV === 'production') {
minimize: true
})
)
rendererConfig.optimization = {
minimizer: [
new TerserPlugin({
test: /\.js(\?.*)?$/i,
extractComments: false,
cache: false,
sourceMap: false,
terserOptions: {
warnings: false,
compress: {
warnings: false,
drop_console: true,
drop_debugger: true,
pure_funcs: ['console.log']
},
}
})]
}
}
module.exports = rendererConfig
......
.DS_Store
node_modules/
build/
build/win-ia32-unpacked/
build/win-unpacked/
/dist/
npm-debug.log*
yarn-debug.log*
......@@ -13,4 +14,4 @@ yarn-error.log*
*.ntvs*
*.njsproj
*.sln
package-lock.json
server/client/electron-vue-admin Setup 0.0.1.exe
......
MIT License
Original work Copyright (c) 2016 Greg Holguin
Modified work Copyright (c) 2019-present umbrella22
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
\ No newline at end of file
# Electron-Vue-template
> 这是一个基于electron的vue最基本的模板,其中前端技术栈则用到vue全家桶,axios作为http请求,而本地数据库则是nedb。现在合并了花裤衩的vue-admin中的东西,由于我司需求方面,所以侧栏的渲染比较新奇,侧栏样式是在` src/renderer/layout/components/sidebar `文件夹中,大家可以根据需求进行个性化更改,鄙人后续会将这个和花裤衩大大的同步.
> This is a project based on electron-vue, using the elementUI, vuex, vue-router, axios technology stack. This project is divided into two branches. The master maintains the original project structure and features for dependency updates, and the SynchronizedUpdates branch. It keeps the original file structure and the code part is completely customized by me personally; it includes: a complete background management interface, nedb database package, and two complete update download methods. If you feel redundant, you can delete it yourself.
- 因为花裤衩大大的ELECTRON版本已经一年没有更新了,而且ELECTRON,vue,elementui,都已经迭代太多,刚好我司有这方面的需求,我就在vue-electron脚手架生成的项目基础上,将花裤衩大大的项目核心组件提取出来合并到这个项目中,在我简单的封装了axios和db.以及electron常用的信息弹窗,错误弹窗,稍后的日子中我会慢慢完善这个文档,暂时如果有人需要使用这个项目,还请多多包含,因为文档不够完善,只能用过直接看代码,在路由页面我有注释.
#### 如何安装
[中文文档地址](https://github.com/umbrella22/electron-vue-template/blob/master/README_CN.md)
[国内访问地址](https://gitee.com/Zh-Sky/electron-vue-template)
#### Build Setup
``` bash
# 首先全局安装nrm
npm i -g nrm
# 然后使用nrm切换为淘宝源,或者你已经切换了npm的源也是可以的,强烈不建议使用cnpm如果你不想看到什么奇奇怪怪的爆红问题
nrm ls
nrm use taobao
# 安装依赖,这里有个问题,可能ELECTRON或者postcss会由于玄学原因安装失败,此时我推荐使用cnpm安装依赖然后!删除那个node_modules包,重新npm i,这样做的原因是
# ELECTRON只要下载了一次您自己没有清除缓存的话,就可以直接使用上次的安装包,这样通过cnpm安装完成之后,一定!要删除一次依赖包!一定哦!
# 再使用npm安装就会使用缓存了,免去那个魔法的过程~~
# 或者可以使用更加优秀的yarn。
# install dependencies
npm install or yarn install
# 启动之后,会在9080端口监听
# 需要重新运行一次此命令
npm run dev
# serve with hot reload at localhost:9080
npm run dev or yarn dev
# build命令在不同系统环境中,需要的的不一样,需要自己根据自身环境进行配置
npm run build
# build electron application for production
npm run build or yarn build
# 启动单元测试模块,但是需要注意的是,我没有更新依赖,所以很可能会导致失败
# run unit & end-to-end tests
npm test
......@@ -33,13 +25,5 @@ npm test
---
这个项目使用了 [electron-vue](https://github.com/SimulatedGREG/electron-vue)@[8fae476](https://github.com/SimulatedGREG/electron-vue/tree/8fae4763e9d225d3691b627e83b9e09b56f6c935) using [vue-cli](https://github.com/vuejs/vue-cli). 文档你们可以在这里看到: [here](https://simulatedgreg.gitbooks.io/electron-vue/content/index.html).
这是花裤衩大大原本的[地址](https://github.com/PanJiaChen/electron-vue-admin)
# 更新日志
- 2019年8月13日更新:将新分支的所有依赖均更新至最新(但是我觉得,babel似乎有些东西不需要,还是保留着吧,日后测试后移除)依赖更新之后通过打包和dev测试
- 2019年8月12日更新:添加一个新分支,该新分支后续将会持续保持ELECTRON(包括其对应的辅助组件)的版本处于最新状态,去除了单元测试和一些无用的文件。master分支中则是为路由添加新参数具体
用途,详看路由中的注释
- 2019年8月10日更新:添加各个平台的build脚本,当您直接使用build时,则会打包您当前操作系统对应的安装包,mac需要在macos上才能进行打包,而linux打包win的话,需要wine的支持,否则会失败
- 2019年8月4日更新:修正原webpack配置中没有将config注入的小问题,添加了拦截实例,修改了侧栏,侧栏需要底色的请勿更新,此更新可能会导致侧栏底色无法完全覆盖(待修正),添加axios接口示例,待测。
- 2019年8月1日更新:将node-sass版本更新至最新版本,尝试修正由于nodejs环境是12版导致失败(注意!此次更新可能会导致32位系统或者nodejs版本低于10的用户安装依赖报错)去除路由表中重复路由,解决控制台无端报错问题。
\ No newline at end of file
This project was generated with [electron-vue](https://github.com/SimulatedGREG/electron-vue)@[8fae476](https://github.com/SimulatedGREG/electron-vue/tree/8fae4763e9d225d3691b627e83b9e09b56f6c935) using [vue-cli](https://github.com/vuejs/vue-cli). Documentation about the original structure can be found [here](https://simulatedgreg.gitbooks.io/electron-vue/content/index.html).
Manage interface code address [here](https://github.com/PanJiaChen/electron-vue-admin)
\ No newline at end of file
......
# Electron-Vue-template
> 这是一个基于electron的vue最基本的模板,其中前端技术栈则用到vue全家桶,axios作为http请求,而本地数据库则是nedb。现在合并了花裤衩的vue-admin中的东西,由于我司需求方面,所以侧栏的渲染比较新奇,侧栏样式是在` src/renderer/layout/components/sidebar `文件夹中,大家可以根据需求进行个性化更改,鄙人后续会将这个和花裤衩大大的同步.
- 因为花裤衩大大的ELECTRON版本已经一年没有更新了,而且ELECTRON,vue,elementui,都已经迭代太多,刚好我司有这方面的需求,我就在vue-electron脚手架生成的项目基础上,将花裤衩大大的项目核心组件提取出来合并到这个项目中,在我简单的封装了axios和db.以及electron常用的信息弹窗,错误弹窗,稍后的日子中我会慢慢完善这个文档,暂时如果有人需要使用这个项目,还请多多包含,因为文档不够完善,只能用过直接看代码,在路由页面我有注释.
#### 如何安装
``` bash
# 首先全局安装nrm
npm i -g nrm
# 然后使用nrm切换为淘宝源,或者你已经切换了npm的源也是可以的,强烈不建议使用cnpm如果你不想看到什么奇奇怪怪的爆红问题
nrm ls
nrm use taobao
# 安装依赖,这里有个问题,可能ELECTRON或者postcss会由于玄学原因安装失败,此时我推荐使用cnpm安装依赖然后!删除那个node_modules包,重新npm i,这样做的原因是
# ELECTRON只要下载了一次您自己没有清除缓存的话,就可以直接使用上次的安装包,这样通过cnpm安装完成之后,一定!要删除一次依赖包!一定哦!
# 再使用npm安装就会使用缓存了,免去那个魔法的过程~~
# 或者可以使用更加优秀的yarn。
npm install or yarn install
# 启动之后,会在9080端口监听
# 需要重新运行一次此命令
npm run dev
# build命令在不同系统环境中,需要的的不一样,需要自己根据自身环境进行配置
npm run build
# 启动单元测试模块,但是需要注意的是,我没有更新依赖,所以很可能会导致失败
npm test
# 如若实在不行无法安装electron依赖,请使用
npm config edit
# 该命令会打开npm的配置文件,请在registry=https://registry.npm.taobao.org/这行代码后的下一行添加
# electron_mirror=https://cdn.npm.taobao.org/dist/electron/ 和 sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
# 然后关闭该窗口,重启命令行,删除node_modules文件夹,并重新安装依赖即可
```
---
这个项目使用了 [electron-vue](https://github.com/SimulatedGREG/electron-vue)@[8fae476](https://github.com/SimulatedGREG/electron-vue/tree/8fae4763e9d225d3691b627e83b9e09b56f6c935) using [vue-cli](https://github.com/vuejs/vue-cli). 文档你们可以在这里看到: [这里](https://simulatedgreg.gitbooks.io/electron-vue/content/index.html).
这是花裤衩大大原本的[地址](https://github.com/PanJiaChen/electron-vue-admin)
# 更新日志
- 2019年12月18日更新:例行更新了依赖,以及,我在build文件夹中加入了windows打包时候可能会用到的依赖,具体使用方法在压缩包内。
- 2019年11月11日更新:祝大家光棍节钱包快乐~~,今天的更新没有什么亮点,都是针对依赖的升级,新功能的添加可能会进入一个冷淡期,我现在也没有了好点子,也要步入学习了,可能master分支以后就是稳定的更新依赖,而另一个分支的话,则是我的一些觉得大家都会遇到的一些小问题,我尽量都实现出来。
- 2019年10月18日更新:不知不觉中倒也过去了一个月,啊哈哈这次更新给大家带来的是updater的示例,这依旧是个实验特性,所以在新分支中才可以使用,使用方式则是,安装依赖,
运行 `npm run update:serve` 来启动这个node服务器,然后您如果想在dev的时候就看到效果需要先运行build拿到 `latest.yml`文件,然后将其更名为 `dev-app-update.yml` 放入`dist/electron`中,和`main.js`同级,然后你需要关闭或者排除webpack的自动清除插件(我已经屏蔽了,所以无需大家自己动手),然后点击软件中的检查更新即可,记住当软件正在运行的时候,是无法应用安装的,所以您需要关闭之后方可安装。这并不是一个错误!
- 2019年9月18日更新:修正生产环境时,没有正确去除控制台输出的问题,双分支例行更新依赖,修正ui部分颜色问题,日后准备使用element主题功能
- 2019年9月16日更新:去除easymock,直接粗暴更改登陆验证,如有需要请自行修改,例行更新新分支依赖,修正当自定义头部和系统头部互换时,布局不会做出相应变化的问题。
- 2019年9月3日更新:修正了当nodejs >= 12时,出现process未定义的问题,新分支加入自定义头部,现在我们可以做出更cooool~~的效果了。
- 2019年8月20日更新:添加登录拦击,实现登录功能,在dev中加入关闭ELECTRON无用控制台输出,新分支例行更新依赖,加入生产环境屏蔽f12按键。
- 2019年8月13日更新:将新分支的所有依赖均更新至最新(但是我觉得,babel似乎有些东西不需要,还是保留着吧,日后测试后移除)依赖更新之后通过打包和dev测试
- 2019年8月12日更新:添加一个新分支,该新分支后续将会持续保持ELECTRON(包括其对应的辅助组件)的版本处于最新状态,去除了单元测试和一些无用的文件。master分支中则是为路由添加新参数具体
用途,详看路由中的注释
- 2019年8月10日更新:添加各个平台的build脚本,当您直接使用build时,则会打包您当前操作系统对应的安装包,mac需要在macos上才能进行打包,而linux打包win的话,需要wine的支持,否则会失败
- 2019年8月4日更新:修正原webpack配置中没有将config注入的小问题,添加了拦截实例,修改了侧栏,侧栏需要底色的请勿更新,此更新可能会导致侧栏底色无法完全覆盖(待修正),添加axios接口示例,待测。
- 2019年8月1日更新:将node-sass版本更新至最新版本,尝试修正由于nodejs环境是12版导致失败(注意!此次更新可能会导致32位系统或者nodejs版本低于10的用户安装依赖报错)去除路由表中重复路由,解决控制台无端报错问题。
This project was generated with [electron-vue](https://github.com/SimulatedGREG/electron-vue)@[8fae476](https://github.com/SimulatedGREG/electron-vue/tree/8fae4763e9d225d3691b627e83b9e09b56f6c935) using [vue-cli](https://github.com/vuejs/vue-cli). Documentation about the original structure can be found [here](https://simulatedgreg.gitbooks.io/electron-vue/content/index.html).
# Electron-Vue-template
> An electron-vue project
#### Build Setup
``` bash
# For Chinese Developers
# install nrm
npm i -g nrm
# Switch to Taobao Source with NRM
nrm ls
nrm use taobao
# install dependencies
npm install
# serve with hot reload at localhost:9080
npm run dev
# build electron application for production
npm run build
# run unit & end-to-end tests
npm test
```
---
This project was generated with [electron-vue](https://github.com/SimulatedGREG/electron-vue)@[8fae476](https://github.com/SimulatedGREG/electron-vue/tree/8fae4763e9d225d3691b627e83b9e09b56f6c935) using [vue-cli](https://github.com/vuejs/vue-cli). Documentation about the original structure can be found [here](https://simulatedgreg.gitbooks.io/electron-vue/content/index.html).
此文件太大,无法显示。
module.exports = {
NODE_ENV: '"development"',
BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"'
BASE_API: '""'
}
......
......@@ -3,6 +3,7 @@ module.exports = {
env: require('./prod.env')
},
dev: {
env: require('./dev.env')
env: require('./dev.env'),
removeElectronJunk: true
}
}
......
module.exports = {
NODE_ENV: '"production"',
BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"'
BASE_API: '""'
}
......
文件属性发生变化
此文件的差异太大,无法显示。
......@@ -6,22 +6,26 @@
"license": "MIT",
"main": "./dist/electron/main.js",
"scripts": {
"dev": "node .electron-vue/dev-runner.js",
"build": "node .electron-vue/build.js && electron-builder",
"build:win32": "node .electron-vue/build.js && electron-builder --win --ia32",
"build:win64": "node .electron-vue/build.js && electron-builder --win --x64",
"build:mac": "node .electron-vue/build.js && electron-builder --platform=mac",
"build:mac": "node .electron-vue/build.js && electron-builder --mac",
"build:dir": "node .electron-vue/build.js && electron-builder --dir",
"build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
"build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
"dev": "node .electron-vue/dev-runner.js",
"e2e": "npm run pack && mocha test/e2e",
"pack": "npm run pack:main && npm run pack:renderer",
"pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
"pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
"e2e": "npm run pack && mocha test/e2e",
"test": "npm run unit && npm run e2e",
"unit": "karma start test/unit/karma.conf.js"
},
"build": {
"nsis": {
"oneClick": false,
"allowToChangeInstallationDirectory": true
},
"productName": "electron-vue-admin",
"appId": "org.simulatedgreg.electron-vue",
"directories": {
......@@ -58,39 +62,40 @@
"dependencies": {
"axios": "^0.19.0",
"date-fns": "^1.30.1",
"element-ui": "^2.11.1",
"js-cookie": "^2.2.0",
"element-ui": "^2.13.0",
"js-cookie": "^2.2.1",
"nedb": "^1.8.0",
"nprogress": "^0.2.0",
"sortablejs": "^1.10.0-rc3",
"vue": "^2.6.10",
"sortablejs": "^1.10.1",
"vue": "^2.6.11",
"vue-electron": "^1.0.6",
"vue-router": "^3.0.7",
"vuex": "^3.1.1",
"vue-router": "^3.1.3",
"vuex": "^3.1.2",
"vuex-electron": "^1.0.3"
},
"devDependencies": {
"ajv": "^6.5.0",
"ajv": "^6.10.2",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-loader": "^7.1.4",
"babel-plugin-dynamic-import-webpack": "^1.1.0",
"babel-plugin-istanbul": "^4.1.6",
"babel-plugin-istanbul": "^5.2.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.26.0",
"babili-webpack-plugin": "^0.1.2",
"cfonts": "^2.1.2",
"chai": "^4.1.2",
"chalk": "^2.4.1",
"copy-webpack-plugin": "^4.5.1",
"cross-env": "^5.1.6",
"css-loader": "^3.1.0",
"del": "^5.0.0",
"cfonts": "^2.4.5",
"chai": "^4.2.0",
"chalk": "^3.0.0",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.1.1",
"cross-env": "^6.0.3",
"css-loader": "^3.4.0",
"del": "^5.1.0",
"devtron": "^1.4.0",
"electron": "^5.0.7",
"electron-builder": "^21.1.1",
"electron": "^6.1.7",
"electron-builder": "^21.2.0",
"electron-debug": "^3.0.1",
"electron-devtools-installer": "^2.2.4",
"eslint": "^4.19.1",
......@@ -102,7 +107,7 @@
"eslint-plugin-node": "^6.0.1",
"eslint-plugin-promise": "^3.8.0",
"eslint-plugin-standard": "^3.1.0",
"file-loader": "^1.1.11",
"file-loader": "^4.2.0",
"html-webpack-plugin": "^3.2.0",
"inject-loader": "^4.0.1",
"karma": "^2.0.2",
......@@ -113,25 +118,26 @@
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "^0.0.32",
"karma-webpack": "^3.0.0",
"mini-css-extract-plugin": "0.8.0",
"mini-css-extract-plugin": "0.9.0",
"mocha": "^5.2.0",
"multispinner": "^0.2.1",
"node-loader": "^0.6.0",
"node-sass": "^4.12.0",
"require-dir": "^1.0.0",
"sass-loader": "^7.0.3",
"node-sass": "^4.13.0",
"require-dir": "^1.2.0",
"sass-loader": "^8.0.0",
"spectron": "^3.8.0",
"style-loader": "^0.21.0",
"style-loader": "^1.1.1",
"svg-sprite-loader": "^4.1.6",
"url-loader": "^2.1.0",
"terser-webpack-plugin": "^2.3.1",
"url-loader": "^3.0.0",
"vue-html-loader": "^1.2.4",
"vue-loader": "^15.7.1",
"vue-loader": "^15.8.3",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.41.4",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1",
"webpack-hot-middleware": "^2.25.0",
"webpack-merge": "^4.2.1"
"webpack-merge": "^4.2.2"
}
}
......
......@@ -32,7 +32,9 @@ function createWindow () {
backgroundColor: '#fffff',
titleBarStyle: 'hidden',
webPreferences: {
nodeIntegration: true
nodeIntegration: true,
webSecurity: false,
experimentalFeatures: true
}
// 隐藏边框
// frame: false,
......
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1577517047047" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6202" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 128q69.675 0 135.51 21.163t115.498 54.997 93.483 74.837 73.685 82.006 51.67 74.837 32.17 54.827L1024 512q-2.347 4.992-6.315 13.483T998.87 560.17t-31.658 51.669-44.331 59.99-56.832 64.34-69.504 60.16-82.347 51.5-94.848 34.687T512 896q-69.675 0-135.51-21.163t-115.498-54.826-93.483-74.326-73.685-81.493-51.67-74.496-32.17-54.997L0 513.707q2.347-4.992 6.315-13.483t18.816-34.816 31.658-51.84 44.331-60.33 56.832-64.683 69.504-60.331 82.347-51.84 94.848-34.816T512 128.085z m0 85.333q-46.677 0-91.648 12.331t-81.152 31.83-70.656 47.146-59.648 54.485-48.853 57.686-37.675 52.821-26.325 43.99q12.33 21.674 26.325 43.52t37.675 52.351 48.853 57.003 59.648 53.845T339.2 767.02t81.152 31.488T512 810.667t91.648-12.331 81.152-31.659 70.656-46.848 59.648-54.186 48.853-57.344 37.675-52.651T927.957 512q-12.33-21.675-26.325-43.648t-37.675-52.65-48.853-57.345-59.648-54.186-70.656-46.848-81.152-31.659T512 213.334z m0 128q70.656 0 120.661 50.006T682.667 512 632.66 632.661 512 682.667 391.339 632.66 341.333 512t50.006-120.661T512 341.333z m0 85.334q-35.328 0-60.33 25.002T426.666 512t25.002 60.33T512 597.334t60.33-25.002T597.334 512t-25.002-60.33T512 426.666z" p-id="6203"></path></svg>
\ No newline at end of file
......@@ -28,54 +28,54 @@ const user = {
actions: {
// 登录
Login ({ commit }, userInfo) {
console.log(userInfo)
const username = userInfo.username.trim()
return new Promise((resolve, reject) => {
const data = {
username: username,
password: userInfo.password
}
login(data).then(response => {
const data = response.data.data
setToken(data.token)
commit('SET_TOKEN', data.token)
resolve()
}).catch(error => {
reject(error)
})
// login(data).then(response => {
// const data = response.data
// setToken(data.token)
// commit('SET_TOKEN', data.token)
// resolve()
// }).catch(error => {
// reject(error)
// })
commit('SET_TOKEN', 'admin')
resolve()
})
},
// 获取用户信息
GetInfo ({ commit, state }) {
return new Promise((resolve, reject) => {
getInfo(state.token).then(response => {
const data = response.data.data
if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
commit('SET_ROLES', data.roles)
} else {
reject('getInfo: roles must be a non-null array !')
}
commit('SET_NAME', data.name)
commit('SET_AVATAR', data.avatar)
resolve(response)
}).catch(error => {
reject(error)
})
// getInfo(state.token).then(response => {
// const data = response.data
// if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
// commit('SET_ROLES', data.roles)
// } else {
// reject('getInfo: roles must be a non-null array !')
// }
// commit('SET_NAME', data.name)
// commit('SET_AVATAR', data.avatar)
// resolve(response)
// }).catch(error => {
// reject(error)
// })
commit('SET_ROLES', ['admin'])
commit('SET_NAME', 'Super Admin')
commit('SET_AVATAR', 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif')
resolve()
})
},
// 登出
LogOut ({ commit, state }) {
return new Promise((resolve, reject) => {
logout(state.token).then(() => {
commit('SET_TOKEN', '')
commit('SET_ROLES', [])
removeToken()
resolve()
}).catch(error => {
reject(error)
})
// logout(state.token).then(() => {
commit('SET_TOKEN', '')
commit('SET_ROLES', [])
removeToken()
resolve()
// }).catch(error => {
// reject(error)
// })
})
},
......
//to reset element-ui default css
@import './color.scss';
//to reset element-ui default css
.el-upload {
input[type="file"] {
display: none !important;
......@@ -27,3 +28,11 @@
}
}
}
// 设置当选中时,popr的背景色被设置为白色的尴尬场景
.el-menu--vertical{
/deep/.el-menu--popup{
/deep/ .el-menu-item.is-active{
background-color: $Theme-color !important;
}
}
}
\ No newline at end of file
......
......@@ -3,6 +3,7 @@
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';
@import './color.scss';
body {
-moz-osx-font-smoothing: grayscale;
......
<template>
<div class="login-container">
<el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
<h3 class="title">后台管理框架</h3>
<el-form-item prop="username">
<span class="svg-container svg-container_login">
<svg-icon icon-class="user" />
</span>
<el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="用户名" />
</el-form-item>
<el-form-item prop="password">
<span class="svg-container">
<svg-icon icon-class="password"></svg-icon>
</span>
<el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
placeholder="密码"></el-input>
<span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye" /></span>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
登录
</el-button>
</el-form-item>
<div class="tips">
<span style="margin-right:20px;">用户名: admin</span>
<span> 密码:随便什么都行</span>
</div>
</el-form>
<div class="login-from-box">
<el-form
class="login-form"
autocomplete="on"
:model="loginForm"
:rules="loginRules"
ref="loginForm"
label-position="left"
>
<h3 class="title">后台管理框架</h3>
<el-form-item prop="username">
<span class="svg-container svg-container_login">
<svg-icon icon-class="user" />
</span>
<el-input
name="username"
type="text"
v-model="loginForm.username"
autocomplete="on"
placeholder="用户名"
/>
</el-form-item>
<el-form-item prop="password">
<span class="svg-container">
<svg-icon icon-class="password"></svg-icon>
</span>
<el-input
name="password"
:type="pwdType"
@keyup.enter.native="handleLogin"
v-model="loginForm.password"
autocomplete="on"
placeholder="密码"
></el-input>
<span class="show-pwd" @click="showPwd">
<svg-icon :icon-class="pwdType ==='password'?'eye':'eye-open'" />
</span>
</el-form-item>
<div class="login-btn">
<button class="btn" @click="handleLogin">登录</button>
</div>
<div class="tips">
<span style="margin-right:20px;">用户名: admin</span>
<span>密码:随便什么都行</span>
</div>
</el-form>
</div>
</div>
</template>
<script>
import { isvalidUsername } from '@/utils/validate'
import { isvalidUsername } from "@/utils/validate";
export default {
name: 'login',
name: "login",
data() {
const validateUsername = (rule, value, callback) => {
if (!isvalidUsername(value)) {
callback(new Error('请输入正确的用户名'))
callback(new Error("请输入正确的用户名"));
} else {
callback()
callback();
}
}
};
const validatePass = (rule, value, callback) => {
if (value.length < 5) {
callback(new Error('密码不能小于5位'))
callback(new Error("密码不能小于5位"));
} else {
callback()
callback();
}
}
};
return {
loginForm: {
username: 'admin',
password: 'admin'
username: "admin",
password: "admin"
},
loginRules: {
username: [{ required: true, trigger: 'blur', validator: validateUsername }],
password: [{ required: true, trigger: 'blur', validator: validatePass }]
username: [
{ required: true, trigger: "blur", validator: validateUsername }
],
password: [{ required: true, trigger: "blur", validator: validatePass }]
},
loading: false,
pwdType: 'password'
}
pwdType: "password"
};
},
methods: {
showPwd() {
if (this.pwdType === 'password') {
this.pwdType = ''
if (this.pwdType === "password") {
this.pwdType = "";
} else {
this.pwdType = 'password'
this.pwdType = "password";
}
},
handleLogin() {
console.log(11111)
console.log(11111);
this.$refs.loginForm.validate(valid => {
console.log(valid)
console.log(valid);
if (valid) {
this.loading = true
this.$store.dispatch('Login', this.loginForm).then(() => {
this.loading = false
this.$router.push({ path: '/' })
}).catch(() => {
this.loading = false
})
this.loading = true;
this.$store
.dispatch("Login", this.loginForm)
.then(() => {
this.loading = false;
this.$router.push({ path: "/" });
})
.catch(() => {
this.loading = false;
});
} else {
console.log('error submit!!')
return false
console.log("error submit!!");
return false;
}
})
});
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss">
$bg:#2d3a4b;
$light_gray:#eee;
<style rel="stylesheet/scss" lang="scss" scoped>
$bg: #2d3a4b;
$light_gray: #eee;
$dark_gray: #889aa4;
$light_gray: #eee;
/* reset element-ui css */
.login-container {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
.el-input {
background-image: url("https://i.loli.net/2019/10/18/buDT4YS6zUMfHst.jpg");
background-position: center;
/deep/ .el-input {
display: inline-block;
height: 47px;
width: 85%;
......@@ -117,69 +151,110 @@ $light_gray:#eee;
}
}
}
.el-form-item {
/deep/ .el-form-item {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.1);
border-radius: 5px;
color: #454545;
}
}
.login-from-box {
position: relative;
backdrop-filter: saturate(180%) blur(20px);
</style>
.login-form {
position: absolute;
left: 0;
right: 0;
width: 520px;
padding: 35px 35px 15px 35px;
margin: 120px auto;
align-items: center;
color: white;
background: rgba(0, 0, 0, 0.8);
border-radius: 10px;
box-shadow: 0 0.4px 0.6px rgba(0, 0, 0, 0.141),
0 1px 1.3px rgba(0, 0, 0, 0.202), 0 1.9px 2.5px rgba(0, 0, 0, 0.25),
0 3.4px 4.5px rgba(0, 0, 0, 0.298), 0 6.3px 8.4px rgba(0, 0, 0, 0.359),
0 15px 20px rgba(0, 0, 0, 0.5);
.login-btn {
.btn {
position: relative;
width: 100%;
padding: 6px 0;
margin: 10px 0 36px 0;
font-size: 1.2em;
color: white;
background: transparent;
border: 2px solid hsla(204, 70%, 53%, 1);
outline: none;
cursor: pointer;
overflow: hidden;
transition: 0.5s;
<style rel="stylesheet/scss" lang="scss" scoped>
$bg:#2d3a4b;
$dark_gray:#889aa4;
$light_gray:#eee;
.login-container {
position: fixed;
height: 100%;
width: 100%;
background-color: $bg;
.login-form {
position: absolute;
left: 0;
right: 0;
width: 520px;
padding: 35px 35px 15px 35px;
margin: 120px auto;
}
.tips {
font-size: 14px;
color: #fff;
margin-bottom: 10px;
span {
&:first-of-type {
margin-right: 16px;
&::before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
120deg,
transparent,
hsla(204, 70%, 53%, 0.5),
transparent
);
transform: translateX(-100%);
transition: 0.5s;
}
&:hover {
box-shadow: 0 0 20px 10px hsla(204, 70%, 53%, 0.5);
}
&:hover::before {
transform: translateX(100%);
}
}
}
}
}
.svg-container {
padding: 6px 5px 6px 15px;
color: $dark_gray;
vertical-align: middle;
width: 30px;
display: inline-block;
&_login {
font-size: 20px;
.tips {
font-size: 14px;
color: #fff;
margin-bottom: 10px;
span {
&:first-of-type {
margin-right: 16px;
}
}
}
.svg-container {
padding: 6px 5px 6px 15px;
color: $dark_gray;
vertical-align: middle;
width: 30px;
display: inline-block;
&_login {
font-size: 20px;
}
}
.title {
font-size: 26px;
font-weight: 400;
color: $light_gray;
margin: 0px auto 40px auto;
text-align: center;
font-weight: bold;
}
.show-pwd {
position: absolute;
right: 10px;
top: 7px;
font-size: 16px;
color: $dark_gray;
cursor: pointer;
user-select: none;
}
}
.title {
font-size: 26px;
font-weight: 400;
color: $light_gray;
margin: 0px auto 40px auto;
text-align: center;
font-weight: bold;
}
.show-pwd {
position: absolute;
right: 10px;
top: 7px;
font-size: 16px;
color: $dark_gray;
cursor: pointer;
user-select: none;
}
}
</style>
......