Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Today’s content is mainly to build vue3 development environment with you and how to install VUe3 or introduce VUe3 into your project.

Vue not only has a place in large enterprises, but also is the first choice of small and medium enterprises. And now front-end positions are more popular, so I also want to touch Vue. Modern popular frameworks build the Web around components, which are designed for reuse because they are easy to maintain and co-develop. There is also responsive programming, data-driven interface, through the MVVM design mode VM in the data and interface to establish a two-way bridge, so that programmers from frequent DOM operations out, more focused on business logic.

By studying the VUE framework we get to a point where interpretation can provide a general solution to some problems or problems that may arise in a particular area. It is not limited to one grammar or one specific solution. This is an ability that I lack at present. I hope that when we learn Vue together, we will not only understand the API of Vue, but also think about why we propose this API, the original intention of the API design, or the specific problems that can be solved with this API.

Vue installation

The preparatory work

  • Install nodeJS to build the development environment
  • Install the Visual Studio Code development tools
  • Install the Vetur plug-in, which provides generating power for code output

Install the vue

There are three ways to add a VUE to a project

  • The CDN approach to introducing Vue is usually used to introduce Vue to your previous projects that have some history
<script src="https://unpkg.com/vue@next"></script>
Copy the code
  • Installing Vue using NPM is the recommended method for building large-scale applications using Vue.
npm install vue@next
Copy the code

When building large-scale applications with Vue, NPM is a more popular way to install Vue than CDN.

  • Vue CLI(Scaffolding to install Vue)

It takes minutes to get up and running, with hot overloading, lint-on-save, and production-ready build features.

npm install -g @vue/cli
Copy the code

Vue provides an official CLI for quickly scaffolding single-page applications

  • Vite

Vitejs is a new front-end build tool that significantly improves the front-end development experience. This is the way the VUE authors recommend building a VUE3 project.

npm init vite@latest
Copy the code

Build the project using Vue/CLI

View the VUE version

vue --version
Copy the code
@ vue/cli 4.5.13Copy the code

The project can be created by scaffolding only if version 4.5 or above is required.

Create a project

vue create hello-world
Copy the code

Prompt to select whether to build the project based on vue2 or VUE, here select the Default (vue 3) ([vue 3] Babel, ESLint) option to create the project. Select the last item to create the project if you want to do more custom projects.

Vue CLI v4.5.13? Please pick a preset: (Use arrow keys) ❯ Default ([Vue 2] Babel, eslint) Default (Vue 3) ([Vue 3] Babel, eslint) Manually select featuresCopy the code

Choose the Package Management tool, here NPM, or choose Yarn to manage your project.

Vue CLI v4.5.13? Please pick a preset: Default (Vue 3) ([Vue 3] babel, eslint) ? Pick the package manager to use when installing dependencies: (use arrow keys) ❯ use Yarn use NPMCopy the code

Select the package management tool and start creating the project. When the project is installed, run the following command

cd hello-world
npm run serve
Copy the code

Then you can open a browser and type http://localhost:8080/, and you will see the following screen.

 DONE  Compiled successfully in 1999ms                                              9:37:45 ├F10: AM┤


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.50.32:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.
Copy the code

Then you can see the following interface

When you see this screen, you have successfully created Vue3 and have successfully taken the first step to learn Vue3.