Vue build scaffolding project and related knowledge node, npm, webpack introduction

Vue build scaffolding project and related knowledge node, npm, webpack introduction

1. Preliminary preparation environment

You need to configure the installation directory of node in the path of the environment variable, as shown below

The installation path of node.exe is as shown below

Scaffolding mainly uses the npm (Node Package Manager) tool that comes with node.exe. The main function of the npm tool is to manage the installation package. We can search for the package through the package name through npm and then install the package. Npm is equivalent to our windows The software installation manager in the system, some of the commands of npm are as follows:

NPM command:
npm -v
-view version
npm version
-view the version of all modules
npm
-help description
npm search package name
-search module name
npm install package name where install can be abbreviated as i
-install the package in the current directory
npm install -g package Name
-global mode installation package, global installation packages are generally some tools
npm install package name --save
-install the package and add it to the dependencies, that is, add the version information to the depencies of package.json, runtime dependencies* ********
npm install package name --save-dev
-install the package and add it to the dependencies, that is, add the version information to the devDepencies of package.json, which depends on the development****** **
npm install
-download the package that the current project depends on
npm remove package name where remove can be abbreviated as r
-delete package

理解：npm就相当于我们的软件管家，npm search 包名  可以搜索出相关的包
        npm install 搜索到的包    可以下载相关的包，下载到当前文件夹里面

2. Download vue scaffolding

Vue Cli3 download command: npm install -g @vue/cli

If you download Vue Cli3, which is also scaffolding 3, because scaffolding 3 covers scaffolding 2, you can no longer use scaffolding 2 to create scaffolding projects, so if you still want to use scaffolding 2 to create scaffolding projects, you need Pull the initialization template in Vue Cli2, the pull command is npm install -g @vue/cli-init, just write one more later

-init, because the command to initialize the project of scaffold 2 is the name of the vue init webpack project, and there is also an init, so the pull command is just to download the scaffold with an additional -init

Vue Cli3 Scaffolding 3 The command to initialize the project is the name of the vue create project

Vue Cli2 scaffolding 2 initialization project command is the name of the vue init webpack project

3. Webpack will be automatically downloaded in vue scaffolding

Vue CLI needs to rely on Webpack, and webpack will be automatically downloaded when we create a scaffolding project, as shown below:

The main function of the webpack template is to optimize operations such as compression of all resources. It provides a complete set of functions during the development process, which can make our development process more efficient.
The main function of webpack is to pack all the modules needed in the project into a js module, as shown below

The above packaging process can be achieved through the command npx webpack ./src/main.js ./dist/bundle.js, and later we all use the simplified operation npx webpack command to achieve the same effect, because we put ./src/ The paths of main.js and ./dist/bundle.js file modules are stored in a configuration file, as shown below:

4.node introduction

Each js file in node is regarded as a module, and you can use node xxx.js to run a js file directly.

And the content of each js file will be wrapped in a function, this function is function(exports,requrie,module,__filename,__dirname){}

Therefore, you will find that exports, require(), __dirname can be used in many js files, which are actually the parameters of the function where the content of the js file is used. The explanation of these parameters is as follows:

exports:

​-This object is used to expose variables or functions to the outside, so that the relevant content of the module can be introduced in other modules through the require function. The exports use the following figure:

require

​-Function, used to import external modules, as shown below

module

​ -module represents the current module itself

​ -exports are the attributes of the module

​-Since exports are the attributes of module, when exporting functions and variables, you can use exports or module.exports, but exports can only be exported one by one, but module.exports can export multiple at a time. As shown below:

__filename:

​ Assuming that the absolute path of the current js module is D:\Vue.js framework\Node.js working path\01.node\04-module.js, then the value of __filename is

​ D:\Vue.js framework\Node.js working path\01.node\04-module.js

__dirname:

​ Assuming that the absolute path of the current js module file is D:\Vue.js framework\Node.js working path\01.node\04-module.js, then the value of __dirname represents the absolute path of the directory where the current js module file is located , The value is D:\Vue.js framework\Node.js working path\01.node