I am creating an SPA which should run on mobile devices too, so i used the F7 CLI to generate a F7+Vue+Cordova app template.
It comes with other things preinstalled and preconfigured (webpack, babel, ecc).
Since some of those things (webpack in particular) have a pretty steep learning curve, for now i’d like to avoid them unless extremely necessary.
So my question is: Is there a way to exclude webpack from the template, without breaking it all?
Is webpack really necessary in this template to make cordova work, or would it better to just create a project without the CLI, and then “compile” the project with cordova when needed?
thank you very much
How are you going to use Vue (compile Vue components) without webpack?
Sorry, didn’t think of that. Actually i didn’t even know about it…
I am used to using the framework7.bundle.min.js file by just inserting the script tag.
Is there a way to just use vue+f7+cordova without anything else? i’m asking because i am familiar (more or less) with these 3, but i am way less familiar with all these additional tools (node/npm, webpack, babel, ecc).
or, can you point me to some guide/description about the CLI template? i looked at some basic guide for webpack & his friends, but your setup (webpack.config.js) seems to be way more advanced and complex, so i have troubles understanding it.
thank you again for your time
Not really, Vue.js can’t be used without template compiler. Actually it can with compiler on front-end/client side, but it is highly not recommended for production as it can be very slow.
Well, i don’t understand what do you worry about? The webpack + babel + postcss setup is done in the way where you in 99% shouldn’t touch anything. There are, in addion, some
npm scripts also already prepared and described in readme.md file.
Better, if you will want something to change in webpack/babel setup, just ask here on forum, and we will help you
my wish to remove webpack originated because i couldn’t get images to work. Let me explain.
I created a folder called
images inside the
src folder. I then put an
<img> tag inside my template, but i wasn’t able to get the image via
src attribute. I tried with
<img src="../images/logo.png"> (since the template was in the
None of them worked. I then tried to comprehend the content of the webpack config file, and i understood that there’s a “loader” that fiddles with the http requests somehow. I couldn’t arrive to any useful conclusion, and i lost too many hours trying to figure out all of this mess… That’s the reason why i was determined to removed it.
I am willing to keep it now, so my question is:
How do i get my
<imgs> to work ?
in the readme there’s only the “assets” section which seems to be about the splashscreen/cordova icons, but not about normal images…
Create src/static/images folder
In Vue+Webpack, image assets are loaded/included automatically. To reference images it is required to use images path relative to path of current vue component:
Then in hello.vue it will be
And in webpack if you need to use some image or asset path, it can be retrieved with
var helloUrl = require(’…/images/hello.png’); // will return required image path string
Hi, thanks the reply, it worked… i tried it with a relative path before, but i think i used a path relative to the index.html instead of the component. I’m not sure. Anyway it works now.
Thanks for the suggestion!
I’ll place my images there
Yes, webpack is smart enough. So when working with it, you need to specifiy paths relatively to file you are working with, including JS, CSS and HTML files.
If in the future i have some other question about webpack, i’ll create another topic.
You can mark as solved.
edit: oh i’ve just seen it’s already solved, nvm