We are refactoring it, using the latest Vue and Bulma. WIP

By null
Last update: Dec 31, 2022
Comments: 14

Vue Bulma

WIP

We are refactoring it, using the latest Vue and Bulma.

Todo

vue-next
vue-bulma
- bulma v0.8
- modules

Github

https://github.com/vue-bulma/vue-admin

Comments(14)

1

npm run dev error

以下是报错信息，不知道怎么回事？求解

ERROR in ./~/[email protected]/src/index.js Module parse failed: G:\works\vue-admin\[email protected]\src\index.js Unexpected token (1:7) You may need an appropriate loader to handle this file type. | export BackToTop from './BackToTop' | export default from './Jump' | @ ./~/[email protected]/lib!./~/[email protected]/lib/selector.js?type=script&index=0!./client/views/components/BackToTop.vue 50:0-43 @ ./client/views/components/BackToTop.vue @ ./client/views async ^./.*.vue$ @ ./client/store/modules/menu/lazyLoading.js @ ./client/store/modules/menu/index.js @ ./client/router/index.js @ ./client/app.js @ ./client/index.js @ multi app

ERROR in ./~/[email protected]/src/index.js Module parse failed: G:\works\vue-admin\[email protected]\src\index.js Unexpected token (1:7) You may need an appropriate loader to handle this file type. | export filter from './filter' | | export EmojiIcon from './EmojiIcon' @ ./~/[email protected]/lib!./~/[email protected]/lib/selector.js?type=script&index=0!./client/views/components/Emoji.vue 52:0-52 @ ./client/views/components/Emoji.vue @ ./client/views async ^./.*.vue$ @ ./client/store/modules/menu/lazyLoading.js @ ./client/store/modules/menu/index.js @ ./client/router/index.js @ ./client/app.js @ ./client/index.js @ multi app

ERROR in ./~/[email protected]/src/index.js Module parse failed: G:\works\vue-admin\[email protected]\src\index.js Unexpected token (1:7) You may need an appropriate loader to handle this file type. | export StepItem from './StepItem' | export default from './Tracker' | @ ./~/[email protected]/lib!./~/[email protected]/lib/selector.js?type=script&index=0!./client/views/components/ProgressTracker.vue 76 :0-71 @ ./client/views/components/ProgressTracker.vue @ ./client/views async ^./.*.vue$ @ ./client/store/modules/menu/lazyLoading.js @ ./client/store/modules/menu/index.js @ ./client/router/index.js @ ./client/app.js @ ./client/index.js @ multi app
2

"Maximum call stack size exceeded" error when opening certain pages
Second issue posted in one day .. aren't I lucky :P

After cloning the git repom, running npm install to grab the node modules, I did a npm run dev to get the dev version open in my browser. However, when loading certain of the pages from the sidebar menu, it fails to load and any other link to a previous page that did previously load no longer works.

The error in Chrome console is always the folowing:
```
(unknown) RangeError: Maximum call stack size exceeded
    at VueComponent.Vue._render (eval at 1 (vendor.js:796), <anonymous>:2223:44)
    at VueComponent.updateComponent (eval at 1 (vendor.js:796), <anonymous>:2609:21)
    at Watcher.get (eval at 1 (vendor.js:796), <anonymous>:2934:27)
    at new Watcher (eval at 1 (vendor.js:796), <anonymous>:2926:12)
    at VueComponent.Vue._mount (eval at 1 (vendor.js:796), <anonymous>:2608:19)
    at VueComponent.Vue$2.$mount (eval at 1 (vendor.js:796), <anonymous>:6178:15)
    at init (eval at 1 (vendor.js:796), <anonymous>:1740:11)
    at createComponent (eval at 1 (vendor.js:796), <anonymous>:4174:9)
    at createElm (eval at 1 (vendor.js:796), <anonymous>:4117:9)
    at createChildren (eval at 1 (vendor.js:796), <anonymous>:4242:9)
    at createElm (eval at 1 (vendor.js:796), <anonymous>:4150:9)
```
The pages that this error repeatedly occurs for is:
- Charts/Chartist
- Charts/Peity
- Components/BackToTop
- Components/Brace
- Components/Collapse
- Components/DatePicker
- Components/Message
- Components/Modal
- Components/Notification
- Components/ProgressBarr
- Components/ProgressTracker
- Components/Quill
- Components/Rating
- Components/Slider
- Components/Tabs
- Components/Tooltip
- Components/Lory
- Tables/Handsontable
I am runnng on Gnome Ubuntu 16.04. NPM version 4.0.5 and Node version 7.4.0.

