Code Monkey home page Code Monkey logo

vue-backend's Introduction

Vue + ElementUI 后台管理系统框架

在线预览

https://harsima.github.io/vue-backend

相关教程

功能列表

  • 登录登出
  • 菜单异步加载
  • 页面详细权限控制
  • 多语言支持
  • 布局切换
  • 高德地图集成
  • Echarts集成
  • 错误页面
  • mock数据
  • 页面加载进度条

项目使用

# 安装项目依赖
npm install

# 开启本地服务,默认为localhost:9000
npm run dev

# 项目打包,构建生产环境
npm run build

# 打包过程中想查看具体报告则可以通过以下命令实现
npm run build --report

Nginx简单部署配置

将打包后的文件放到Nginx安装目录中的html文件夹内,然后对Nginx进行简单配置即可。

...
# 以上保持默认配置即可

server {
    listen       9090;
    server_name  localhost;
    # 项目文件目录
    root   html/vue-backend;
    index  index.html index.htm;

    location / {
        # vue-router使用history模式下的必须配置
        try_files $uri $uri/ /index.html;
        index index.html;
    }
}

其他

欢迎反馈及探讨各种问题,同时请注意issue规则。 QQ交流群:745454791

vue-backend's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vue-backend's Issues

分页条数问题

分页默认显示为10条,当数据超过10条,没有分页,在共多少条数据的地方,仍然显示为共10条。
image

安装依赖报错

npm ERR! Unexpected end of input at 1:225036
npm ERR! k":"^1.12.2"},"peerDependencies":{"css-loader":"*"},"directories":{},
npm ERR! ^

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/chenjing/.npm/.cache/cnpm/_logs/2018-06-11T15_13_06_317Z-debug.log

need help about 'Cyclic dependency'

when i import staticRoute from '../../router/staticRoute' in a vue file, error reported like this:

i 「wdm」: wait until bundle finished:
C:\Users\libre\projects\xxx\node_modules\toposort\index.js:35
throw new Error('Cyclic dependency' + nodeRep)
^

Error: Cyclic dependency
at visit (C:\Users\libre\projects\xxx\node_modules\toposort\index.js:35:13)
at visit (C:\Users\libre\projects\xxx\node_modules\toposort\index.js:53:9)
at visit (C:\Users\libre\projects\xxx\node_modules\toposort\index.js:53:9)
at Function.toposort [as array] (C:\Users\libre\projects\xxx\node_modules\toposort\index.js:22:22)
at Object.module.exports.dependency (C:\Users\libre\projects\xxx\node_modules\html-webpack-plugin\lib\chunksorter.js:50:35)
at HtmlWebpackPlugin.sortChunks (C:\Users\libre\projects\xxx\node_modules\html-webpack-plugin\index.js:364:35)
at C:\Users\libre\projects\xxx\node_modules\html-webpack-plugin\index.js:113:21
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\libre\projects\xxx\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:24:12), :7:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (C:\Users\libre\projects\xxx\node_modules\webpack\node_modules\tapable\lib\Hook.js:35:21)
at Compiler.emitAssets (C:\Users\libre\projects\xxx\node_modules\webpack\lib\Compiler.js:307:19)
at onCompiled (C:\Users\libre\projects\xxx\node_modules\webpack\lib\Watching.js:50:19)
at hooks.afterCompile.callAsync.err (C:\Users\libre\projects\xxx\node_modules\webpack\lib\Compiler.js:487:14)
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\libre\projects\xxx\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:24:12), :15:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (C:\Users\libre\projects\xxx\node_modules\webpack\node_modules\tapable\lib\Hook.js:35:21)
at compilation.seal.err (C:\Users\libre\projects\xxx\node_modules\webpack\lib\Compiler.js:484:30)
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\libre\projects\xxx\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:24:12), :6:1)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: node build/dev-server.js
npm ERR! Exit status 1

谢谢

SyntaxError: Unexpected token

ERROR in ./src/store/modules/auth/index.js
Module build failed: SyntaxError: Unexpected token (35:20)

33 | method: 'post',
34 | data: {

35 | ...userInfo
| ^
36 | }

ERROR in Entry module not found: Error: Can't resolve './src/assets/style/theme-default.scss'

ERROR in Entry module not found: Error: Can't resolve './src/assets/style/theme-default.scss' in 'E:
\vue'

Build failed with errors.

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\b
in\npm-cli.js" "run" "build"
npm ERR! node v6.11.4
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: node build/build.js && node build/themeExtract.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script 'node build/build.js && node build/themeExtrac
t.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the vue-backend package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node build/build.js && node build/themeExtract.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs vue-backend
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls vue-backend
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! E:\vue\npm-debug.log

npm run dev后报错

