Once we have enough JavaScript knowledge, the next step is to learn about Vue. To open the official Vue tutorial, the first step is of course to install:

So what is this NPM? How do I invoke this command? Why is this used?

Don’t worry, that brings us to today’s topic: Node.js.

Node.js is a JavaScript runtime environment based on Chrome V8 engine. It does not rely on the browser as the host environment, but can run independently as the server program, which makes JavaScript programming from the client to the server for the first time. Node.js’s advantage on the server side is that it uses single-threaded and asynchronous I/O models (JavaScript is the single-threaded language) to achieve a high concurrency, high performance runtime environment.

In a word, we usually use JavaScript to see the effect of the browser, node.js effect is not need to open the browser, the local implementation of JavaScript code debugging.

Node. Js installed

You can find the installation package directly from the official website: download link

During the installation process, the program will automatically prompt us whether to add it to the Path Path. After installation, you should have two commands available: node and NPM. Open CMD to view their versions:

 node -v

 npm -v
Copy the code

You can type Node at the command prompt and you will now enter the Node.js interactive environment. In an interactive environment, you can type any JavaScript statement and press Enter to get the output. So, we have a simple debugging of the JS code, ok? Is it not in the browser?

The debugging of Node.js is not performed on the command line, but is based on development tools. The following uses VSCode as an example to perform debugging.

To exit the Node.js environment, press Ctrl+C twice.

VSCode debugging

1. First prepare a written JS file as our debugging object;

2. Go to the VSCode debugging interface and configure the file path in Program.

The first time you might need to prompt you to create launch.json in this screen.

Then click the green button in the upper left corner to see the result in the debug console:

NPM

With Node out of the way, let’s talk about the important foundation of Vue, NPM, which is the package management tool for Node.js.

Why do we need a package management tool?

Because we often import a good JavaScript library when we develop on Node.js, if we have to import it manually every time, it will become more and more work as the library files grow. Use NPM for management. When you need to import a library, NPM install is all you need to add. In addition, the project only needs to pay attention to the correct configuration file when migrating, and then download it from another place. There is no need to migrate the library (actually similar to Maven). Once a developer publishes a module to the repository, others can download and use it from the NPM website or from the command line.

package.json

Package. json is, as its name indicates, an important configuration file in NPM package management. Here is a package.json for a newly created Vue project.

{
  "name": "hello-world"."version": "0.1.0 from"."private": true."scripts": {
    "serve": "vue-cli-service serve"."build": "vue-cli-service build"."lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^ 3.6.5." "."vue": "^ 2.6.11." "
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~ 4.4.0"."@vue/cli-plugin-eslint": "~ 4.4.0"."@vue/cli-service": "~ 4.4.0"."babel-eslint": "^ 10.1.0"."eslint": "^ 6.7.2." "."eslint-plugin-vue": "^ 6.2.2." "."vue-template-compiler": "^ 2.6.11." "}}Copy the code

The document should have at least two parts:

“Name” Project name: all lowercase, no Spaces, can be underlined or underlined

Version Indicates the version number. X.X.X

Script execution:

Scripts: supported scripts

NPM run is followed by a specific script name (serve)Copy the code

Production Information:

  1. dependenciesDependencies that need to be used in a production environment
  2. devDependencies: Dependencies used in development and test environments

NPM install installs all modules in Package. json dependencies and devDependencies by default. If you want to install only the dependencies in Dependencies, use the — Production field:

npm install --production
Copy the code

If you add a module to your project, you can download it directly and add it to the node_modules directory:

NPM install jQuery Uninstalls a module and removes the configuration NPM uninstall jQuery in package.jsonCopy the code

Json file dependencies(production environment dependencies) to facilitate project migration:

If you want to add it directly to devDependencies, you specify it with the command:

npm install <package_name> --save-dev
Copy the code

In addition to install and uninstall, there is another common command for package management:

NPM cache clean -f Clears the cacheCopy the code

Semantic versioning

Take a package in production. The first one is a specific dependency name. Why is the later version number ^3.6.5?

 "dependencies": {
    "core-js": "^ 3.6.5." "."vue": "^ 2.6.11." "
  }
Copy the code

This involves semantic versioning in NPM:

If a project is going to be shared with others, it should start with version 1.0.0. And the upgraded version should follow the following standards:

Patch version: Fixes bugs or minor changes and adds the last digit, such as 1.0.1 minor version: adds a new feature and does not affect the previous version, adds the middle digit, such as 1.1.0 Major version: Adds the first digit, such as 2.0.0 when it is not compatible with the previous version

As users, we can specify in the package.json file how much we accept updates to the package:

X ~1.0.4 If you want to accept only the patch version (the last bit change), you can write: 1.0 1.0.x ~1.0.4 If you want to accept the minor version (the second bit change), you can write: 1 1.x ^1.0.4 If you can accept major updates (naturally accept minor and patched changes), you can write:

x

Taobao mirror

When downloading packages in NPM, because the use of foreign sources will be slow, you can switch to Taobao image to improve the speed:

Set taobao mirror:

NPM config set registry registry.npm.taobao.org

Error Information Collection

After installing the Taobao image, PowerShell reported an error: scripts are forbidden to run on this system.

1. Run VScode as an administrator.

  1. Restricted is displayed, indicating that the state is prohibited.
  2. Execute the set-executionPolicy remotesunet;
  3. Get get Policy and get RemoteSigned.

At this point, we’ve learned some of the basic operations of Node.js.

NPM and Package. json Quick Start tutorial