If you need anymore info for clarification please feel free to ask.
3

npm run dev error again

` ✘ http://eslint.org/docs/rules/no-mixed-operators Unexpected mix of '*' and '+' F:\plugins\vue-admin-master\client\views\charts\Chartjs.vue:87:64 data_2: [1, 9, 3, 4, 5, 6, 7, 8, 2].map(e => Math.sin(e) * 25 + 25), ^

✘ http://eslint.org/docs/rules/no-mixed-operators Unexpected mix of '*' and '+' F:\plugins\vue-admin-master\client\views\charts\Chartjs.vue:87:69 data_2: [1, 9, 3, 4, 5, 6, 7, 8, 2].map(e => Math.sin(e) * 25 + 25), ^

✘ 2 problems (2 errors, 0 warnings)

Errors: 2 http://eslint.org/docs/rules/no-mixed-operators @ ./client/views async ^./.*.vue$ @ ./client/store/modules/menu/lazyLoading.js @ ./client/store/modules/menu/index.js @ ./client/store/index.js @ ./client/app.js @ ./client/index.js @ multi ./build/dev-client ./client/index.js

ERROR in ./~/[email protected]/src/index.js Module parse failed: F:\plugins\vue-admin-master\[email protected]\src\index.js Unexpected token (1:7) You may need an appropriate loader to handle this file type. | export BackToTop from './BackToTop' | export default from './Jump' | @ ./~/[email protected]/lib!./~/[email protected]/lib/selector.js?type=script&index=0!./client/views/components/BackToTop.vue 50:0-43 @ ./client/views/components/BackToTop.vue @ ./client/views async ^./.*.vue$ @ ./client/store/modules/menu/lazyLoading.js @ ./client/store/modules/menu/index.js @ ./client/store/index.js @ ./client/app.js @ ./client/index.js @ multi ./build/dev-client ./client/index.js

ERROR in ./~/[email protected]/src/index.js Module parse failed: F:\plugins\vue-admin-master\[email protected]\src\index.js Unexpected token (1:7) You may need an appropriate loader to handle this file type. | export filter from './filter' | | export EmojiIcon from './EmojiIcon' @ ./~/[email protected]/lib!./~/[email protected]/lib/selector.js?type=script&index=0!./client/views/components/Emoji.vue 52:0-52 @ ./client/views/components/Emoji.vue @ ./client/views async ^./.*.vue$ @ ./client/store/modules/menu/lazyLoading.js @ ./client/store/modules/menu/index.js @ ./client/store/index.js @ ./client/app.js @ ./client/index.js @ multi ./build/dev-client ./client/index.js

ERROR in ./~/[email protected]/src/index.js Module parse failed: F:\plugins\vue-admin-master\[email protected]\src\index.js Unexpected token (1:7) You may need an appropriate loader to handle this file type. | export StepItem from './StepItem' | export default from './Tracker' | @ ./~/[email protected]/lib!./~/[email protected]/lib/selector.js?type=script&index=0!./client/views/components/ProgressTracker.vue 76:0-71 @ ./client/views/components/ProgressTracker.vue @ ./client/views async ^./.*.vue$ @ ./client/store/modules/menu/lazyLoading.js @ ./client/store/modules/menu/index.js @ ./client/store/index.js @ ./client/app.js @ ./client/index.js @ multi ./build/dev-client ./client/index.js`

用cnpm i 然后就这样了用yarn卡在1182/1183不动了用npm -d卡在 npm info git [ 'checkout', 'de2ab007455aa2587c552694c68583f94c9f2747' ] npm info git [ 'submodule', '-q', 'update', '--init', '--recursive' ]

