Home Web Front-end JS Tutorial The most detailed vue.js installation tutorial

The most detailed vue.js installation tutorial

Dec 19, 2017 pm 04:22 PM
javascript vue.js Tutorial

This article mainly shares a vue.js installation tutorial worth collecting for everyone. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

This article shares the vuejs installation tutorial for your reference. The specific content is as follows:

1. Install nodejs and bring your own npm environment.

Address: https://nodejs.org/en/download/, Node.js historical version download address: https://nodejs.org/dist/ You can choose the version that suits your operating system.

For the installation process, please refer to: Installation Configuration

2. Install the Taobao image.

Because the speed of domestic access to foreign links is too slow, it is recommended to set the npm registry source to a domestic mirror, which can greatly improve the installation speed.

Open cmd and enter directly: npm install -g cnpm –registry=https://registry.npm.taobao.org, press Enter, wait for installation...


npm install -g cnpm --registry=https://registry.npm.taobao.org
Copy after login

Note=There must be no spaces after, otherwise an error will be reported.

3. Install express (select to install).


cnpm install -g express
Copy after login

4. Install webpack.


cnpm install -g webpack
Copy after login

5. Install vue.


cnpm install vue
Copy after login

6. Install vue-cli.


cnpm install -g vue-cli
Copy after login

7. At this point, the environment setup has been completed and project initialization can begin.

Use the cd command in cmd to jump to the specified address, project initialization command: vueinitwebpackvue-projectname. projectname--The name of the project folder (the name cannot be in Chinese). This vue-projectname folder will be automatically generated in the working directory you jump to.


vue init webpack vue-projectname
Copy after login

Note: During the installation process, you need to enter the project name, description, author, etc., which is the one in the picture above? The answer behind.

8.cd to our project folder d:\Vue\vue-test and run the command cnpm install to install the package.


cnmp install
Copy after login

9. Test whether the project is installed successfully.


cnpm run dev
Copy after login

Have you all learned it? Hurry up and give it a try.

Related recommendations:

A summary of practical vue.js project tips

Vue.js develops a globally called MessageBox component

What are the commonly used instructions in Vue.js

The above is the detailed content of The most detailed vue.js installation tutorial. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Tutorial on how to use Dewu Tutorial on how to use Dewu Mar 21, 2024 pm 01:40 PM

Dewu APP is currently a very popular brand shopping software, but most users do not know how to use the functions in Dewu APP. The most detailed usage tutorial guide is compiled below. Next is the Dewuduo that the editor brings to users. A summary of function usage tutorials. Interested users can come and take a look! Tutorial on how to use Dewu [2024-03-20] How to use Dewu installment purchase [2024-03-20] How to obtain Dewu coupons [2024-03-20] How to find Dewu manual customer service [2024-03-20] How to check the pickup code of Dewu [2024-03-20] Where to find Dewu purchase [2024-03-20] How to open Dewu VIP [2024-03-20] How to apply for return or exchange of Dewu

In summer, you must try shooting a rainbow In summer, you must try shooting a rainbow Jul 21, 2024 pm 05:16 PM

After rain in summer, you can often see a beautiful and magical special weather scene - rainbow. This is also a rare scene that can be encountered in photography, and it is very photogenic. There are several conditions for a rainbow to appear: first, there are enough water droplets in the air, and second, the sun shines at a low angle. Therefore, it is easiest to see a rainbow in the afternoon after the rain has cleared up. However, the formation of a rainbow is greatly affected by weather, light and other conditions, so it generally only lasts for a short period of time, and the best viewing and shooting time is even shorter. So when you encounter a rainbow, how can you properly record it and photograph it with quality? 1. Look for rainbows. In addition to the conditions mentioned above, rainbows usually appear in the direction of sunlight, that is, if the sun shines from west to east, rainbows are more likely to appear in the east.

What software is photoshopcs5? -photoshopcs5 usage tutorial What software is photoshopcs5? -photoshopcs5 usage tutorial Mar 19, 2024 am 09:04 AM

PhotoshopCS is the abbreviation of Photoshop Creative Suite. It is a software produced by Adobe and is widely used in graphic design and image processing. As a novice learning PS, let me explain to you today what software photoshopcs5 is and how to use photoshopcs5. 1. What software is photoshop cs5? Adobe Photoshop CS5 Extended is ideal for professionals in film, video and multimedia fields, graphic and web designers who use 3D and animation, and professionals in engineering and scientific fields. Render a 3D image and merge it into a 2D composite image. Edit videos easily

Tutorial on how to turn off the payment sound on WeChat Tutorial on how to turn off the payment sound on WeChat Mar 26, 2024 am 08:30 AM

1. First open WeChat. 2. Click [+] in the upper right corner. 3. Click the QR code to collect payment. 4. Click the three small dots in the upper right corner. 5. Click to close the voice reminder for payment arrival.

Experts teach you! The Correct Way to Cut Long Pictures on Huawei Mobile Phones Experts teach you! The Correct Way to Cut Long Pictures on Huawei Mobile Phones Mar 22, 2024 pm 12:21 PM

With the continuous development of smart phones, the functions of mobile phones have become more and more powerful, among which the function of taking long pictures has become one of the important functions used by many users in daily life. Long screenshots can help users save a long web page, conversation record or picture at one time for easy viewing and sharing. Among many mobile phone brands, Huawei mobile phones are also one of the brands highly respected by users, and their function of cropping long pictures is also highly praised. This article will introduce you to the correct method of taking long pictures on Huawei mobile phones, as well as some expert tips to help you make better use of Huawei mobile phones.

PHP Tutorial: How to convert int type to string PHP Tutorial: How to convert int type to string Mar 27, 2024 pm 06:03 PM

PHP Tutorial: How to Convert Int Type to String In PHP, converting integer data to string is a common operation. This tutorial will introduce how to use PHP's built-in functions to convert the int type to a string, while providing specific code examples. Use cast: In PHP, you can use cast to convert integer data into a string. This method is very simple. You only need to add (string) before the integer data to convert it into a string. Below is a simple sample code

Honor mobile phone Hongmeng system upgrade tutorial Honor mobile phone Hongmeng system upgrade tutorial Mar 23, 2024 pm 12:45 PM

Honor mobile phones have always been favored by consumers because of their excellent performance and stable system. Recently, Honor mobile phones have released a new Hongmeng system, which has attracted the attention and expectations of many users. Hongmeng system is known as the system that "unifies the world". It has a smoother operating experience and higher security, allowing users to experience a new world of smartphones. Many users have expressed that they want to upgrade their Honor mobile phone system to the Hongmeng system. So, let’s take a look at the upgrade tutorial of the Honor mobile phone’s Hongmeng system. firstly, I

A simple tutorial on converting full-width English letters to half-width letters A simple tutorial on converting full-width English letters to half-width letters Mar 25, 2024 pm 09:21 PM

When using a computer to input English, sometimes we encounter the difference between full-width English letters and half-width English letters. Full-width English letters refer to the characters input by pressing the Shift key and the English letter key combination when the input method is Chinese mode. They occupy a full-width character width. Half-width English letters refer to characters input directly when the input method is English mode, and they occupy half a character width. In some cases, we may need to convert full-width English letters to half-width letters. Here is a simple tutorial: First, open a text editor or any

See all articles