Vue 3 installation and environment configuration

1. Install Node.js

• Node.js official website: https://nodejs.org/en/download
  

• After the installation is successful, enter node -vand npm -vto verify whether the installation is successful
  

2. Configure the default installation directory and cache log directory

• Create the default installation directory and cache log directory (my nodejs directory is on the D drive, so create it directly under the nodejs folder)

Since the installed modules will be installed in the C:\Users\username\AppData\Roaming\npm directory by default when the global installation statement is executed, the C drive will easily become full over time (the C drive is large enough to ignore this step), Therefore, reconfigure the default installation directory and cache log directory to other drive letters to save space on the C drive

• Execute the command to configure the default installation directory and cache log directory to the folder just created

npm config set prefix "D:\configuration\nodejs\node_global"
npm config set cache "D:\configuration\nodejs\node_cache"

3. Configure environment variables

• Press the win key and enter "edit system environment variables" to call up the system properties interface, click the "environment variables" button below
• Create a new NODE_PATH variable under system variables, and enter the path of node_modules under the default installation directory node_global

D:\configuration\nodejs\node_global\node_modules

• Enter the Path of the system variable and enter the nodejs installation path

D:\configuration\nodejs\

• Enter the Path of the user variable, and enter the default module call path of nodejs

D:\configuration\nodejs\node_global
D:\configuration\nodejs\node_cache

4. Configure Taobao Mirror

Using NPM to install is using a foreign server, and timeout errors often occur. You can speed up the installation by modifying it to a domestic Taobao mirror. The Taobao NPM mirror is a complete npmjs.com mirror, and the synchronization frequency is currently every 10 minutes to ensure synchronization with the official service as much as possible.

• install cnpm

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

• Verify that the installation was successful

cnpm config get registry

5. Install vue and scaffolding

• Install vue.js

cnpm install vue -g

• Verify that the installation was successful

cnpm info vue
npm list vue

• Install the webpack module

cnpm install webpack -g

• Install webpack-cli

cnpm install --global webpack-cli

6. Install vue-cli 3.x

cnpm install @vue/cli –g

7. Create a vue 3 project

• Open the cmd console as an administrator, enter the directory where you want to create the project, and start creating the project

vue create [项目名称]

• If the administrator identity is not used, the following error may appear
  

• Enter the project directory according to the prompts given and run the project

npm run serve

• Enter the given URL in the browser, and the following page will appear, indicating that the project is built successfully
  

8. Possible problems

Record of problems encountered during Vue installation