Webstorm runs Vue project environment configuration (how to run a written vue project from 0 configuration)

 1. Download the zip installation package on the Node official website.
(Which version is needed, change the version number after /v to which version)

 2. After the download is complete, unzip it to the desired folder.

 3. Create two new folders under this folder:

node_cache:npm缓存路径

node_global:npm全局安装路径

4. Configure environment variables

Right click on My Computer - Click Properties - Click Advanced System Settings - Click Environment Variables

 

Create a new variable in System Variables.

Variable name: NODE_HOME

Variable value: node decompressed folder address

Create two new variables in the Path of the system variable

%NODE_HOME%

%NODE_HOME%\node_global

 

 ok-ok-ok

 

5. Configure npm global path and cache path

 windows + R to open the command line tool, enter cmd, and click OK to open.

 

 Click v on the right, click Windows PowerShell, and open the command line tool as an administrator.

 implement

npm config set cache "E:\node16.14\node-v16.14.0-win-x64\node_cache"

npm config set prefix "E:\node16.14\node-v16.14.0-win-x64\node_global"

6. Verify that the installation is successful

windows + R to open the command line tool, enter cmd, and click OK to open.

 

 implement

node -v

npm -v

 If the version appears, the installation is successful.

7. cnpm installation

Install Taobao image (similar to Alibaba Cloud's maven central warehouse image)

 implement

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

 Execute cnpm -vto verify that the installation was successful.

8. webpack installation

implement

cnpm install webpack -g

9. Install vue-cli globally

implement

npm install --global vue-cli

 Verify that the installation was successful. implement

vue -V

Note that the "V" is capitalized!

10. Project configuration

Click the box in the upper right corner, click Edit Configurations

将Node interpreter修改为node包中的node.exe的地址。

将Package manager的地址修改为node包中node_modules包下npm的地址。

点击Apply应用后再点击ok。

11.安装依赖

删除原有的node_modules目录。
进入webstorm,在控制台,输入

npm install 或 cnpm install

 项目目录会自动生成node_modules目录

12.运行项目

 点击出现的访问地址进行访问。

 完成!

Guess you like

Origin blog.csdn.net/LYly_B/article/details/129828809