Vue 3 will become the new default release on February 7, 2022, according to the company’s previous announcement
Full text officer xuan: gist.github.com/yyx990803/b…
Part of this is about migrating repositories: All GitHub repositories under the Vuejs organization will switch the default branch to the corresponding version of Vue 3. It was also accompanied by the renaming of the ecological warehouse around Vue.
Today, let’s take a look at the latest Vue related official ecology and see if you have heard or used them.
⬇ ️
⬇ ️
First, there is the well-known Vue family bucket: Vue framework + routing + state management.
Vue buckets
Vue
Vuejs/vue:github.com/vuejs/vue
Code repository for Vue2
Vuejs/core:github.com/vuejs/core
Code repository for Vue3
Routing the Router
vuejs/vue-router: Github.com/vuejs/vue-r…
Vue2 version Official route
Vuejs/router:Github.com/vuejs/route…
Vue3 version official route
State Management State Management
Vuex:github.com/vuejs/vuex
Vue is an official Vue status management solution that supports Vue2 and Vue3 in V3 and V4 versions respectively.
Pinia:github.com/vuejs/pinia
Another official Vue state management solution, lighter than Vuex, based on Vue Composition API, supports both Vue2 and 3, supports DevTools browser plugin debugging, and may replace Vuex in the future.
⬇ ️
⬇ ️
Since Vue3 introduces the concept of Hook, here are some hooks:
Hook
Vue/composition – API:Github.com/vuejs/compo…
Vue 2 plug-in to provide composition API. Be able to use part of Vue3’S API in Vue2 projects to help smooth the transition to Vue3.
Vueuse:Github.com/vueuse/vueu…
Utils utility collection for Vue 2 and Vue 3. There are hundreds of hook functions such as useMouse and useScroll.
Vue – demi:Github.com/vueuse/vue-…
Vue Demi (Demi means half in French) is a set of tools for developers who develop Vue third-party packages. It allows you to develop generic Vue libraries that support both Vue2 and vu3. Vueuse, Vuelidate and Vue-Echarts all use this tool.
⬇ ️
⬇ ️
Next, look at the Vue project engineering related:
Engineering Engineering
The development of Dev
Build Tool Build Tool
Vite:github.com/vitejs/vite
Vite(the French word for “fast,” pronounced /vit/, like “veet”) is a new front-end build tool that dramatically improves the front-end development experience. Characteristic is fast!
The scaffold scaffold
The create – vue:Github.com/vuejs/creat…
To quickly set up the official scaffolding for a Vite based Vue project, simply run the command NPM init vue@3.
Vue – the cli:Github.com/vuejs/vue-c…
Create-vue is a developer tool for quickly building Webpack-based Vue projects. Create-vue is now officially recommended.
The Editor Editor
Vetur:github.com/vuejs/vetur
Official VSCode Vue tool extension, including syntax highlighting, snippets, Lint validation, code formatting, and more. Vue developers must install.
Eslint plugin – vue:Github.com/vuejs/eslin…
The official ESLint plugin for Vue.
Vue eslint – parser:Github.com/vuejs/vue-e…
Custom parser for ESLint to parse.vue single files.
Debug suite Devtools
Devtools:Github.com/vuejs/devto…
A browser devTools extension for debugging vue.js projects.
Test the Test
The Test Utils:Github.com/vuejs/test-…
Component test toolset for Vue 3.
Vue – jest:Github.com/vuejs/vue-j…
Jest converter for Vue single file components.
Build the Build
Vue – loader:Github.com/vuejs/vue-l…
Webpack is a loader for Webpack that allows you to create and package Vue components in a single file Component (SFC) format.
Babel – plugin – JSX:Github.com/vuejs/babel…
Babel JSX plug-in for Vue 3. Write Vue code JSX style.
A rollup plugin – vue:Github.com/vuejs/rollu…
Rollup plugin is no longer maintained. Vite and @vitejs/plugin-vue are recommended.
⬇ ️
⬇ ️
In addition to project development related, there are some other official warehouses:
Other Other
The Site generates a Static Site Generator
Vuepress:Github.com/vuejs/vuepr…
Vue – based, minimalist static site generator. Often used to generate personal blogs and document sites.
Vitepress:Github.com/vuejs/vitep…
Static site generator based on Vue and Vite. Is the Vite version of VuePress.
Quality content Collection
Awesome Vue:Github.com/vuejs/aweso…
Contains a lot of Vue related to all quality content. Includes interview questions, courses, open source projects, UI libraries, third party packages, toolsets, developer tools, etc.
If there are omissions, welcome to add comments.
❤ ️ support
If this article has been helpful to you, please support me by clicking 👍. Your “likes” are the motivation for my creation
Welcome to pay attention to the public account “Xiao Li’s Front-end cabin”. I am currently working in a big factory in the first line, and I will share and summarize my thinking and experience of front-end work in depth from time to time to help you become a better front-end.