Do I start with Vue 2 or do I go straight to Vue 3? “Just learn Vue 3,” he said. “The basic concept is the same.”
The above content is from the latest issue of programmer magazine. The link to the original article is “Learn Vue 3 directly — dialogue with Vue.js author Yu Yuxi”.
preface
Since Vue 3.0 came out, I have been constantly trying to learn and accept new concepts. No way, as a front-end development, and not graduated from a famous university or working in a big factory, continuous learning, training learning ability, is our common front-end development of the core competitiveness.
Of course, some students argue that I can develop my own core competitiveness by specializing in one technology. Ok!! Has a strong willpower. But for most students, it’s hard to have that kind of willpower. Such as CSS big guy Zhang Xinxu, Canva big guy old Yao, visualization big guy moon shadow, interview questions big guy Aobin and so on. The amount of energy these bosses expend on one thing requires a high level of willpower and execution. I can’t do it anyway.
There is no end to learning!
Make sure you start typing code. Learning without practice is also not an option.
This article mainly introduces some of my studyVue 3.0During the period, read some of the more useful resources, and share with you, do not like spray, spray I also learn @Nick Chen along the network cable to find your home.
I and the Vue 3.0
In fact, I have been following the progress and news of Vue 3.0, but the real learning happened after its official release. In September 2020, I also published an article “Vue 3.0 is coming, what should we do?”. I also made my own study plan.
In fact, the process of learning any new skill is the same:
See the document → learn new grammar → do a small demo → do a few actual combat projects → see the source code → finishing experience and share.
Learning Vue 3.0 is also the same, although I love to joke, also love to write jokes, the title is also a slouch, but learning and action I am not worse than others.
In the process of learning, I read documents, made demos, and then I have been learning and sharing Vue3 knowledge points, such as publishing some Vue3 tutorials:
- Vue 3.0 is here, what should We Do?
- Vue3 Actual Combat Series: Integrating Ant-Design-of-Vue Practical Composition API
- “Vue3 is here, Vue3 Open Source Mall project refactoring plan officially launched!”
- Vue3 Real Combat Series: Building Seed Project of Vue3.0 + Vant3.0
- 🎉🎉 An open source mall project based on Vue 3 + Vant 3 🎉🎉
- Vue3 Tutorial: Developing small programs with Vue3, here is a code of practice!
- Vue3 Tutorial: Where is Vue 3.x Fast?
- Creating a Vue3 + Element-Plus Backend Management System
- 🎉🎉Vue 3 + Element Plus + Vite 2 Background Management System open source 🎉🎉
- Programmer’s sideline: Wrote a column called “Vue 3 Enterprise Project In Action”
Also did a few Vue 3.0 actual combat project practice, after the release to also open source GitHub, visit the address as follows:
in GitHub : github.com/newbee-ltd
in Gitee : gitee.com/newbee-ltd
One is the Vue3 version of the mall project:
One is the Vue3 version of the backend management project:
All open source, background API also has, are very practical projects. The response so far has been good, and there has been a lot of positive feedback from people who have received a lot of thanks for having a great Vue3 hands-on project for these free open source projects, for completing course assignments or adding project experience to their resume.
Next is the learning process, I think very useful resources, you can refer to and use when learning Vue 3.
Vue 3.0 related technology stack
| Related library names | Online address 🔗 |
|---|---|
| Vue 3.0 Official Document (English) | Online address |
| Vue 3.0 Chinese document | Online address Domestic accelerated edition |
| Composition – API manual | Online address |
| Vue 3.0 source learning | Online address |
| Vue-router Official document | Online address |
| Vuex 4.0 | Github |
| vue-devtools | Github(Vue3.0 requires the latest version) |
| Vite source learning | Online address |
| Vite 2.0 Chinese documents | Online address |
| A new dynamic Vue3 | Online address |
I often look at this warehouse, there are the latest Vue3 articles, warehouse and so on, are in Chinese, the author should be our big brother, you can also pay attention to.
Update the open source UI component library for Vue 3.0
During Vue 2.0, there were a number of good open source component libraries that we grew up with. Let’s take a look at which component libraries have been updated to Vue 3.0.
Element-plus
Introduction: You must not be strange, its Vue 2.0 version is Element-UI, after kun brother and his friends developed Vue 3.0 version of Element-Plus, is really excellent, the number of thumbs up nearly broke ten thousand, continue to pay attention.
Warehouse address 🏠 : github.com/element-plu… ⭐ : 9.8 k
The document address is 📖 : element-plus.gitee. IO /#/ zh-cn
Open source project 🔗 :
- Vue 3.0 + Vite 2.0 + Vue-Router 4.0 + Element-Plus + Echarts 5.0 + Axios developed background management system ⭐ : 419
- Vue3.0+TypeScript+NodeJS+MySql compiled a set of background management system ⭐ : 262
Currently, there are not many open source projects for Element-Plus, but previous open source projects related to Element-UI, large and small, have been working on element-Plus adaptation. I would also like to thank Kunge and his friends for maintaining the Element series, which is a very strong contribution to Vue’s ecology.
Ant Design of Vue
Introduction: It is one of the first Vue 3.0 adaptor component libraries, Antd official recommended component libraries.
Warehouse address 🏠 : github.com/vueComponen… ⭐ : 14.8 k
Address: 📖 : antdv.com/docs/vue/in…
Open source project 🔗 :
- AntdV background management system ⭐ : 2.8K
- Vue3.x + Ant-Design-Vue (Beta version, free commercial, PC, tablet, mobile) ⭐ : 8.2k
- Based on Vue3.0 + Vite + Ant Design Vue ⭐ : 74
The latest update was on February 27, 2021, so the library is still reliable.
Vant
Introduction: domestic mobile terminal leading component library, used all say, I have used this component library in two projects, also is relatively early to support Vue 3.0 framework, should have.
Warehouse address 🏠 : github.com/youzan/vant ⭐ : 16.9k
Document address 📖 : vant – contrib. Gitee. IO/vant/v3 / # / z…
Open source project 🔗 :
- Newbee-mall Vue3 version ⭐ : 1.7K
- High copy wechat account book ⭐ : 48
- Imitation jingdong Taobao e-commerce ⭐ : 319
NutUI 3
Introduction: The mobile terminal component library developed by JINGdong team was recently upgraded to Vue 3.0 version, and the article is here. Although I haven’t used this library, they update faster than many other libraries, showing that they have a good attitude towards the latest technology.
Warehouse address 🏠 : github.com/jdf2e/nutui ⭐ : 3.1k
📖 : nutui.jd.com
Open source projects 🔗 : basically have not seen open source projects, if there are still hope everyone positive comments.
Vue 3.0 practical video learning
| Related library names | Online address 🔗 |
|---|---|
| Vue 3.0 actual constellation H5 project | Online address |
| Vue 3.0 UI component library development | Online address |
| Read the Vue 3.0 + Vite manual | Online address |
| Vue 3.0 Entry Project Construction (Mr. Yang) | Online address |
| Getting Started with Vue 3.0 (Tech Fat) | Online address |
| Vite 2.0 plug-in development Guide | Online address |
| Quickly build Electron application with Vue 3.0 + Vite 2.0 | Online address |
The above video, I have learned, quality control, I hope to help you get started with Vue 3.0.
conclusion
Learning is a lifelong thing, not only refers to learning computer technology, all aspects of life need to keep a heart of learning, I wish you a happy learning.
In addition to indicate the reprint/source, all are the author’s original, welcome to reprint, but without the consent of the author must retain this paragraph of statement, and in the article page clearly given the original link, or reserve the right to seek legal responsibility.