Vue3 installation

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.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

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.

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