Easy Tutorial
Vue3 Directory Structure Vu3 Computed Vue3 Tutorial Vue3 Composition Api Vue3 Custom Directive Vue3 Intro Vue3 Mixins Vue3 Routing Vue3 Create Project Vue3 Ajax Axios Vue3 Template Syntax Vue3 Install Vue3 V For Vue3 Build Vue3 Events Vue3 Class Bind Vue3 Forms Vue3 V If Vue3 Components Vue3 Watch
❮ Vue3 Template Syntax Vue3 V For ❯

Vue3 Installation

1. Standalone Version

We can directly download the latest version from the Vue.js official website and include it using the <script> tag.

Download Vue.js

2. Using CDN Method

The following are two stable foreign CDNs recommended. No particularly good domestic CDN has been found yet, so it is currently recommended to download locally.

-

Staticfile CDN (Domestic): https://cdn.staticfile.org/vue/3.0.5/vue.global.js

-

unpkg: https://unpkg.com/vue@next, will keep consistent with the latest version released on npm.

-

cdnjs: https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js

Staticfile CDN (Domestic)

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

unpkg (Recommended)

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

cdnjs

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

3. NPM Method

Due to the slow speed of npm installation, this tutorial uses the Taobao mirror and its command cnpm. For installation and usage instructions, refer to: Using Taobao NPM Mirror.

The npm version needs to be greater than 3.0. If it is below this version, it needs to be upgraded:

# Check version
$ npm -v
2.3.0

# Upgrade npm
cnpm install npm -g

# Upgrade or install cnpm
npm install cnpm -g

When building large applications with Vue.js, it is recommended to use cnpm for installation. cnpm works well with module bundlers like Webpack or Browserify:

# Latest stable version
$ cnpm install vue@next

Command Line Tool

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

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

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

After installation, check the version:

$ vue --version
@vue/cli 4.5.11

Then run in the Vue project:

vue upgrade --next

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

If you still need to use the old vue init functionality, you can globally install a bridge tool:

npm install -g @vue/cli-init
# The effect of running vue init will be the same as [email protected]
vue init webpack my-project

Create a Project

The following example uses the vue init command to create a project:

$ vue init webpack tutorialpro-vue3-test
# Some configuration is needed here, default enter is fine
? Project name tutorialpro-vue3-test
? Project description A Vue.js project
? Author tutorialpro <[email protected]>
? 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 "tutorialpro-vue3-test".

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

...

Enter the project, install and run:

$ cd tutorialpro-vue3-test
$ cnpm run dev
  DONE  Compiled successfully in 2558ms          

 I  Your application is running here: http://localhost:8080

After successfully executing the above commands, visit http://localhost:8080/, the output is as follows:

>

Note: Vue.js does not support IE8 and below.

Using the Graphical Interface

We can open the graphical interface to create and manage projects using the vue ui command:

vue ui

Executing the above command will open a graphical interface in the browser to guide project creation:

Vite

Vite is a web development build tool that enables lightning-fast cold server startup due to its native ES module import method.

Run the following command in the terminal to quickly build a Vue project using Vite, with the following syntax:

npm init vite-app <project-name>

Create project tutorialpro-vue3-test2:

$ npm init vite-app tutorialpro-vue3-test2

Run the project:

$ cd tutorialpro-vue3-test2
$ cnpm install
$ cnpm run dev
> [email protected] dev /Users/tianqixin/tutorialpro-test/vue3/tutorialpro-vue3-test2
> vite

[vite] Optimizable dependencies detected:
vue

  Dev server running at:
  > Local:    http://localhost:3000/

Open http://localhost:3000/, the display is as follows:

❮ Vue3 Template Syntax Vue3 V For ❯