One of the three mainstream frameworks of the Vue web front-end is a set of progressive frameworks for building user interfaces. The following article mainly introduces the relevant information about Vue installation and configuration tutorials. It is very detailed through pictures and texts. Friends in need can refer to the following
−
Table of contents
- 1. Download and install Vue
- 2. Create a global installation directory and cache log directory
- 3. Configure environment variables
- 3. Install vue
- 4. My first vue-cli application
- Summarize
1. Download and install Vue
Official website download link Download | Node.js
Choose the version that suits you, recommend LTS, long-term stable version. I chose Windows Installer(.msi) 64-bit here
After downloading, double-click the downloaded installation package.
point next
Check I accept......., click next
Here it is recommended to change to the installation directory you want, and then click next (you can build the installation directory first, here is a directory built in advance: E:\Java\nodejs)
There are five options here, you can take a look when you have time, that is, some components and npm will be installed during installation, and environment variables will be added at the same time, with instructions on the right. Let's click next directly
There is no need to check here, just click next
install
finish
After the installation is complete, check to see if the installation was successful.
Open cmd and enter the following command.
| 1 |
|
| 1 |
|
If the version number is output, the installation is successful.
The full directory after installation:
2. Create a global installation directory and cache log directory
Under our installation directory, create two folders named node_cache and node_global.
Open the Dos window and execute the following command to configure the npm 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. (It has been modified here, so we don’t need to install cnpm, because cnpm is the Node.js Taobao mirror accelerator, so if it’s configured here, it doesn’t need to be installed)
| 1 |
|
Check whether the npm configuration modification is successful
| 1 |
|
At the same time, we will find an additional file: the .npmrc file under C:\Users\username\, which can be understood as a configuration file that records the modification information of the current user. If you delete this file, the parameters you just modified will be gone, and you will return to the default configuration.
3. Configure environment variables
During the installation process, two environment variables are automatically configured. One is the environment variable---user variable--- C:\Users\your username\AppData\Roaming\npm in the Path and the other is the environment variable--- System variable --- the software installation directory in Path , we need to add and modify it.
1. Environment Variables --- User Variables --- Select Path --- Edit
Change C:\Users\your username\AppData\Roaming\npm to your 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 does not exist yet, but we will automatically generate this folder when we install the module into the global directory.
Remember to add %NODE_PATH% to the system variable ---Path
3. Install vue
1. Install vue.js
| 1 |
|
Among them, -g is global installation, which means to install to the global global directory. If -g is not added, the module will be installed in the node_modules folder in the current path. If there is no directory, it will be created automatically.
If this problem occurs, it is because the current user does not have this permission.
Some methods on the Internet are to delete the .npmrc file under C:\Users\username\. This must not be done, because the file is deleted, and the global module directory and cache directory configuration we modified earlier are gone! ! ! At that time, the vue package will be downloaded to C:\Users\your username\AppData\Roaming\npm, which is the default place, so our previous modification will be meaningless.
The correct way to open it is to run it as an administrator!
Win + s to search for "Command Prompt", right click and run as administrator.
| 1 |
|
2. Install the webpack template
| 1 |
|
In addition, above webpack 4x, webpack puts all command-related content into webpack-cli, so webpack-cli needs to be installed
| 1 |
|
Enter webpack -v, if the version number can be output, it means that everything is installed.
3. Install scaffolding vue-cli
| 1 |
|
Enter vue --version, if the version number can be output, it means that it is installed.
4. Install vue-router
| 1 |
|
All done, we open the node_modules folder under our custom global module directory, and you will find that all installed modules are unified here.
4. My first vue-cli application
1. Create a project (preferably in a certain location from cd to D disk, E disk, that is, the path of the project, otherwise the project will be newly created in C:\Users\username\, or you can directly enter it under the desired project path cmd) may have permission issues, so we still run the cmd window as an administrator.
2. Create a vue application based on the webpack template
| 1 |
|
Operate according to your own needs.
- What is the project name? carriage return
- project description? carriage return
- author? carriage return
- Whether to install the compiler press Enter
- Whether to install vue-router y Enter
- Whether to use ESLint to do code inspection n carriage return
- Whether to install the unit test tool n Enter
- Unit test related n Enter
- After the creation is complete, initialize n directly and press Enter
Because there is no automatic initialization, we manually initialize according to the code prompt
| 1 |
|
| 1 |
|
Access URL: Success!
