How to install vuejs3

How to install vuejs3: 1. Download the new version directly from the official website of Vue.js and introduce it with the <script> tag; 2. Use the CDN method to install vuejs; 3. Use the NPM method to install vuejs. </script>

The operating environment of this article: windows7 system, vuejs3 version, DELL G3 computer.

How to install vuejs3?

Vue3 installation

1. Independent version

We can download it directly from the official website of Vue.js The latest version, introduced with the <script> tag. </script>

Download Vue.js: https://unpkg.com/vue@3.2.7/dist/vue.global.js

2. Use CDN method

The following are two relatively stable CDNs recommended in foreign countries. I have not found which one is better in China. At present, it is recommended to download them locally.

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

unpkg: https://unpkg.com/vue @next, will remain consistent with the latest version released by 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 installation speed of npm, this tutorial uses Taobao’s mirror and Its command is cnpm. For installation and usage instructions, please refer to: Using Taobao NPM Image.

The npm version needs to be greater than 3.0. If it is lower than this version, you need to upgrade it:

# 查看版本
$ npm -v
2.3.0
#升级 npm
cnpm install npm -g
# 升级或安装 cnpm
npm install cnpm -g

It is recommended to use cnpm installation when building large applications with Vue.js. cnpm can work well with Webpack or Browserify module packager is used with:

# 最新稳定版
$ 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.

# 全局安装 vue-cli
$ cnpm install -g @vue/cli
# 安装完后查看版本
$ vue --version
@vue/cli 4.5.11

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

Install @vue/cli-int:

$ cnpm i -g @vue/cli-init

Create project

$ vue init webpack runoob-vue3-test
# 这里需要进行一些配置，默认回车即可
? 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:

$ cd runoob-vue3-test
$ cnpm run dev
  DONE  Compiled successfully in 2558ms          
 I  Your application is running here: http://localhost:8080

Access after successfully executing the above command http://localhost:8080/, the output result is as follows:

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

Related recommendations: "vue.js tutorial" "The latest 5 vue.js video tutorial selections"

The above is the detailed content of How to install vuejs3. For more information, please follow other related articles on the PHP Chinese website!