1, check whether node is installed, node-v,

2, check the NPM version, NPM -v,

3, enter the project address (mine is directly built on the desktop, relatively lazy), CD desktop,

4, install CNPM (reason: because the NPM installation speed is super slow, CNPM is taobao mirror fast, is also a small skill ha), (if the installation fails, it is recommended to check the NPM version),

NPM install – g CNPM, registry=https://registry.npm.taobao.org,

CNPM install -g vue-cli

Vue -cli+webpack, vue init webpack Gdie (Gdie is the project name)

7. Fill in some basic information.

8. The project initialization is completed and the project CD Gdie is entered.

9. Start project, NPM run dev,


10. If the project is successfully built, enter localhost:8080 in the browser.

(Note: BECAUSE I have built a project, port 8080, so the new VUE-Projec project t port is 8080, there is only one project port 8080, in fact, as long as you input the correct port number provided by TA can see the effect, no matter how many projects are running),


The effect is as follows:

11. Installation of Babel

Webpack-babel configuration

Babel is a javascript compiler that is a great tool for front-end development. It breaks the es standard for browsers and allows us to use the latest javascript syntax in development.

With build and Babel, you can develop using the latest JS syntax and compile automatically into code for use in a browser or Node environment.

Babel is used in Webpack

Before using Babel with webpack, you first need to initialize a project with NPM init. NPM install -g webpack installs webpack (global installation is to use the webpack command at the command line).

  • Install babel-loader, babel-core, babel-preset-env.

NPM install –save-dev babel-loader babel-core babel-preset-env Equivalent to Babel-PRESET – ES2015, ES2016, ES2017 and the latest version. It allows you to use the latest JS syntax.

  • Configuration webpack. Config. Js

Configure the able-loader in the WebPack configuration file

module: {
    rules: [
        {
            test: /\.js$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: [
                        ['env',{
                            targets: {
                                browsers: ['> 1%', 'last 2 versions']
                            }
                        }]
                    ]
                }
            },
            exclude: '/node_modules/'
        }
    ]
}Copy the code

Where exclude defines files that you do not want Babel to process. Targets are some of the default options for presets. This means that js is used in browsers. Ensure that only the features of browsers that account for more than 1% of the total are the latest two major versions of the main browsers. For more configuration information, see: Babel Env Preset setting, BrowserList Preset.

  • Run the corresponding webpack command from the command line.
  • Because of the many babel-preset configuration options, a. Babelrc file can be established in the root directory to preset the Babel configuration, which is a JSON file. You can modify the above configuration as follows:
/ /. Bablerc file
{
    "presets": [['env', {"targets": {
                "browsers": ['> 1%'.'last 2 versions'}}]]}// The original webpack.config.js file
module: {
    rules: [
        {
            test: /\.js$/,
            use: {
                loader: 'babel-loader'
            },
            exclude: '/node_modules/'}}]Copy the code

Babel – polifill plug-in

In the Babel configuration above, Babel just converts some ES6, ES7-8 syntax into targetable JS code, but if we use some features or methods, such as Generator, Set, or some methods. Babel does not translate into code that older browsers recognize. That’s where the babel-polifill comes in.

In a nutshell, Polifill is a shim that provides some advanced feature implementations of the lower es standard. Use polifill as follows:

npm install --save babel-polifill

Then introduce polifill in the application portal, making sure it is called before any other code/dependency declarations.

//CommonJS module
require('babel-polyfill');

//es module
import 'babel-polifill';Copy the code

In webpack.config.js, add babel-polifill to the entry array:

entry: ["babel-polifill"."./app.js"]Copy the code

Compared to run-time Transform, polifill is used in application development. Contaminates global variables by adding corresponding variables to the global.

See Babel-Polifill for more details.

The runtime – transform plug-in

The Runtime Transform is also a plug-in similar to Polifill, but it does not pollute global variables, so it is often used in framework development.

NPM install –save-dev babel-plugin-transform-runtime

npm install --save babel-runtime

Usage: Add the following to the.bablerc file

{
    "plugins": ["transform-runtime"]}Copy the code