harsima / vue-backend Goto Github PK
View Code? Open in Web Editor NEW简单的后台管理框架
License: MIT License
简单的后台管理框架
License: MIT License
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
登录系统后,用户名正常显示。此时关闭浏览器,再次打开并重新登录系统时,直接进入首页。此时用户名显示错误
当Mock数据中有权限时,使用v-hasPermission="‘xxx’"
时,无法显示该按钮
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
<el-menu-item v-else :index="item.path">{{ item.name }}</el-menu-item>
请问,这个按钮级别的权限控制,还需要后端做权限处理吗?
最近因为某些原因,终于把一直纠结的主题方式及切换方式搞了出来。
我能想到的主题切换方式无非两种:
前一种方式在花裤衩同学的vue-element-admin中有具体的实现,项目主页:https://github.com/PanJiaChen/vue-element-admin
他是先将element自己提供的变量文件修改后生成新的css,然后将该css用gulp进行二次编辑增加命名空间,然后引入。也就是说他只是修改了UI框架的主题,并没有修改自己写的样式主题。
第二种方式则是element自己生成一个sass变量文件,执行命令行后生成新主题,然后让开发者自己导入。
以上两种其实都并没有实现项目本身自定义样式的主题切换,所以就产生了很多的问题。但仔细分析一下,其实我们只要将自己写的css样式也如同element官方那样打包一遍,然后动态引入就好了嘛。当然也可能是我傻,没想到还有其他方法。
介于以上总结,项目中设计的主题加载和切换方式大致流程如下:
当前主题编写参考了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.prod.conf.js中对入口变量做出修改,注意是prod.js
// 增加新的入口,并赋予文件名和路径
entry: {
'theme-default': './src/assets/style/theme-default.scss'
}
// 对HtmlWebpackPlugin插件增加忽略chunk设置,防止该chunk被加入到生成后的html中
new HtmlWebpackPlugin({
excludeChunks: ['theme-default']
})
配置好新的入口后,我们对项目进行打包,等待编译完成。当打包结束后我们应该能够看到在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污染,页面也更加干净,不会产生多余的文件。
如果使用偷懒的方法,将所有自己写的样式都放到主题中(比如我),那么后期维护也异常的简单,改改变量值就可以了嘛。
如果使用繁琐的方法,抽出所有样式中的主题部分(如背景色、文字、颜色、图片等),也能极大减少主题文件的大小,就是后期维护的时候会同时看两个文件才能知道这里真正的样式是什么,而且在编辑时容易丢东西。
[email protected] dev d:\ 1前端\ 1.。页面\ element \ vue-ba
node build / dev-server.js
出现这个问题怎么解决我想问一下谢谢
登录到系统后,有时刷新页面时,用户名栏为空
谢谢。。。。
emmm,某天在更新了依赖后vue-i18n国际化插件在单文件组件中就不好用了,这是个大问题,我也在极力解决中(不忙的时候...)。所以这类issue就不要提了。同时也记录一下,如果有修改的解决方法会写在这里的
比如,角色管理,菜单管理,用户管理
在IE中,主题变更失效,控制台提示“对象不能使用forEach”方法
ERROR in ./src/store/modules/auth/index.js
Module build failed: SyntaxError: Unexpected token (35:20)
33 | method: 'post',
34 | data: {
35 | ...userInfo
| ^
36 | }
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
谢谢
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
在Nginx部署环境中,首次登录页面时,点击登录表单。错误提示未加载国际化设置。
原因是异步加载语言包时无法确定执行先后顺序,导致登录页面的mounted先执行,语言包加载完成后的函数后执行
ERROR Failed to compile with 2 errors 10:50:38
These relative modules were not found:
Listening at http://localhost:9000
ERROR in static/js/app.86600f24db8115567af9.js from UglifyJs
Unexpected token: name (data) [static/js/app.86600f24db8115567af9.js:1800,4]
能帮忙看看什么原因么?
为什么在360浏览器在登录界面鼠标点到输入框会震颤?
elementui 版本有计划升级至v2.x吗
所有的二级标题即<v-pageSection>
组件,标题内容渲染错误。
第一次用github上传代码,在近几天的使用中发现了很大的问题。以下是关于版本管理的一些事。
创建dev分支
以后master分支则作为正式可用的版本,dev则供开发使用。既然是dev则很可能有各种未修复的BUG及更改到一半的或者未完成的功能,所以,请不要使用dev分支。
关于release版本
以后release版本则作为完全的可使用版本,其中会涉及一堆功能的改变和BUG的修复,可能其中还会有BUG,但至少比master版本稳定。
关于commit
以后会尝试将commit细化或者补全commit修改细节,以便以后追踪。或者建立单独的change log。
以上
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.