cnpm install后
npm run dev 报错:
ERROR in ./src/assets/css/theme-default.scss (./node_modules/_css-loader@0.28.11@css-loader!./node_modules/_postcss-loader@2.1.6@postcss-loader/lib!./node_modules/_sass-loader@7.1.0@sass-loader/lib/loader.js??ref--10-3!./src/assets/css/theme-default.scss)
Module build failed (from ./node_modules/_sass-loader@7.1.0@sass-loader/lib/loader.js):

undefined
^
Undefined variable: "$--menu-item-color".
in I:\Study\PROL\Language\js\netinstance\vue-backend-dev\src\assets\css\common\sidenav.scss (line 55, column 24)
@ ./src/assets/css/theme-default.scss 4:14-259 14:3-18:5 15:22-267
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js

vue-i18n插件在单文件组件中失效

emmm,某天在更新了依赖后vue-i18n国际化插件在单文件组件中就不好用了,这是个大问题,我也在极力解决中(不忙的时候...)。所以这类issue就不要提了。同时也记录一下,如果有修改的解决方法会写在这里的

npm run build 报错

ERROR in static/js/app.86600f24db8115567af9.js from UglifyJs
Unexpected token: name (data) [static/js/app.86600f24db8115567af9.js:1800,4]

能帮忙看看什么原因么?

欢迎讨论更加优雅的主题切换方式

最近因为某些原因,终于把一直纠结的主题方式及切换方式搞了出来。

设计思路

我能想到的主题切换方式无非两种:

  • 一种是在body中加样式,对所有css进行命名空间(css前缀)处理
  • 一种是类似Element自身的主题切换方式,通过编写scss改变主题

前一种方式在花裤衩同学的vue-element-admin中有具体的实现,项目主页:https://github.com/PanJiaChen/vue-element-admin
他是先将element自己提供的变量文件修改后生成新的css,然后将该css用gulp进行二次编辑增加命名空间,然后引入。也就是说他只是修改了UI框架的主题,并没有修改自己写的样式主题。

第二种方式则是element自己生成一个sass变量文件,执行命令行后生成新主题,然后让开发者自己导入。

以上两种其实都并没有实现项目本身自定义样式的主题切换,所以就产生了很多的问题。但仔细分析一下,其实我们只要将自己写的css样式也如同element官方那样打包一遍,然后动态引入就好了嘛。当然也可能是我傻,没想到还有其他方法。

介于以上总结,项目中设计的主题加载和切换方式大致流程如下:

  1. 页面中仅引入基本样式
  2. 页面初始化完成,动态加载主题文件
  3. 用户切换主题:判断主题文件是否已经存在,存在则不操作;不存在则清空所有的主题文件,然后动态加载对应的主题文件。

主题创建

当前主题编写参考了Element的主题切换方式,通过sass进行变量修改。

# 复制基础变量文件 (src/assets/css/theme/default.scss),重命名为 blue.scss 并修改内部变量
# 在 src/assets/css 目录中创建新的主题入口文件 theme-blue.scss,并做如下引入

// 引入新主题变量文件
@import './theme/blue'
// 引入默认主题
@import './theme-default'

如此简单的便可以完成主题创建。前文说过我们需要动态引入文件,而动态引入我采用的是js读取文件路径并加载的形式,也就意味着该文件必须存在实际的物理地址,所以你需要先对项目进行打包,生成对应的静态的css文件,而不是scss文件。为了达成这个目的我们还需要对webpack进行设置。沿着这个思路我们还需要做以下工作。

配置webpack

在webpack.prod.conf.js中对入口变量做出修改,注意是prod.js

// 增加新的入口,并赋予文件名和路径
entry: {
    'theme-default': './src/assets/style/theme-default.scss'
}

// 对HtmlWebpackPlugin插件增加忽略chunk设置,防止该chunk被加入到生成后的html中
new HtmlWebpackPlugin({
    excludeChunks: ['theme-default']
})

配置供js使用的主题文件路径

配置好新的入口后,我们对项目进行打包,等待编译完成。当打包结束后我们应该能够看到在dist\static\css下有新增的theme文件,这个文件就是我们的主题文件了。接下来则是为主题切换做基础。我们需要把生成的文件路径提供给js。但是要意识到,该文件在开发时是没有的,只有在打包完成后才有,所以我们需要另一个操作:改写打包文件。

在打包文件生成后,我们需要利用node循环读取dist\static\css下的所有文件,并把所有的theme文件路径输出到html中,当然你也可以输出到公共js中,比如app.js。这里具体的实现方法请看build\themeExtract.js

写完文件后我们只需要执行它就可以了。当然了,把它直接和 npm run build 绑定到一起不是更好吗?所以在 package.json中做如下修改即可

"scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    // &&代表顺序执行
    "build": "node build/build.js && node build/themeExtract.js"
}

执行后,我们再看看打包后的html文件,在head部分能看到一个全局的变量themeURL,里面就是我们需要的所有的主题文件路径了。

