2.2. Vue3 installation

2.2.1. 1.Independent version ¶

We can do it in Vue.js download the latest version directly from the official website and use the <script> label introduction.

Download Vue.js

2.2.2. 2.Use the CDN method ¶

The following recommend two relatively stable foreign CDN, domestic has not found which one is better, it is still recommended to download to the local.

Staticfile CDN (domestic): https://cdn.staticfile.org/vue/3.0.5/vue.global.js
unpkg : https://unpkg.com/vue@next , will maintain and npm the latest version released is consistent.
Cdnjs: https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js

Staticfile CDN (domestic) ¶

<divid="app"><p>{{ message }}</p></div>

Unpkg (recommended) ¶

<divid="app"><p>{{ message }}</p></div>

`cdnjs` ¶

<divid="app"><p>{{ message }}</p></div>

3.NPM method ¶

Due to npm the installation speed is slow. This tutorial uses Taobao image and its commands. cnpm installation instructions refer to: use Taobao NPM image

npm version needs to be greater than 3.0, and if it is lower than this version, you need to upgrade it:

# View version
$ npm -v
2.3.0

# upgradation npm
cnpm install npm -g


# Upgrade or Install cnpm
npm install cnpm -g

In use Vue.js recommended when building large-scale applications cnpm installation cnpm be able to communicate well with Webpack or Browserify module baler is used together:

# Latest stable version
$ cnpm install vue@next

2.2.3. Command line tool ¶

Vue.js provides an official command line tool that can be used to quickly build large single-page applications.

For Vue 3, you should use the npm Vue CLI v4.5 is available on the @vue/cli . To upgrade, you should need to reinstall the latest version of the @vue/cli :

# Global installation vue-cli
yarn global add @vue/cli
# or
cnpm install -g @vue/cli

View the version after installation:

$ vue --version
@vue/cli 4.5.11

Then run it in the Vue project:

vue upgrade --next

Note: vue-cli 3.x and vue-cli 2.x use the same vue command, and if you have previously installed vue-cli 2.x, it will be replaced with Vue-cli 3.x.

2.2.4. Create a project ¶

The following example we use vue init command to create a project:

$ vue init webpack runoob-vue3-test
# Some configuration is required here. By default, press enter to proceed
? Project name runoob-vue3-test
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "runoob-vue3-test".


# Installing project dependencies ...
# ========================

...

Enter the project, install and run