preface

Recently, I received a job to develop a website based on VUE with WebStorm, but I really had little contact with the project practice related to VUE, let alone the actual application of WebStorm. Before, I just heard from my friends that it was very good. However, since the existing tools do not affect the work efficiency, I did not change them. No way, I also don’t know how the brain, picked up this live, learn, normal installation no problem, but during some problems encountered

Today, I will sort out and summarize the problems encountered and the solutions, hoping to be helpful to you

Download the environment

After downloading and installing Webstorm, I checked out the project from Git and found that it could not run. After querying relevant information, I found that the operation of VUE project depended on node.js environment, so I need to download node.js environment first

1. Download Node.js and install it

First of all, I found the node.js version corresponding to the local operating system on the official website of Node.js and downloaded the installation package. Liverpoolfc.tv: nodejs.org/en/download/

NPM, a Node.js-based package manager, is also required to use VUE or configure Node.js after searching for information:

NPM, fully known as Node Package Manager, is a Node.js-based Package Manager. It is also the most popular Package Manager in the node.js community and supports the most third-party modules (similar to Maven in Java). NPM was originally intended to make it easier for JavaScript developers to share and reuse code. Usage scenarios of NPM: Allows users to obtain third-party packages and use them. Allows users to publish and share their own packages or command-line programs.

However, the node.js version on the official website comes with NPM, so you don’t need to download it separately. The steps for downloading or installing NPM are not described here. Install nodeJs according to the installation package. After the installation is complete, run the following command to query the NPM version.

npm -v
Copy the code

Configure the global and cache paths for nodeJS

In the nodeJS installation directory, create the node_global and node_cache folders

  • Open the CMD command prompt and enter the following command:
NPM config set cache "D:nodeJsnode_global" NPM config set cache "D:nodeJsnode_global"Copy the code

Setting environment Variables

Example Set system environment variables

  • Create the system environment variable NODE_PATH as follows:

  • Edit the system environment variable Path and add Path D:nodeJs

Set the user environment variables

Add the Path to the user environment variable as follows:

Save the effect

Install a Module to test whether the preceding environment variables are configured successfully. The Express module is used as an example

Run the following command in CMD

npm install express -g
Copy the code

P.S.: if -g is added, it will be installed in the configured node_modules folder. If -g is not added, it will be installed in the current path. If no, a folder named node_modules will be installed in the current path.

The installation is successful.

2. Install Taobao mirror (similar to the mirror of Ali Cloud’s Maven central warehouse)

Installation command:

npm install -g cnpm --registry=https://registry.npm.taobao.org
Copy the code

Installation successful (I thought it did, but it didn’t)

Verify command:

cnpm -v
Copy the code

An error occurs when running the command. The following screenshot shows the error:

Then I checked the path of the physical file after the successful installation on others’ blog and found that I did not install successfully

Running the command to install taobao image again, I found that it reported two WARN from which I was going to resolve the problem. The specific error is as follows:

NPM WARN deprecated [email protected]: request has been deprecated, See https://github.com/request/request/issues/3142 NPM WARN deprecated [email protected]: thisCopy the code

I searched the first WARN, they suggested me to switch the data source and try. I followed their operation and operated once, and the process was smooth (the first instruction was used to switch the data source, and the second instruction was used to judge whether the switch was successful).

Re-install and try it out. It updates me. But it didn’t work

I open CMD again according to the administrator permission to try again, the problem still appears, other experience posts boot, execute the policy change, here try:

Set ExecutionPolicy remotesunetCopy the code

3. Install webPack

WebPack can be viewed as a module baler: It analyzes the structure of your project, finds JavaScript modules and other extension languages that browsers don’t run directly (Scss, TypeScript, etc.), and converts and packages them into appropriate formats for browsers to use.

cnpm install webpack -g
Copy the code

4. Install Vue

CNPM install Vue -cli -g install Vue -cli -gCopy the code

Check whether the preceding operations are successfully installed

PS C:Windowssystem32> node -v
v12.18.4
PS C:Windowssystem32> npm -v
6.14.6
Copy the code

Webpack-cli: webpack-cli: webpack-cli: webpack-CLI: webpack-CLI

The installation failed again after I typed yes

It can’t find the module. Use the global setup command to try it (followed by -g)

This time the webpack test was successful

PS C:Windowssystem32> webpack -v
4.44.2
Copy the code

Verify Vue directly after verifying other environments

PS C:Windowssystem32> vue -V
2.9.6
Copy the code

Success.

Create Vue using WebStorm

  1. Open webStorm and select Create New Project-> vue.js

Note: Project names must not contain uppercase letters. In order for webStorm to find my nodeJs in the future, I will add all the environment variables to the Path and add node_global, nodeJs, and node_modules

Restart webStorm and it will automatically find it. Other information tells me that the address of vue.js package indicated in blue will be automatically searched without modification once installed

And then the console will pull something and wait. It’s kind of slow and slow

And then there you go it’s going to run automatically and output the access path when it’s successful

The welcome page appears after you click the access path

The Vue project was created successfully

Development so long, technology constantly improve, develop software to use very much, but the technical type of update, good development software to spring up constantly emerge, while the development of the existing software can normal work, however, the new software is “delicious”, many places are improved, the user experience is quite good, Like IDEA and today’s ** Webstorm, ** is really good after using it

All right, follow me, a bald programmer with a weird brain circuit