zmts / beauty-vuejs-boilerplate Goto Github PK

View Code? Open in Web Editor NEW

858.0 30.0 210.0 4 MB

❤️ Real world base Vue.js app. Access/refresh tokens auth, api services, http client, vuex modules

License: MIT License

JavaScript 33.45% HTML 0.72% Vue 59.35% CSS 1.37% SCSS 5.11%

vuejs access-token refresh-token api http-wrapper spa realworld enterprise data-access-layer boilerplate

beauty-vuejs-boilerplate's People

Contributors

Stargazers

Watchers

Forkers

dobeerman amenhotep19 rrcc0044 csanabria ambroseus chz vsnegovik foxxiu sound1ab caiofsouza mrborek nilportugues mitri4 jonathan-voyagerinnovation nikovitto dragosdumitru88 vinidiktov-edsd vuongnd90 newpouy highdevelop jmptrader g0d0 caiovictormc mybigman kikovipera webslavik w3dev gannyril lavrend mazdok pakinwet mohamedsallami attilaaf linhbkhn95 elecman marciliocb keen0927 vorblex moosebay alexdonn19 hyyyy2 adeyinkakoya ramirescm ndinhbang mangcoding diamond312 sohanchaudahry niczem yjpark0108 aramkumar06 dylandt halilkilicarslan magedevel tarequmahmud 715047274 junglebob20 fonclub akannigil elegerd minhtamck kirillbaryba fedortver renalfarid darlynvailatti latiertiw trantrinh1102 zorca 91cesarr tgalfa ervea dystudio tafler jung-jp aahaidaralbaqir legsy abd1rahmane liberpike ichaudry abdallahbouhannache techbhavin carlosmontoya89 cuongpianna robertflair1983 ivopauly hoanganhbb xhgrid yanivduke foxmalder shan52 florysa daongoc315 lclarkdwain jin9776 ssfdust dong-nv zheng-lei ad35h jatin-kamboj knowlage-storage berthold-lbb

beauty-vuejs-boilerplate's Issues

Failed to compile

Hi,

Just to let you know that I tried to install and compiled and it failed :

 v1 git:(master) npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

audited 1481 packages in 6.223s

48 packages are looking for funding
  run `npm fund` for details

found 931 vulnerabilities (392 low, 197 moderate, 342 high)
  run `npm audit fix` to fix them, or `npm audit` for details


   ╭────────────────────────────────────────────────────────────────╮
   │                                                                │
   │      New major version of npm available! 6.14.10 → 7.20.5      │
   │   Changelog: https://github.com/npm/cli/releases/tag/v7.20.5   │
   │               Run npm install -g npm to update!                │
   │                                                                │
   ╰────────────────────────────────────────────────────────────────╯

v1 git:(master) npm run serve

> [email protected] serve /home/emilie/Devel/FREELANCE/Magali/v1
> NODE_ENV=development vue-cli-service serve

 INFO  Starting development server...
11% building 14/15 modules 1 active ...nt-loader/index.js??ref--13-0!/home/emilie/Devel/FREELANCE/Magali/v1/src/main.jsBrowserslist: caniuse-lite is outdated. Please run the following command: `npm update`
98% after emitting CopyPlugin

 ERROR  Failed to compile with 1 errors                                                                      11:42:06 AM

 error  in ./src/main.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] /home/emilie/Devel/FREELANCE/Magali/v1/src/main.js: Cannot find module '/home/emilie/Devel/FREELANCE/Magali/v1/node_modules/@babel/compat-data/data/corejs3-shipped-proposals' (While processing: "/home/emilie/Devel/FREELANCE/Magali/v1/node_modules/@vue/cli-plugin-babel/preset.js")
    at createEsmNotFoundErr (internal/modules/cjs/loader.js:842:15)
    at finalizeEsmResolution (internal/modules/cjs/loader.js:835:15)
    at resolveExports (internal/modules/cjs/loader.js:424:14)
    at Function.Module._findPath (internal/modules/cjs/loader.js:464:31)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:802:27)
    at Function.Module._load (internal/modules/cjs/loader.js:667:27)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/home/emilie/Devel/FREELANCE/Magali/v1/node_modules/@babel/preset-env/lib/polyfills/corejs3/usage-plugin.js:10:55)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/home/emilie/Devel/FREELANCE/Magali/v1/node_modules/@babel/preset-env/lib/index.js:29:44)

 @ multi (webpack)-dev-server/client?http://172.28.153.21:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Server-side rendering?

