What needs to be installed to install vue.js

Installing vue.js requires installing node.js. The specific method of installing vue.js is: first install node.js; then install the Taobao image; then install Vue, and install the global vue-cli scaffolding; finally Just check whether Vue is installed successfully.

The operating environment of this tutorial: windows7 system, vue2.0&&Node.js v14.15.3 version, Dell G3 computer.

Related recommendations: "vue.js Tutorial"

What do I need to install before installing vue.js?

You need to install node.js before installing vue.js. Just install the latest version from the official website. The version should be greater than version 6.0.

In this way, you can use the npm tool that comes with node.js to install vue.js and its related tools.

npm: Package manager under Nodejs. npm can be used to install, share, distribute code, and manage project dependencies.

Using npm to install Vue can facilitate package management. Then use the Vue command directly, and use the webpack tool to create the project. The front-end build tool will make front-end development more efficient.

Steps to install vue.js using npm

Step 1: Install node.js

As shown in the figure below, enter the following command on the terminal Make sure node.js is installed on your computer and the npm version is greater than 3.0. If the npm version is less than 3.0, you can enter $ cnpm install npm -g to upgrade.

Step 2: Install Taobao image

Since npm installation speed is slow, this article uses Taobao image and its command cnpm to install, enter $ npm install - g cnpm --registry=https://registry.npm.taobao.org install Taobao mirror.

Step 3: Install Vue

Enter $ cnpm install vue, press Enter and wait for the terminal to respond.

Step 4: Install the global vue-cli scaffolding

Enter $ cnpm install --global vue-cli to install the global vue-cli scaffolding, which is used to quickly build large single-page applications.

Step 5: Check whether Vue is installed successfully

Enter $ vue -V to check whether the installation is successful. If the version number is returned, the installation is successful.

The version number appears indicating that the installation is successful

Step 6: Check the template provided by the official website (this step can be omitted)

Among the six templates, we mainly use webpack templates for the following reasons:

WebPack can be regarded as a module packager: what it does is to analyze your project structure and find JavaScript modules As well as other extension languages ​​​​that cannot be run directly by browsers (Scss, TypeScript, etc.), they are packaged into a suitable format for use by browsers.

Step 7: Create a new project based on the webpack template

Switch the terminal to your target directory and create a project. Here is an example of creating a project called vue-project on the desktop: Enter vue init webpack vue-project, and the terminal will return the following content to you:

# 这里需要进行一些配置，默认回车即可
This will install Vue 2.x version of the template.
For Vue 1.x use: vue init webpack#1.0 vue-project
? Project name vue-project
? Project description A Vue.js project
? Author 5Iris5 <1847370****@163.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
   vue-cli · Generated "my-project".
   To get started:
   
     cd vue-project
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

The original image is not placed here because I made a mistake in this link, and the reason will be recorded in detail later. Under normal circumstances, after running to this step, your interface should appear in sequence with the three commands shown above.

Step 8: Enter the following three commands in sequence according to the prompts

// 进入项目
$ cd vue-project
// 安装依赖
$ cnpm install
// 测试环境是否搭建成功
$ cnpm run dev

Step 9: Run

After successfully executing the above commands, visit http://localhost:8080/ and output the results As follows:

The above is the detailed content of What needs to be installed to install vue.js. For more information, please follow other related articles on the PHP Chinese website!