Vue Installation and Configuration

I. Download and Install Vue

Official website download addressDownload | Node.js

Choose the version that suits you, we recommend LTS, Long Term Stable. I chose Windows Installer(.msi) 64-bit.

Once downloaded, double-click on the downloaded installation package.

Click next

Check I accept………… Click next

It is recommended to change the installation directory to the one you want, and then click next (you can create your own installation directory, I have created a directory in advance: E:\Java\nodejs)

There are five options here, which you can read about when you have time, which is that the installation will install some components and npm, and also add environment variables, as explained on the right. Let’s just click next

No need to check the box here, just click next.

install

 finish

Once the installation is complete, check to see if the installation was successful.

Open cmd and enter the following command.

node -v

npm -v

The version number is output to indicate that the installation was successful.

The full catalog after installation:

II. Creating a global installation directory and a cache log directory

In our installation directory, create two folders named node_cache and node_global.

 

Open a Dos window and execute the following command to configure npm’s global module directory and cache directory to the two directories we just created.

npm config set prefix “Your installation directory \node_global”

npm config set cache “your installation directory \node_cache”

In order to download the package quickly in the future, modify the source to Taobao mirror. (With the modification here, we don’t need to install cnpm, because cnpm is theNode.js Taobao Mirror Accelerator.(No need to install it once it’s configured here)

npm config set registry https://registry.npm.taobao.org

Check if the npm configuration changes were successful

npm config list

At the same time, we will find an additional file: C:\Users\user name\ under the .npmrc file, can be understood as a record of the current user to modify the information in the configuration file. If you delete this file, then you just modified those parameters are gone, return to the default configuration.

III. Configuring environment variables

During the installation process, two environment variables are automatically configured aEnvironment Variables—User Variables—PathinnerC:\Users\your username\AppData\Roaming\npmThe other one isEnvironment Variables—System Variables—PathinnerSoftware installation directory, we need to add and modify it a bit.

1. Environment Variables—User Variables—Check Path—Click Edit

commander-in-chief (military)C:\Users\your username\AppData\Roaming\npm modify toYour installation directory \node_global

2. Environment Variables—System Variables—New

Variable name: NODE_PATH

Variable value: your installation directory \node_global\node_modules

Note: The node_modules directory here is not there yet, but it will be automatically generated when we install the module into the global directory later.

Remember to add %NODE_PATH% to the system variable — Path

 

Install vue

1. Install vue.js

npm install vue -g

Where -g is global installation, means install to the global global directory, if you do not add -g, the module will be installed to the node_modules folder under the current path, no directory will be created automatically.

If this problem occurs, it is because the current user does not have this permission.

Some methods on the Internet is to delete C \Users\your username\AppData\Roaming\npm went, that is, the default place to go, that we modified in front of the meaningless.

The correct way to open it is to run it as administrator!

Win + s Search for “Command Prompt” and right click to run as administrator.

npm install vue -g

2. Install the webpack template

npm install webpack -g

In addition, on webpack 4x and above, webpack puts all command-related content into webpack-cli, so you also need to install webpack-cli

npm install webpack-cli -g

Type webpack -v. If you can output the version number, it means it’s all installed.

3. Install scaffolding vue-cli

npm install vue-cli -g

  

Type vue –version, and being able to output the version number means it’s installed.

4. Install vue-router

npm install vue-router -g

All done we open the node_modules folder in our custom global modules directory and will find the installed modules unified here.

Fourth, my first vue-cli application.

1. Create a project (it is best to cd to the D disk, E disk location, that is, the path of the project, otherwise the project will be newly created in C:\Users\User name\, you can also directly in the desired path of the project to enter the cmd) may be permissions problems, so we are still administrator to run the cmd window.

2. create a vue application based on a webpack template

vue init webpack project name

Operate according to your needs.

• What is the name of the project? Enter
• Project description? Enter
• Author? Enter.
• Whether or not to install the compiler Enter
• Whether to install vue-router y enter
• Whether or not to use ESLint for code checking n Carriage return
• Whether to install unit testing tools n Enter
• Unit Test Related n Carriage Return
• Initialize directly after creation n Enter

Since there is no automatic initialization, we follow the code prompts to manually initialize the

cd myvue

npm run dev

Visit the website: success!