Learn Vite with Evan You

Поделиться
HTML-код
  • Опубликовано: 18 июн 2024
  • Ready to master Vue.js? With weekly Vue js tutorials on the latest topics, and exclusive content with Evan You (the creator of Vue), Vue Mastery is the ultimate learning resource for Vue developers to level-up their skills. Watch more free Vuejs tutorials (including Evan's full Vite course) 👉 www.vuemastery.com/courses
    Get in touch 👉 team@vuemastery.com
    0:00 Introduction
    0:31 What is Vite?
    3:40 Getting started with Vite
    6:48 Typescript
    9:21 CSS
    10:57 Dependencies
  • НаукаНаука

Комментарии • 209

  • @ddevulders
    @ddevulders 2 года назад +538

    Evan, how am I supposed to get my coffee in between builds now huh? you only think about yourself.

    • @AndrewRusinas
      @AndrewRusinas 2 года назад +20

      Hahahaha I said to my team the same :D

    • @olezhonnv3215
      @olezhonnv3215 2 года назад +1

      You will be fired in nearest few years, because frontend will be generated using AI.
      Go drink your coffee. and eat banana!

    • @uskaishiga
      @uskaishiga 2 года назад +5

      Great comment man hahaha

    • @anuragpramanik6095
      @anuragpramanik6095 Год назад +1

      Nice one!! :D

    • @dekcode2824
      @dekcode2824 Год назад +1

      That's the downside of vite I am struggling with 😂

  • @cedrics7374
    @cedrics7374 2 года назад +221

    Having someone explain his own work is so much better 🙂

  • @houiderwalid5842
    @houiderwalid5842 2 года назад +103

    Omg he's a really good teacher too.

  • @lorandhorvath4466
    @lorandhorvath4466 2 года назад +133

    Evan, this is amazing. You basically killed all webpack-based tooling. Good job, I won't miss any of that, not one bit!

    • @damianperez7736
      @damianperez7736 2 года назад +3

      @@dae2530 keep coping like that

    • @heathledger7291
      @heathledger7291 Год назад

      Not killed, but for most typical frontend site codebases with a single index.html where scripts,stylesheets are injected into its probably the best solution

    • @lorandhorvath4466
      @lorandhorvath4466 Год назад

      @@heathledger7291 It can also handle multiple entry points...

  • @Zen-rl5pv
    @Zen-rl5pv 2 года назад +93

    First time seeing the vanilla version of vite, it really is looking like the future of frontend tooling!

    • @TLJAFAR
      @TLJAFAR 2 года назад +2

      Yeah 😊

    • @cary3682
      @cary3682 2 года назад

      Yeah!that is so cool

  • @bobsmithy3103
    @bobsmithy3103 Год назад +1

    Love you man! For the last few years I could never get into typescript because of all the issues I had with webpack configuration but this solved essentially all my pain points! THANK YOU SO MUCH!

  • @xxidbr9
    @xxidbr9 2 года назад +5

    i use vite for building components in react, and i really love it ❤️‍🔥❤️‍🔥❤️‍🔥

  • @saulsalazar7410
    @saulsalazar7410 2 года назад +20

    I love Vue for all the freedom it gives in development and I hope fall in love with Vite too.

  • @prachi.srivastava
    @prachi.srivastava 6 месяцев назад

    this is by far the awesomest video to understand what vite does

  • @tomino133
    @tomino133 2 года назад +1

    What an absolute legend this guy is

  • @SewonKimMusic
    @SewonKimMusic 6 месяцев назад

    this is incredible! I'm honored to receive such valuable education.

  • @luzaw4957
    @luzaw4957 2 года назад

    Never thought Vue creator, an ex-Google would do this simple tutorial, awesome!

  • @francescotrillini5226
    @francescotrillini5226 2 года назад +3

    Love the way he’s teaching

  • @dotdot-zp5vx
    @dotdot-zp5vx Год назад

    i Love how excited and proud he is

  • @theohallenius8882
    @theohallenius8882 2 года назад +4

    I've been enjoying the Vite + Svelte combo, it's like "wow, where has this been all my life?"

  • @jimshtepa5423
    @jimshtepa5423 2 года назад +15

    I wish you covered more details of how vite is different from parcel (or similar instrument). I recognize that it may sound too basic information but beginners like me would appreciate some basic details along with more advanced ones. Apart from that the content is really good and I cannot even imagine how difficult it was to build such instrument. Thank you for the material. Your time is well appreciated

  • @mrCetus
    @mrCetus 2 года назад +11

    This is a great peek at what's going on in the frontend world 😄 I hope you turn this into a series.

    • @VueMastery
      @VueMastery  2 года назад +5

      This is part of a full series, available here: www.vuemastery.com/courses/lightning-fast-builds-with-vite/intro-to-vite

    • @akaza7613
      @akaza7613 Год назад

      @@VueMastery but I'm poor
      I can't afford 😭💔👍

  • @fifty6737
    @fifty6737 Год назад

    this hands down one of the coolest shit i've seen in frontend tools

  • @programmingholic
    @programmingholic Год назад +1

    Evan it's really Great, Thankyo for this .

  • @romannimchuk5073
    @romannimchuk5073 2 года назад +1

    Was trying to use it with my ts+react project, but faced with some polyfill issues so I give up and choose raw esbuild. Anyways, from the developer perspective vite looks simple and amazing and I wish to use it in future projects

  • @tbugaevsky
    @tbugaevsky Год назад

    Thank you for care of dev server speed, it was pain working without it.

  • @sonofabippi
    @sonofabippi Год назад

    Build cycles in my first job were 2-3 minutes. 2-3 minutes. Two, to three minutes. A full build of everything from the drop to make a .bin file to burn to 'the thing' was 27 minutes.

  • @gsop7385
    @gsop7385 Год назад

    great tutorial, thank you so much

  • @saultube44
    @saultube44 Год назад

    Efficient as Native, that's great 😃👍
    Thanks 🙏
    I'm a 100% n00b programmer in JavaScript, I'm trying to educate myself, I can code on Pascal 7, Delphi and Visual Basic, so I can't understand much, but I understand enough, to see that is reduced to calls 🤙to Native code and not to a VM or other slow engine

  • @re.liable
    @re.liable Год назад

    Started with Grunt the other day. Will be migrating to Vite immediately 😆

  • @TheMenny10
    @TheMenny10 2 года назад +4

    Awesome video! Quick question, what's the VS Code theme's name and the icon's name? looks super dope!

  • @salehmir9205
    @salehmir9205 2 года назад +32

    This guy is the best thing that happened to JS just like Taylor Otwell is the best thing that happened to PHP

    •  2 года назад +2

      What about Fabien Potencier?

  • @werneralonzo1230
    @werneralonzo1230 2 года назад +1

    awesome, looks very very well

  • @rajdeepc03
    @rajdeepc03 2 года назад +2

    This is amazing... Please support angular too!

  • @dorianxonic
    @dorianxonic 2 месяца назад

    This is so cool!

  • @kma1138
    @kma1138 2 года назад +10

    "Who's the teacher in that video?"
    "It's You"
    "Huh? I mean who is the teacher?"
    "It's really You!"
    ...

    • @howhello354
      @howhello354 2 года назад +1

      : hi, I'm you
      : then who I'm!

  • @jakeave
    @jakeave Год назад

    I just remember crying and dying trying to update babel and babel plugins, and having a build tool that takes advantage of the current state of browsers is so nice.

  • @BsiennKhan
    @BsiennKhan 2 года назад +2

    Does it do tree shaking? I was assuming only importing debounce from lodash, The file size would ib in KBs instead of 1.3MB @13:00

  • @jbrown-acuity
    @jbrown-acuity 2 года назад

    Thanks Evan!

  • @soumelee5661
    @soumelee5661 Месяц назад

    amazing video

  • @koistya
    @koistya 2 года назад

    Is it going to work with stuff relying on Babel plugins such as Relay compiler, allowing to have GraphQL fragments inside of js/ts code (similarly to how you use JSX inside .js/.ts files)?

  • @awesome-view
    @awesome-view Год назад

    Wow, this is a game-changing tool.🙂

  • @niner8275
    @niner8275 2 года назад +2

    I always found that vite felt somehow like magic. Now I know it IS magic 😉

  • @cutups
    @cutups 2 года назад +1

    Followed along here and found that not only is hot reloading not working, nothing updates at all unless I restart the dev server. Any basic troubleshooting tips?

  • @superJerrySong
    @superJerrySong Год назад

    vite is awesome 🥰

  • @maizesoft
    @maizesoft 2 года назад +1

    If the us and html is in the public folder, it does not load the import module?

  • @hidami3241
    @hidami3241 2 года назад +1

    Hi Evan, any plans for mobile app development with vuejs?

  • @IvanDerevyanko
    @IvanDerevyanko 2 года назад +5

    Thanks for Vite, great tool! As Fo TS, the most valuable reason to use TS is type checking and we lose it with Vite. It would be awesome to have an option to switch from es build

  • @zarefaworld7628
    @zarefaworld7628 Год назад

    thanks for your explained. iwanna ask in my case i have laravel breeze with vite and i must run 'npm run dev' to open the project and works good. then how to deploy to the web server works good cause in the web server i cannot run ''npm run dev''

  • @theworld5937
    @theworld5937 2 года назад +2

    This man is a legend. 15 gold Olympic medals if JS was a sport.

  • @vladhusnullin1650
    @vladhusnullin1650 2 года назад +2

    How about debuging JS/TS in the chrome dev tools ?

  • @arkad-journeytobigtech9797
    @arkad-journeytobigtech9797 2 года назад

    hello does someone know what colour theme is this on vscode?

  • @tomaaa08
    @tomaaa08 2 года назад +1

    The production quality of this vid is very high, good job! How did you record it? Or what software did you use for it?

  • @dnsnsjsjsj
    @dnsnsjsjsj 2 года назад +1

    I love vue

  • @uquantum
    @uquantum Год назад

    Thanks Evan! Like some others watching this I work daily with Webpack5 which gets the job done. Vite looks like just the thing to try out on a new three.js experimental 🧪project where I was looking for faster/hot reloads (than Webpack) to be more forgiving on me as I blunder my way up the three.js learning curve

  • @Tony.Nguyen137
    @Tony.Nguyen137 Год назад

    Can I change the css code template of the provided css file?

  • @AlexKozack
    @AlexKozack 2 года назад

    It looks like CSS Module Scripts comes into our lives. Are there any plans to abandon your own version of working with CSS in favor of native modules?

  • @nikolaykoychev8261
    @nikolaykoychev8261 2 года назад +1

    Bose NC 700 - have the same headphones :)

  • @AlfredTuinmanOurManInIndia
    @AlfredTuinmanOurManInIndia 2 года назад

    I may be missing a point but how do i procress a js file before rendering the html page. In Webpack one has an html (ejs) file and a js file per page. So I am kind of lost here. I don't use frameworks and only vanilla javascript

  • @jsonkody
    @jsonkody 2 года назад

    Vít (same pronunciation as Vite) is czech name. Vít is super formal form though.
    Home form: Vítek
    English: Guy, Vitus

  • @deamorta6117
    @deamorta6117 2 года назад

    Vite is the best!

  • @luyuanqiang
    @luyuanqiang 2 года назад

    Cool, it is nice.

  • @asim-gandu-phenchod
    @asim-gandu-phenchod 2 года назад

    Good quality

  • @ronyfhebrian2629
    @ronyfhebrian2629 2 года назад +1

    I too collect Gundam, Evan!

  • @cubedev4838
    @cubedev4838 2 года назад +4

    The best thing about vite is the fouder itself teach people.I hope Evan Yu can teach us more about vite. Maybe do a lots of common projects such ecommerce, CRUD and etc. So people can see clearly the power of vite. But i wondering what happen to Vuejs?

    • @alexdevorigin1
      @alexdevorigin1 2 года назад

      Sigue en pie, lo único es otra herramienta más pero con otra agilidad

  • @cnikolov
    @cnikolov 2 года назад +1

    Its really cool I just didn't get why would you use typescript but without type checking? just to get features such as interfaces etc? would it be worth to write interfaces if there is no type checking

    • @mohammedaliagha7520
      @mohammedaliagha7520 2 года назад

      VSCode or another IDE that's setup properly will give you type-checking, so doing `let foo: number = "bar"` for example will show an error in the IDE

  • @murmotivationmusic6151
    @murmotivationmusic6151 2 года назад

    awesome

  • @AndrewRusinas
    @AndrewRusinas 2 года назад +1

    Hey, what about Vite support Vue 2?

  • @jonathansigg8563
    @jonathansigg8563 2 года назад

    Is there ANY tutorial for vitesse????

  • @AnimusAgent
    @AnimusAgent 2 года назад

    Why is angular not supported? I know that angular cli is already using esbuild on version 13, so angular cli is just as fast as vite?

  • @ricosrealm
    @ricosrealm 2 года назад +5

    What's the point of supporting Typescript in development if there's no type-checking? The claim that your ide can handle that is not a good one. VScode isn’t a great tool for surfacing errors in customized typescript workflows or just in deeply nested projects in general.

  • @athitsaewang3652
    @athitsaewang3652 2 года назад

    i have websocket connection to wss failed. How i can resolve that, thanks

  • @roshanjameershaik8391
    @roshanjameershaik8391 2 года назад

    please make a video about module federation using vite originjs plugin

  • @derjansan9564
    @derjansan9564 2 года назад +4

    I often have problems with old listeners still being attached after a hot reload. Are there any best practices to avoid this?

  • @elultimopujilense
    @elultimopujilense 2 года назад

    WOW!

  • @user-zd5ld7zw9d
    @user-zd5ld7zw9d 2 года назад +1

    其实是想说 loaash-es 会 tree shaking 的是吗?

  • @g43s
    @g43s 2 года назад

    I hope we get React Native support in the future

  • @Viralplace
    @Viralplace 2 года назад

    I have problems with the @use and @import in vite.js.
    I can't use @use to import a folder for example @use 'components', I can't use @import with comma and without .scss extension, for example @import 'uno', 'due', 'tre': but I have to write always @import.... why? it's terrible

  • @DavidHarperUK
    @DavidHarperUK 2 года назад +5

    Well now I know it's not Vite as in bite, but Veet as in the hair removal cream. Can't wait to use it though.

    • @roteschwert
      @roteschwert 2 года назад

      The "t" at the end is also a soft one

  • @RJ67.
    @RJ67. Год назад

    How do I unlock my aetherium I sent less than zero point three

  • @krtirtho
    @krtirtho 2 года назад +4

    A little bit of clarification,
    Well, not type checking typescript files wasn't a choice for Vite, it's a limitation bound to ESBuild
    Since ESBuild is written in Go & Go is a statically typed language. But it doesn't support interfaces/unions/generics (generics are supported in beta though). Also it's OOP works bit differently & uses structs instead of classes (similar to Rust/C) to support OOP-'ish' paradigm. Thus it's hard to implement the TS Type-Checker in Go but not impossible
    Also implementing "static" Typechecking is a lengthy process & requires huge patience & a lot of code. All the reason combined it was a bit too hard for the ESBuild (also Vite) team to accomplish such difficulty but we know OSS, right? We'll overcome this limitation too!👍
    BTW, for your information, the one & only Typescript type-checker is the official one. Though there's been work going on in SWC (Rust based frontend build system) but it seems the author will keep the type-checker part proprietary & paid

    • @Ilyushya
      @Ilyushya Год назад

      Go has interfaces, by the way

  • @ashutosh887_
    @ashutosh887_ Год назад

    How to add env variables to vite.config.js (I'm creating a React Vite Project)

  • @darkmode404
    @darkmode404 2 года назад

    I would like to ask, as I am trying to access free tickets available registration link, the page cannot be reached

    • @VueMastery
      @VueMastery  2 года назад

      Hi David, is this link working for you?: www.vuemastery.com/vite-weekend-2021

  • @p_levin
    @p_levin 2 года назад

    What about Jest?

  • @timurtimak6372
    @timurtimak6372 2 года назад

    Is it Google Glass on the thumbnail?
    Is the image flipped? I thought there was only right-eye version.

    • @VueMastery
      @VueMastery  2 года назад

      Yes it's flipped. Good eye! 😁

  • @hessiride1729
    @hessiride1729 2 года назад

    nice...

  • @kaleabayele918
    @kaleabayele918 Год назад

    but still vite is not working for me with react the server do not start. has some error on callback function

  • @DjLeonSKennedy
    @DjLeonSKennedy 2 года назад +1

    cool

  • @codernerd7076
    @codernerd7076 Год назад

    I wish there was a option to make it use one src folder

  • @SteveInTek
    @SteveInTek 2 года назад +1

    does anybody know which VS code color schema Evan is using on the video?

    • @pdi999
      @pdi999 2 года назад +1

      I think it is Material Theme (Palenight High Contrast)

    • @SteveInTek
      @SteveInTek 2 года назад +1

      @@pdi999 awesome! thank you

  • @artihlec
    @artihlec 2 года назад

    npm init vite - BOOM!
    it DOES work with react
    I consider to use it instead of CRA - advantages are obvious, what about disadvantages, can you point some?

  • @mossfoobar8322
    @mossfoobar8322 2 года назад +2

    Does it work with frameworks such as vuetify? How can i bundle my existing vuetify project with vite 🙈 with vite ... Get it?

  • @normanejm
    @normanejm 2 года назад

    Where I can find these vite's videos... ??

    • @VueMastery
      @VueMastery  2 года назад

      You can find them here: www.vuemastery.com/courses/lightning-fast-builds-with-vite/intro-to-vite ☺

  • @aogposton
    @aogposton 2 года назад +16

    Me: Who's teaching Vite?
    Someone: You?
    Me: ME?
    Someone: No, You.
    You: Someone has to do It.
    It: Sheesh... Can we get dinner first?
    [At Dinner]
    Someone: So anyways, Im a React developer. What about You?

  • @ahmadmobaraki7371
    @ahmadmobaraki7371 2 года назад +11

    Vite is awesome :), you deserve to have a better microphone!!

    • @tibideac
      @tibideac 2 года назад +3

      and a debounce support for webcam

  • @creativedeveloper6921
    @creativedeveloper6921 2 года назад +2

    dumb question.. why not just use esbuild then? What am I missing here?

  • @abdelhamidkhalil6535
    @abdelhamidkhalil6535 2 года назад

    Does anyone knows what theme is used in Vscode ?

  • @lobobogard9236
    @lobobogard9236 2 года назад

    is that the reason I am learning golang because is the future in my opinion personal first laravel octane in the back end now vite in the front end beatiful.

  • @federicobau8651
    @federicobau8651 7 месяцев назад

    Evan You, so fucking smart guy. Daamn.

  • @user-rh6lx7yn6j
    @user-rh6lx7yn6j 2 года назад

    不错

  • @j4nch
    @j4nch Год назад

    Vite is awesome, but I must admit I get a bit lost between what I was thinking a frontend tooling does and what a framework does(typically, why vite's plugin could manage my app framework. Is it still a bundler/tool to manage/compile my frontend since it starts to handle logic of the app? As a newbie, it's a bit hard for me to understand where Vite ends and where Vue starts.

    • @VueMastery
      @VueMastery  Год назад

      We have a full course taught by Evan: www.vuemastery.com/courses/lightning-fast-builds-with-vite/intro-to-vite, hopefully he can help answer your questions. 💡

    • @j4nch
      @j4nch Год назад

      @@VueMastery thanks, I will take a look. The last courses I checked on your platform were outdated.

    • @VueMastery
      @VueMastery  Год назад

      @@j4nch Which courses are you referring to? We've been hard at work publishing a bunch of new courses on the latest releases, with 5 new courses published in the past couple months :D

    • @j4nch
      @j4nch Год назад

      @@VueMastery I only tried the "Intro to Vue 3", but it doesn't use the Composition API(which should be the de facto approach nowadays), nor the script setup tag which make much more sense to me. I never liked the option api approach(reason why I was mostly doing some angular/react until now)

  • @alextl97
    @alextl97 2 года назад

    This dude was born to be a Javascript engineer.

  • @sergiomartin5445
    @sergiomartin5445 2 года назад +1

    Why is it working? I mean, I can't see any webpack configuration anywhere.

    • @lorandhorvath4466
      @lorandhorvath4466 2 года назад

      Haha, good one. Because it's not webpack, but esbuild for development and rollup for production.

  • @quietlab.5727
    @quietlab.5727 Год назад +1

    what terminal app/theme he use?

    • @seth_sesu
      @seth_sesu Год назад

      I was wondering the same. Looks much better than Apple's.

    • @seth_sesu
      @seth_sesu Год назад

      it's iTerm

  • @Kanexxable
    @Kanexxable 2 года назад +1

    Thanks for the presentation but at the moment vite does not work well with docker I hope that problem gets fixed.

    • @shinobi77
      @shinobi77 2 года назад +1

      I'm using it with Docker 🙂 although it was not straight forward. What is it you're going through? maybe I can help.

    • @justafreak15able
      @justafreak15able 2 года назад

      @@shinobi77 What is the issue?

    • @mojekonto9287
      @mojekonto9287 2 года назад

      Apparently you do not fully understand what you talk about. If Vite works in your system then it will work in Docker as well.

    • @justafreak15able
      @justafreak15able 2 года назад

      @@mojekonto9287 exactly

    • @JB-fh1bb
      @JB-fh1bb 2 года назад

      @@shinobi77 Can you share your script/Dockerfile/whatever worked so that others can benefit?