在本篇文章发表时,本项目master分支并没有以上说的所有信息,想看的请clone本项目然后切换到dev分支

使用及调试

在上个步骤中我们已经有了全局变量themeURL,那么只需要对主题文件进行匹配即可。当更换主题时,我们先查找已经加载的主题,如果没有则直接插入主题文件,如果有则清空所有主题文件,然后再插入。至于动态插入文件的方法,项目中已对该方法进行封装,可在 src\util\changeTheme.js中查看。

# 使用主题切换的方法示例,需要保证changeTheme()中的参数与主题文件名保持一致
@import changeTheme from '@/util/changeTheme'

export default {
    loadTheme(theme){
        changeTheme(theme)
    }
}

因为主题文件是打包后才生成的,所以在开发环境中,主题切换并不好用,只能通过手动修改sass主题文件的方式来做切换了,这也是目前该方案最大的问题。

至于调试动态载入主题js是否成功.....唔,你先打包一份,然后把打包后的多出来的变量复制到 src\index.html 中,再把打包出来的文件放到和src同级的static目录中就可以了嘛...

优势及问题

这种切换方式能够最大程度上避免CSS污染,页面也更加干净,不会产生多余的文件。
如果使用偷懒的方法,将所有自己写的样式都放到主题中(比如我),那么后期维护也异常的简单,改改变量值就可以了嘛。
如果使用繁琐的方法,抽出所有样式中的主题部分(如背景色、文字、颜色、图片等),也能极大减少主题文件的大小,就是后期维护的时候会同时看两个文件才能知道这里真正的样式是什么,而且在编辑时容易丢东西。

npm run dev 报如下错误

ERROR Failed to compile with 2 errors 10:50:38

These relative modules were not found:

  • ./Chart1 in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/page/example/charts/index.vue
  • ./Map1 in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/page/example/map/index.vue

Listening at http://localhost:9000

按钮权限未起作用

在navilist.js中将“完整示例--->列表页面”中的“edit”权限注释,如下:
image
页面仍然显示“修改”按钮
image
细看“hasPermission\index.js”这部分代码加了一个console.log,如下:
image
浏览器中查看:
image

npm run dev 报错怎么回事

  • ERROR Failed to compile with 30 errors 15:36:53

error in ./src/page/components/ui/pageSection.vue

Syntax Error: Unexpected token {

@ ./src/router/asyncRouter.js 78:21-65
@ ./src/router/index.js
@ ./src/main.dev.js
@ multi ./build/dev-client ./src/main.dev.js

error in ./src/index.vue

Syntax Error: Unexpected token {

@ ./src/main.dev.js 14:0-26
@ multi ./build/dev-client ./src/main.dev.js

error in ./src/page/layout/layout.vue

Syntax Error: Unexpected token {

@ ./src/router/index.js 58:21-53
@ ./src/main.dev.js
@ multi ./build/dev-client ./src/main.dev.js

error in ./src/page/home/home.vue

Syntax Error: Unexpected token {

@ ./src/router/index.js 69:25-53
@ ./src/main.dev.js
@ multi ./build/dev-client ./src/main.dev.js

error in ./src/page/error/error.vue

Syntax Error: Unexpected token {

@ ./src/router/index.js 77:21-51
@ ./src/main.dev.js
@ multi ./build/dev-client ./src/main.dev.js

error in ./src/page/error/401.vue

Syntax Error: Unexpected token {

@ ./src/router/index.js 84:25-53
@ ./src/main.dev.js
@ multi ./build/dev-client ./src/main.dev.js

error in ./src/page/error/403.vue

Syntax Error: Unexpected token {

@ ./src/router/index.js 91:25-53
@ ./src/main.dev.js
@ multi ./build/dev-client ./src/main.dev.js

error in ./src/page/error/404.vue

Syntax Error: Unexpected token {

@ ./src/router/index.js 98:25-53
@ ./src/main.dev.js
@ multi ./build/dev-client ./src/main.dev.js

关于版本管理的二三事

第一次用github上传代码,在近几天的使用中发现了很大的问题。以下是关于版本管理的一些事。

  1. 创建dev分支
    以后master分支则作为正式可用的版本,dev则供开发使用。既然是dev则很可能有各种未修复的BUG及更改到一半的或者未完成的功能,所以,请不要使用dev分支。

  2. 关于release版本
    以后release版本则作为完全的可使用版本,其中会涉及一堆功能的改变和BUG的修复,可能其中还会有BUG,但至少比master版本稳定。

  3. 关于commit
    以后会尝试将commit细化或者补全commit修改细节,以便以后追踪。或者建立单独的change log。

以上

国际化在首次加载时失效

在Nginx部署环境中,首次登录页面时,点击登录表单。错误提示未加载国际化设置。

原因是异步加载语言包时无法确定执行先后顺序,导致登录页面的mounted先执行,语言包加载完成后的函数后执行

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.