Node.js installation and configuration

The first is the installation of Node.js. The installation is very simple. You only need to go to the official website to download the installation package and click next.

Node.js is an open source, cross-platform JavaScript runtime environment

There are two versions of the download address, one is recommended and the other is the latest. If bloggers want to learn now, just install the latest version.

https://nodejs.org/en

insert image description here

node-vTo verify whether the installation is successful, you only need to enter and in the cmd window npm-v. By default, node will help us install npm. Can be classified as pip in python

npm, full name node package manger.
npm is Node's open module registration and management system. It is the standard release platform for Node.js packages. It is used for the release, dissemination and dependency control of Node.js packages. Website: https://www.npmjs.com/ Provided by
npm With the command line tool, you can easily download, install, upgrade, and delete packages. It also allows you to publish and maintain packages as a developer.

insert image description here

View npm download source npm config get registry

Change the npm module download warehouse from the default foreign site to a domestic site, so that the download speed of the module can be faster. Now we use the Taobao mirror source (https://registry.npm.taobao.org)

Directly modify the default configuration of npm

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

After configuration, you can check whether the download source is configured successfully according to the npm config get registryor command , as shown in the figure before configuration.npm config listnpm"https://registry.npmjs.org/"

insert image description here

Configure the default installation directory and cache log directory

Note: The environment configuration here mainly configures the path where the global module installed by npm is located, and the path of the cache. The reason for configuring it is because it is similar to the following execution: (The following optional parameters -g, g represents npm install express [-g]global (meaning to install), the installed module will be installed into the [ C:\Users\用户名\AppData\Roaming\npm] path, occupying C drive space.

"D:\Program Files \nodejsFor example, if I want to put the path of all modules and the cache path in the folder where my node.js is installed, then create two folders under my installation folder and use them node_globalas node_cachethe default installation directory and the cache log directory respectively.

Then execute the command to npmconfigure the global module directory and cache directory to the two directories we just created:

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

insert image description here

npm config get prefixView the npm global installation package save path.
npm config get cacheView the npm package cache path.

You can also enter npm list -globalthe command to view the global installation directory:

insert image description here

Install vue.js

Install vue globally

npm install -g @vue/cli

insert image description here

Enter vue -V to see if the installation is successful, but it prompts that vue is not an internal command. This problem has troubled the blogger for a long time, because according to the blogger's experience, this problem is due to an error in the environment variable setting, but it still does not work after changing it many times. Later Found the wrong place to change:

insert image description here

After making the changes, install vue again and it’s OK.

insert image description here

Create a Vue project

Select a directory where we want to create a vue project. The blogger chose E:/learn, and then executed the create vue project command:

vue create hello-world

You need to do some configuration, press the arrow keys to select the item, and then press the Enter key:

Represents manual selection to make some settings, otherwise you can select directlyDefault Vue3

insert image description here

Then press the arrow keys to move, and press the space bar to select or cancel the selection, which are:
Babel compilation, Router routing, Vuex state management, Linter If you want code format, don’t choose this, Unit Test unit test, E2E Test end-to-end test .

insert image description here