1. Watch Monitors the number of changes of routing addresses
var vm = new Vue({
    el:'#app',
    watch:{
        '$route.path':funciton(newVal,oldVal){
            console.log(newVal +'-------------'+oldVal)
        }
    }
})
Copy the code
2.computed
Var vm = new Vue({el:'#app', data:{firstName :'', lastName :''}, computed:{// In computed, you can define attributes called computed attributes, A calculated property is essentially a method, but we use the name of the calculated property as a property, not as a method call. If the data in any data used in the calculated property changes, The value of the calculated property is recalculated immediately, and the result of the calculated property is saved for direct use next time. If none of the data on which the calculated property method depends has changed, then, Function (){return this.firstName +'-'+ this.lastName}}})Copy the code
3. Comparison of watch computed methods

The result of the 1.computed attribute is cached and recalculated except for dependent responsive attribute changes, mainly used as attributes; 3. Watch An object. The key is the expression to be observed, and the value is the corresponding callback function. It is mainly used to monitor changes in some specific data and perform specific business logic operations, which can be regarded as a combination of computed and methods

4. The use of NRM

NRM maintains the address of NPM, CNPM taobao, NJ Rednpm, etc. Can let us quickly switch the installation package server address; Note: NRM simply provides several urls for downloading packages and allows us to easily switch between these urls. However, we use NPM to install packages every time

NRM installation NPM I NRM -g (global installation NRM) NRM ls Displays all available source addresses and the original address of the current mirror. NRM use NPM or NRM use Taobao Switches different mirror source addresses

4.webpack

Static resources long used in web pages are

  • js
    • Js.jsx.coffee. ts(TypeScript C#)
  • css
    • .css .less .sass .scss
  • images
    • .jpg .png .gig .bmp .svg
  • Fonts (font)
    • .svg .ttf .eot .woff .woff2
  • Template file
    • .ejs.jade. vue [This is the recommended way to define components in webpack]

What’s the problem with the introduction of static resources in web pages?

  1. Web pages load slowly because we make a lot of secondary requests; (After we request to get the HTML, we need to parse from the bottom down. When we encounter JS pictures and other CPPCC resources in the process of parsing, we need to make a second request to obtain the corresponding resources.)
  2. There are intricate dependencies to deal with

How to solve the above two problems? 1. Merge, compress, Sprite, base64 encoding of pictures (small pictures are recommended) 2. You can use requireJS, which you learned earlier, or you can use WebPack to resolve complex dependencies between packages

Webpack is a front-end project construction tool, it is based on node.js developed a front-end tool;

How to achieve the above two solutions perfectly 1. Gulp is task-based; 2. Using Webpack, it is built based on the whole project;

With the help of Webpack, a front-end automatic construction tool, it can perfectly realize the merging, packaging, compression, confusion and many other functions of resources.

5. Webpack use

The installation

  1. NPM I webpack -g install webpack globally, so that you can use webpack commands globally
  2. Run NPM I webpack –save-dev in the project root directory to install into the project dependencies

use

Import *** from *** eg:import fromjquery const = constFromjquery require(‘jquery’)

What can WebPack do? 1. Webpack can deal with the interdependence between JS files. 2. Webpack can deal with the compatibility of JS, the advanced, browser does not know other syntax, into low-level, browser can normally recognize the syntax

Webpack syntax Format: Path of the file to be packed by Webpack Path of the packaged output file

The configuration file creates webpack.config.js in the project root directory

// Module.exports = {// exports = {// exports = {// exports = {// exports = {// exports = {// exports: Entry :path.join(__dirname,'./ SRC /main.js'), Path :path.join(__dirname,'./dist'),// specify the package file, Filename :'bundle.js',// this is the name of the output file}} When the configuration is complete, you can run webpack directly (no need to specify the file to package and output file as above). Webpack finds that we haven't given it an entry and exit command. 2. Webpack goes to the root directory of the project and finds a configuration file called webpack.config.js 3. When the configuration file is found, WebPack parses and executes the configuration file, resulting in a configuration object 4. You get the configuration object, you get the entry and exit specified in the configuration object, and you're ready to package and buildCopy the code
6.webpack-dev-server

Using the webpack-dev-server tool, you can implement automatic packaging and compilation

/ / installation

1. Run NPM I webpack-dev-server -d to install the tool into the project’s local development dependencies

/ / use

2. After the installation is complete, use the same command as webpack

3. Since we installed webpack-dev-server locally in the project, we cannot run it directly as a script command in powershell terminal (only those tools installed in global -G can be executed normally in terminal)

4. Note that the webpack-dev-server tool requires webpack to be installed in the local project in order to run properly

Json file, “dev”:”webpack-dev-server”,

5. Webpack-dev-server helped us package the bundle.js file, which was directly hosted in the computer’s memory instead of being stored on the actual physical disk

(dist SRC node_modules) (webpack-dev-server) (dist SRC node_modules) (webpack-dev-server) (dist SRC node_modules

7. Common command parameters of webpack-dev-server

Continue in the package.json file

Dev :”webpack-dev-server –open –port 3000 –contentBase SRC –hot” The package path is SRC and hot deployment is required

Webpack-dev-serve is another way to configure commands

Exports = {// set path = require('path') // set path = require('path') // set path = require('path') // set path = require('path') // set path = require('path') // set path = require('path') // Entry :path.join(__dirname,'./ SRC /main.js'), Path :path.join(__dirname,'./dist'),// specify the package file, Filename :'bundle.js',// this is the name of the file to specify the output}, devServer:{// This is the second form to configure the dev-server command parameters, relatively speaking, Open :true,// automatically open the browser port:3000,// set the runtime port contentBase:' SRC ',// specify the managed root directory hot:true,// enable the first step of the hot update}, Plugins: [/ / configure the plug-in node new webpack hotModuleRepalcementPlugin () / / new a hot update module object, this is the third step] enable hot update}! [image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7812198c495347df8d8b2c2f06cf80d1~tplv-k3u1fbpfcp-watermark .image)Copy the code
8.html-webpack-plugin

NPM I html-webpack-plugin -d Imports the plugin in the webpack.config.js file

// Import plugins that generate HTML pages in memory // all plugins must be placed in plugins node //1. HtmlWebpackPlugin = require('html-webpack-plugin') const htmlWebpackPlugin = require('html-webpack-plugin')Copy the code
Plugins :{new htmlWebpackPlugin({// create a plugin that generates HTML pages in memory template:path.join(__dirname,'. Filename :'index.html'// Specify the name of the generated page})} Note: After using the HTML-webpack-plugin, we didn't need to deal with the bundle.js import path manually because the plugin automatically created a suitable script and referenced the correct pathCopy the code
9. Third-party loader for CSS stylesheets

Webpack by default can only package js problems and cannot handle other non-JS files. To handle non-JS files, we need to manually install some suitable third-party loader

1. To package and process CSS files, install CNPM I style-loader CSS-loader-d 2. Replace the webpack.config.js configuration file with a new configuration node named Module, which is an object. In this module object, there is a rules property, which is an array, which stores the matching and processing rules of all third-party files

Module.exports = {entry:path.join(__dirname,'./ SRC /main.js'), output:{...... }, devServer: {... }, plugins: [...] , module:{// This node configures all third-party module loaders rules:[// All third-party module matching rules {test: /\.css$/,use:['style-loader','css-loader']}// Configure processing. Find that the file to be processed is not a JS file, then check the configuration file to see if there is a corresponding third-party Loader rule 2. If the corresponding rule can be found, the corresponding loadR is called to handle this file type 3. Loader is called from back to front. 4. When the last loader call is completed, the processing result is directly sent to Webpack for packaging and merging, and finally output to bundle.jsCopy the code
10. Configure loader to process less

Install less-loader NPM I less-loader -d NPM I less-d (less is a dependency package of less-loader)

Module :{// This node is used to configure all third-party module loaders rules:[// All third-party module matching rules {test: /\.css$/,use:['style-loader','css-loader']},// Configure the third-party loader rules for.css files. {test:/\. Less /,use:['style-loader','css-loader','less-loader']},// Configure third-party loader rules for processing less files]}Copy the code
11. Configure loader to process SCSS

NPM I sass-loader -d CNPM I node-sass -d

Module :{// This node is used to configure all third-party module loaders rules:[// All third-party module matching rules {test: /\.css$/,use:['style-loader','css-loader']},// Configure the third-party loader rules for.css files. Less /,use:['style-loader','css-loader','less-loader']},// Configure third-party loader rules for processing less files {test:/\. Less /,use:['style-loader','css-loader','less-loader']}, /\.scss$/,use:['style-loader','css-loader','sass-loader']},// Configure the third-party loader rules for handling SCSS files]} // Note webpack 1.x The -loader of ***-loader in use can be omitted and must be written after 2.xCopy the code