background

Because I want to do the full stack, I am also from the back end, front-end knowledge is still at the level of more than ten years ago. When I started to learn Vue, Vue3. X version had been released, but it was not the release version. Many examples on the Internet were based on Vue2. Now that I’ve basically gone through them, I’ve organized the component versions I use as follows. If you are also learning about Vue3. X, when you read my article, I hope it will help you to avoid detdetments.

Component is introduced

  • Vue3. X is not enough to do a front-end project. My previous article also introduced how to start a vue3.
  • The components I use are: these components are for Vue3.X, you should pay attention to the next mark, Vue2. X is matched without next.
  • Routing: the vue – the router – the next
  • Status management: vuex-next
  • Message bus: Mitt
  • UI: Element-Plus, I’m using it, but there are other components, too, depending on your personal habits
  • HTTP library: Axios
  • Scaffolding: @vue/cli, help us create the project, I suggest you to use it, I read some documents say that the novice with the command bit by bit, such as skilled before using scaffolding. I don’t think so. There are so many posts on the web about how to use the CLI, you can solve these questions by reading these articles. My “Learning Vue3.0 Series” addresses this problem, and this article addresses the issue of versioning and summarizing the basic components.
  • The following table is the version in my project, which is the latest version.

The component details

The UI library: Element – plus

  • Official website address: element-plus.gitee.io/#/zh-CN

  • Element-plus.geitee. IO /#/ zh-cn /com… , can also be connected to the past from the official website

  • NPM install element-plus –save
  • Git address: Github.com/element-plu…

Routing: the vue – the router – the next

  • Official website address: next.router.vuejs.org/

  • API address: Next.router.vuejs.org/installatio…

  • Installation command: NPM install vue-router@4 –save
  • Git address: Github.com/vuejs/vue-r…

Status management: vuex-next

  • Next.vuex.vuejs.org/ is not the official address of the router.
  • API address: next.vuex.vuejs.org/

  • Installation command: NPM install vuex@next –save
  • Git address: Github.com/vuejs/vuex/…

Event bus: Mitt

  • API address: THE API address is also in here, see readme.md

  • Installation command: NPM install mitt –save
  • Git address: Github.com/developit/m…

HTTP library: axios

  • The official website address: www.axios-js.com/, temporarily can not climb the wall, put a Chinese document placeholder.

  • API address: you can learn from Readme in Git address, or from Chinese website. www.axios-js.com/

  • Install command: NPM install axios –save
  • Git address: github.com/axios/axios

Scaffolding: @vue/cli

  • Official website address: cli.vuejs.org/zh/

  • API address: cli.vuejs.org/zh/guide/

  • Installation command: NPM install -g@vue /cli, this is global installation
  • Git address: Github.com/vuejs/vue-c…

​​​​​​​

conclusion

  • Start a vue front-end project, basic components are basically referenced to complete, Vue3. X corresponding version, installation commands, API, official website are summarized for everyone.
  • Other component libraries are commonly used JS component libraries, which have no relation with Vue itself, save JS applications.
  • Again, the installation commands for the corresponding components of 2.x are differentiated
  • I hope this summary is helpful to the students who are confused by the version. Thank you for your attention.