Does/will this support server-side rendering? I really need control over the meta for my pages and that only seems to be possible if the site is SSR.

Use multiple layouts

could not use multiple layouts. any suggestions ?

Remove listener on anonymous function ?

beauty-vuejs-boilerplate/src/main.js

Line 26 in fdcff39

 window.removeEventListener('resize', () => store.commit('dom/SET_WINDOW_WIDTH', window.innerWidth)) 

problem with requiring images dynamically

i'm having this problem that when i require an img based on what i get back from the data base, if the required image is not in my assets it prevents my component to render/re-render and gives me a webpack error .
i want to be able to have a conditional rule for it, like if the required image wasn't there, the component renders normally and the image place become empty or shows a default icon.
is there any solution for that?

my requiring syntax is like this :
<img :src="require(@/assets/icons/${currency.symbol}.png) />
if the ${ingredients.symbol}.png was found in my assets icons folder it shows it . but if it's not it breaks the component!

Error: This relative module was not found: * ./SpinnerWave.vue

Hi. Sorry, complete noob here. I've cloned the repo and run npm install and then npm run serve, and I get the following error:

 ERROR  Failed to compile with 1 errors                                                                               16:11:40

This relative module was not found:

* ./SpinnerWave.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache
-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/DataBox.vue?vue&type=script&l
ang=js&

Can you help?

No needs double `data`

beauty-vuejs-boilerplate/src/services/base.service.js

Line 57 in 893d282

.then(response => resolve(this.responseWrapper(response, response.data.data)))

When I use the template, it will show data is undefined. But I can get the API result when I change response.data.data to response.data. Are there any problem with my setting? The axios version I use is "^0.18.0". Thank you.

Is there backend example source?

Thanks for this amazing boilerplate :) really.

i cloned this repo and am looking around.
by the way i found there is no way i can login.
as far as i found it looks like i have to prepare backend server to login, right?

of course i can ignore auth logic but i want to look around backend sever example source either.
can you give me how can i found proper source for backend?

Sorry about my stoopid English ;(

npm run build uglifyjs error

Hi, i'm trying to build my Vue project with "npm run build" command. but i keep getting some error related to UglifyJs -->

ERROR in static/js/vendor.46ca10154a1b16022343.js from UglifyJs
Unexpected token name «i», expected punc «;» [./node_modules/base-x/index.js:15,0][static/js/vendor.46ca10154a1b16022343.js:42282,11]

any idea about what is going on?
any help would be greatly appreciated.

Use Apicase

Hello! I took a look at your services section. To be honest, it looks awful.

I maintain Apicase - it's another library for work with API. Unlike axios, it's much more flexible and has advanced services so you don't need to write tons of boilerplate code.

Now I'm looking for creating some "starter kits" or smth else to show how to organize API in frontend applications (especially in Vue.js applications) with Apicase.

If you want to give it a try, I wrote some posts about using Apicase:

Css files order on build

Hi. we are encountering an issue , when we build the project using npm run build we face a problem with css ordering at the end . in the project we have a style.css file which has to override all the styles at the end . it works fine in the development mode. but when we build the project using npm run build command , what we see is that some node_module dependency styles are being placed after our style.css styles. how can we prevent that? how can we make sure that our style.css style codes ALWAYS comes last in the process of building our project?

any help will be much appreciated . i know it might not be a boilerplate Direct issue but still , we are facing this problem . thanks in advance .

License

Hello @zmts , could you please add a license to this repository?
So that we could use code in this repository.
Thank you in advance!