Vue3.0 ecology is popular. The beginning of learning a language is context. This paper carries out the construction of Vue3.0 environment.

See vue3.0 official website

Four methods to install Vue3.0

  1. Import it as a CDN package on the page.

    CDN path: unpkg.com/vue@next cdn.staticfile.org/vue/3.0.5/v…

    * Use: *

    <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, Initial-scale =1.0"> <title>Document</title> </head> <body> <div id="counter"> {{message}} </div> </body> <script src="https://unpkg.com/vue@next"></script> <script> const Counter = { data() { return { message: }}} vue.createApp (Counter).mount('# Counter ') </script> </ HTML >Copy the code

  2. Download and self-hosting, this method and appeal principle is the same, are the introduction of JS files. Can be used in a production environment where CDN is not available and does not fit the foundation of the build tool.

  3. NPM Package Manager: NPM installation is recommended when building large applications with Vue

    Complete the following steps

    1. Download vue3.0 globally
     Install the latest stable version globally
 $ npm install vue@next -g
Copy the code

    Download it in the portalmain.jsThe introduction ofvue

  4. Command Line Tool (CLI)

    • Vue 3.0 should use Vue CLI V4.5 available on NPM as @vue/ CLI. The installation is as follows:

       yarn global add @vue/cli
 # OR
 npm install -g @vue/cli
 To upgrade the Vue project, execute the following command
 vue upgrade --next
Copy the code

    • Vite: Web development build tool that allows you to quickly build Vue projects

      # npm
$ npm init @vitejs/app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev
# yarn
$ yarn create @vitejs/app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev
Copy the code

    And then you’re done