Creating Your First Vue 3 App with Vite - A Beginner's Tutorial
HTML-код
- Опубликовано: 21 окт 2024
- Vite is a new tool to improve your frontend development experience - especially in Vue! It's lightning fast, easy to setup, and intuitive for people with experience with the vue-cli.
In this video, we'll cover the basics of Vue 3 and the Composition API, see how to create your Vue 3 app with Vite, and look at some other concepts like lifecycle hooks, simple event listeners, and more.
COMPANION ARTICLE WITH CODE
learnvue.co/20...
FREE VUE 3 CHEATSHEET WITH ESSENTIAL CODE SNIPPETS
learnvue.co/vu...
follow me on twitter:
/ mattmaribojoc
🚨 Like quick Vue lessons like these? Check out 800+ lessons over on Vue School - go.learnvue.co...
I have watched a ton of vue tutorials, and I must say that yours was one of the very best. It'll be interesting to see where you go in the future.
Thanks! Glad you found it helpful.
This format does not allow me to get bored. Very well executed
That tutorial was great. Straight to the point and got me to solidify the little that I know about the composition api.
This is a really awesome summary! An idea I have is to re-create this video every year highlighting any new changes in initializing new projects using latest best practices.
Doing the course on your website. I am a few lessons in and this is already an outstanding course. Very well explained and presented. Excellent value for money. Hoping you release more courses in the future.
I can't believe you have so few videos. You shot very high quality content, I hope you continue
Thank you!! I will continue so subscribe for more :)
@@LearnVue ok subscribed
Seriously binging your channel right now. Need more content!
thanks so much - im working on more content!
ur such a great creator i am struggling to learn react or vue u cleared my doubt real thanks
We will watch your career with great interest.
We will indeed
Your videos are short and very much understandable. Please make videos on Vue authentication using vuex and laravel sanctum or passport.
Vue w/ Passport tutorials sound great - definitely going in the list of videos to make!!
Short and informational, thanks
Thanks. Best video about the topic out there.
Wow, thanks!
Nice video thank you
Great tutotial, thanks !
Thanks! Glad to hear you like it :)
Subsribed and I'm expecting more content from you. Keep it up dude 😉
Thanks!
I just wonder why you did not use style when the scaffold already showed it.
Nice and clean.
Thanks 👍 good work ❤️
Awesome video. Thanks
awesome tutorial
great explanation
Thanks so much for the kind words, can't wait to make more content for all the Vue devs out there!
Would love if you posted a link to the code repo with this example in it
Hey! I don't have a code repo at the moment, but most of the code can be found on our website on the companion article: learnvue.co/2020/12/setting-up-your-first-vue3-project-vue-3-0-release/.
@@LearnVue thanks! Yes I saw the article, but was hoping to pull down the repo instead of copying all the individual pieces
Thanks for the vid! How could you make a Vue boilerplate including router components with vite?
should we consider use vite from now on ?
How do I add vue-tools and sqlite?
Maybe it wasn't meant to, but the initial install fails on Windows (error: ERROR_REQUIRE_ESM)
what version of node are you running?
This is a great tutorial. Subscribed. Not to be too cheeky, but any chance you might know how to properly configure Vite to run with Postcss and Autoprefixer? I've been digging around for the last few days and can't seem to get autoprefixer to work with Vite at all.
same here...trying to get that going but no luck so far
The latest version of Vite should be working with PostCSS automatically, according to the docs, so all you should need to do is add a postcss.js.config to the directory where your project is. It's kind of frustrating digging for this info, so here's what mine looks like:
const { default: postcss } = require('./node_modules/postcss');
module.exports = {
plugins: {
'precss': {},
'postcss-preset-env': {
stage: 3,
},
'autoprefixer': {},
'cssnano': {},
}
}
The info for what to put in those curly braces is on the docs for each individual plugin, as each one has different config options, such as my "polyfill," which is set to stage 3. Of course, you'll also need to install all the PostCSS plugins you want before they work, with yarn or npm. This is basically what I did for mine:
yarn add postcss
yarn add autoprefixer
yarn add cssnano
yarn add precss
yarn add postcss-preset-env
Adding them all on a one line command didn't work for me for some reason, so I separated them like that.
Then I restarted the server, and it was working great. Another thing to keep in mind is that not a lot of prefixes are needed these days, so prefixer might actually be working, just not adding prefixes that aren't needed. A great one to test is "::placeholder." Prefixes for that will be generated if things are working.
One more thing: I don't know 100% if PostCSS is run in the dev server (I'm not THAT smart yet), but I know for sure it runs on build. :]
That might be TMI, but I hope it leaves no questions for anyone who wants to know how to get this working.
@@clarkeeeee Thank you so much for the in depth answer :) I will try this out as soon as I get a chance, in the mean time, I had already moved away from Vite, leaving it to mature some more before using on production projects.
@@CatoTheAdopted No problem, good luck on your adventuring!
What does "export default" ?
Too fast. But thank you.
Sorry about that - I'm working on finding the perfect speed to teach everything, but I hope it was still useful.
why the fuck is this video so fucking fast ???
now i need to watch it 2+ times to make sure i understood everything
Now where's the Vite 2.0 video? Haha
This is way too fast
👍
okay
Too fast. Give people time to process the information.