how to play the project...
4

[npm run dev] throw new WebpackOptionsValidationError
[email protected] dev /private/var/www/apache/gospel/admin node build/server.js

/private/var/www/apache/gospel/admin/node_modules/[email protected]/lib/webpack.js:16 throw new WebpackOptionsValidationError(webpackOptionsValidationErrors); ^ WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration has an unknown property 'vue'. These properties are valid: object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? } For typos: please correct them. For loader options: webpack 2 no longer allows custom properties in configuration. Loaders should be updated to allow passing options via loader options in module.rules. Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader: plugins: { new webpack.LoaderOptionsPlugin({ // test: /.xxx$/, // may apply this only for some modules options: { vue: ... } }) }
- configuration.resolve has an unknown property 'fallback'. These properties are valid: object { alias?, aliasFields?, cachePredicate?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache? }
- configuration.resolve.extensions[0] should not be empty. at webpack (/private/var/www/apache/gospel/admin/node_modules/[email protected]/lib/webpack.js:16:9) at Object. (/private/var/www/apache/gospel/admin/build/server.js:9:18) at Module._compile (module.js:435:26) at Object.Module._extensions..js (module.js:442:10) at Module.load (module.js:356:32) at Function.Module._load (module.js:311:12) at Function.Module.runMain (module.js:467:10) at startup (node.js:136:18) at node.js:963:3
npm ERR! Darwin 15.4.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev" npm ERR! node v4.2.2 npm ERR! npm v2.14.7 npm ERR! code ELIFECYCLE npm ERR! [email protected] dev: node build/server.js npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] dev script 'node build/server.js'. npm ERR! This is most likely a problem with the vue-admin package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! node build/server.js npm ERR! You can get their info via: npm ERR! npm owner ls vue-admin npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request: npm ERR! /private/var/www/apache/gospel/admin/npm-debug.log
5

Build Error
Error Observed
```
ERROR in ./client/App.vue
Module build failed: Error: 

Vue packages version mismatch:

- [email protected]
- [email protected]
```
Expected Behavior

Build and run, launching browser.

Steps to reproduce
1. git clone https://github.com/vue-bulma/vue-admin.git --depth=1
2. npm install
3. npm run dev
4. observe error
Other Notes

Confirmed on Ubuntu 14.04LTS and Windows 10. Confirmed on Node v4.5.0 and v6.9.1

依赖包不能加载

我们做一个项时只有Linux可以正常运行，Mac报以下错误：

ERROR in ./~/[email protected]/src/index.js
Module parse failed: /Users/leon/Desktop/work/gospel/admin/node_modules/[email protected]/src/index.js Unexpected token (1:7)
You may need an appropriate loader to handle this file type.
| export BackToTop from './BackToTop'
| export default from './Jump'
| 
 @ ./~/[email protected]!./~/[email protected]/lib/selector.js?type=script&index=0!./client/views/components/BackToTop.vue 50:0-43
 @ ./client/views/components/BackToTop.vue
 @ ./client/router/menu.js
 @ ./client/router/index.js
 @ ./client/app.js
 @ ./client/index.js
 @ multi app

ERROR in ./~/[email protected]/src/index.js
Module parse failed: /Users/leon/Desktop/work/gospel/admin/node_modules/[email protected]/src/index.js Unexpected token (1:7)
You may need an appropriate loader to handle this file type.
| export filter from './filter'
| 
| export EmojiIcon from  './EmojiIcon'
 @ ./~/[email protected]!./~/[email protected]/lib/selector.js?type=script&index=0!./client/views/components/Emoji.vue 52:0-52
 @ ./client/views/components/Emoji.vue
 @ ./client/router/menu.js
 @ ./client/router/index.js
 @ ./client/app.js
 @ ./client/index.js
 @ multi app

ERROR in ./~/[email protected]/src/index.js
Module parse failed: /Users/leon/Desktop/work/gospel/admin/node_modules/[email protected]/src/index.js Unexpected token (1:7)
You may need an appropriate loader to handle this file type.
| export StepItem from './StepItem'
| export default from './Tracker'
| 
 @ ./~/[email protected]!./~/[email protected]/lib/selector.js?type=script&index=0!./client/views/components/ProgressTracker.vue 74:0-71
 @ ./client/views/components/ProgressTracker.vue
 @ ./client/router/menu.js
 @ ./client/router/index.js
 @ ./client/app.js
 @ ./client/index.js
 @ multi app

7

Any plans to update to bulma 0.3.0?

I saw that bulma 0.3.0 has been released recently.

They fixed a number of bugs in their changelog.

Are there any plans on moving to their newer version?

BTW, I tried vue-admin out with bulma 0.3.0 and there only the background needs to be fixed to look OK. And yes, the colors are a bit different. I guess they renamed a couple of sass-variables.

Cheers
8

Cannot launch npm run dev - object expansion fails in app.js with Unexpected token error

Error when I run npm run dev. Object expansion fails in app.js. It looks like an eslint of babel issue. Any help to fix? In VSCode, same code section in app.js raises an eslint exception: [js] Property exception expected. <> const app = new Vue({ router, store, nprogress, ...App << eslint error here })

<> $ npm run dev ... ERROR in ./client/app.js Module parse failed: ...\vue-admin\client\app.js Unexpected token (35:2) You may need an appropriate loader to handle this file type. | store, | nprogress, | ...App | }) | @ ./client/index.js 1:0-27 @ multi app Child html-webpack-plugin for "index.html": Asset Size Chunks Chunk Names index.html 1.46 MB 0 webpack: bundle is now VALID.
9

Font assets generated path and referenced path don't match

After running npm run build, the fonts are generated under public/assets/fonts However, when the webpage is served, the server tries to serve fonts from public/assets/css/assets/fonts

Changing frontend/build/webpack.base.conf.js query.name for font files will result in a change in both paths. In other words, changing query.name from utils.assetsPath('fonts/[name].[hash:7].[ext]') to utils.assetsPath('css/[name].[hash:7].[ext]') will result in fonts generated at public/assets/css/fonts and referenced at public/assets/css/assets/css, and does not solve the problem.

This issue does not occur when using npm run dev
10

[HELP] How to manipulate page name in the Levelbar

Hey,

right now, the Levelbar shows the route name. Is there a way to manipulate that? I have a User route with /user/:id as path and would like to show the received username instead.

npm hang - npm无法配置开发环境

您好，似乎您说中文？

我有个问题，不知道能否手工，即不通过npm和web pack来配置开发环境？因为我的npm无法穿墙，如下，停在这里：

npm info retry fetch attempt 1 at 22:20:25
npm info attempt registry request try #1 at 22:20:25
npm http fetch GET https://registry.npmjs.org/emojione/-/emojione-2.2.6.tgz
npm http fetch 200 https://registry.npmjs.org/emojione/-/emojione-2.2.6.tgz
[    ..............] - fetchMetadata: http fetch 200 https://registry.npmjs.org

我原来主要做桌面开发，刚刚开始接触web开发，请指教。谢谢。

编译错误：File to import not found or unreadable: ~bulma/sass/utilities/initial-variables.

ERROR in ./~/[email protected]@css-loader!./~/[email protected]@vue-loader/lib/style-compiler?{"id":"data-v-36c4ae96","scoped":false,"hasInlineConfig":true}!./~/[email protected]@sass-loader/lib/loader.js!./~/[email protected]@vue-loader/lib/selector.js?type=styles&index=0!./~/[email protected]@vue-bulma-tabs/src/Tabs.vue
Module build failed:
@import '~bulma/sass/utilities/initial-variables';
^
      File to import not found or unreadable: ~bulma/sass/utilities/initial-variables.
      in D:\vue-admin-master\node_modules\[email protected]@vue-bulma-tabs\src\Tabs.vue (line 114, column 1)
 @ ./~/[email protected]@vue-style-loader!./~/[email protected]@css-loader!./~/[email protected]@vue-loader/lib/style-compiler?{"id":"data-v-36c4ae96","scoped":false,"hasInlineConfig":true}!./~/[email protected]@sass-loader/lib/loader.js!./~/[email protected]@vue-loader/lib/selector.js?type=styles&index=0!./~/[email protected]@vue-bulma-tabs/src/Tabs.vue 4:14-340 13:3-17:5 14:22-348
 @ ./~/[email protected]@vue-bulma-tabs/src/Tabs.vue
 @ ./~/[email protected]@vue-bulma-tabs/src/index.js
 @ ./~/[email protected]@babel-loader/lib!./~/[email protected]@vue-loader/lib/selector.js?type=script&index=0!./client/views/components/Tabs.vue
 @ ./client/views/components/Tabs.vue
 @ ./client/views lazy ^\.\/.*\.vue$
 @ ./client/store/modules/menu/lazyLoading.js
 @ ./client/store/modules/menu/index.js
 @ ./client/store/index.js
 @ ./client/app.js
 @ ./client/index.js
 @ multi ./build/dev-client ./client/index.js

如果你在编译过程中出现了这个问题，尝试重新安装bulma，或者下载https://raw.githubusercontent.com/jgthms/bulma/master/sass/utilities/initial-variables.sass 放到对应文件夹下面。

13

modal

当modal显示的状态下，点击浏览器back按钮，modal不会消失，之后modal的关闭操作按钮也不再起作用了。英文不好不太会写英文， when the modal is visual , click the back button of browser , the modal can't disapper .
and then the close button of modal can't work. can U help me?
14

Failed to compile.

ERROR in ./~/[email protected]@css-loader!./~/[email protected]@vue-loader/lib/style-compiler?{"id":"data-v-54abe700","scoped":false,"hasInlineConfig":true}!./~/[email protected]@sass-loader/lib/loader.js!./~/[email protected]@vue-loader/lib/selector.js?type=styles&index=0!./~/[email protected]@vue-bulma-tabs/src/Tabs.vue Module build failed: @import '~bulma/sass/utilities/initial-variables'; ^ File to import not found or unreadable: ~bulma/sass/utilities/initial-variables. in G:\IdeaProjects\vue-admin\[email protected]@vue-bulma-tabs\src\Tabs.vue (line 114, column 1) @ ./~/[email protected]@vue-style-loader!./~/[email protected]@css-loader!./~/[email protected]@vue-loader/lib/style-compiler?{"id":"data-v-54abe700","scoped":false,"hasInlineConfig":true}!./~/[email protected]@sass-loader/lib/loader.js!./~/[email protected]@vue-loader/lib/selector.js?type=styles&index=0!./~/[email protected]@vue-bulma-tabs/src/Tabs.vue 4:14-340 13:3-17:5 14:22-348 @ ./~/[email protected]@vue-bulma-tabs/src/Tabs.vue @ ./~/[email protected]@vue-bulma-tabs/src/index.js @ ./~/[email protected]@babel-loader/lib!./~/[email protected]@vue-loader/lib/selector.js?type=script&index=0!./client/views/components/Tabs.vue @ ./client/views/components/Tabs.vue @ ./client/views lazy ^./.*.vue$ @ ./client/store/modules/menu/lazyLoading.js @ ./client/store/modules/menu/index.js @ ./client/store/index.js @ ./client/app.js @ ./client/index.js @ multi ./build/dev-client ./client/index.js

We are refactoring it, using the latest Vue and Bulma. WIP

Vue Bulma

Todo

Sponsors

Github

Comments(14)

npm run dev error

"Maximum call stack size exceeded" error when opening certain pages

npm run dev error again

[npm run dev] throw new WebpackOptionsValidationError

Build Error

Error Observed

Expected Behavior

Steps to reproduce

Other Notes

依赖包不能加载

Any plans to update to bulma 0.3.0?

Cannot launch npm run dev - object expansion fails in app.js with Unexpected token error

Font assets generated path and referenced path don't match

[HELP] How to manipulate page name in the Levelbar

npm hang - npm无法配置开发环境

编译错误：File to import not found or unreadable: ~bulma/sass/utilities/initial-variables.

modal

Failed to compile.

Popular Tag

Related