VUE学习笔记详细

我会带着你远行 2023-09-30 14:31 23阅读 0赞

## VUE学习笔记 ##

> 本文章以vue3来记录的，但并非记录vue3所有变化！

### 1、ES6语法 ###

#### 1.1、let变量声明 ####

*  let用于声明**变量**
 *  有局部作用域
 *  let声明的变量不会提升（只能先定义后使用）

#### 1.2、const变量声明 ####

*  const用于声明**常量**
 *  const声明的常量也不会提升（只能先定义后使用）
 *  const声明对象时,该对象不可以更换,但是对象里的内容可以更改

#### 1.3、箭头函数 ####

function myfunction(x){
        
    	return x*x
    }
    console.log(myfunction(3))
    
    const myFunc =(x)=>{
        return x * x}
    console.log(myFunc(3))
    
    const myFunc1 =x=>x*x
    console.log(myFunc(3))

*  理解为一般函数去掉function关键字再在参数和函数语句块中间加上=>
 *  如果只有一个参数,可以去掉括号(注意没有参数时也要加上()占位)
 *  如果只有一条返回语句,可以再去掉return和\{ \}
 *  箭头函数在返回对象时必须在对象外层多加一个()
 *  this 与普通函数的this不同, 普通函数谁调用这个函数,this就是指向谁 箭头函数没有自己的this,它的this继承于父级, 也就是箭头函数的this指向箭头函数所处对象

#### 1.4、数组新增的高级方法 ####

*  filter()
    
        // 接受一个函数,函数有一个参数,此参数代表循环这个数组时的每个元素
        let myArray=[1,2,3,4,5,6,7,8,9];
        
        let array1 = myArray.filter(function(n){
              
        	return n>5;
        })
        console.log(array1) // 6,7,8,9
 *  map()
    
        // 接受一个函数,同样的也有一个参数,相当于对数组元素每个都应用这个函数的规则
        let array2 = array1.map(function(n){
              
            return 2*n;
        })
        console.log(array1)
 *  reduce()
    
        // 接受两个参数,
        // 第一个参数为函数,函数有两个参数(s,n),第一个参数代表起始值,第二个参数代表循环数组的每个元素
        // 第二个参数指定第一个函数参数的第一个参数的起始值s
        // s指上一次的返回值
        // n每次代表这次循环的数组的值
        let sum = 0;
        sum = array2.reduce(function(s,n){
              
            return s+n;
        },0)
        
        console.log(sum)

#### 1.5、字符串新增方法 ####

*  String.startswith(string) 判断String是否以string开头 返回true或false
 *  String.endswith(string) 判断String是否以string结尾

#### 1.6、模板字符串 ####

let name = 'zhangsan';
    let age = 10;
    
    // 下面两个都得到: zhangsan is 10 years old
    let normalStr = name+ ' is ' + age + ' years old';
    let templateStr = `${
          name} is ${
          age} years old`

#### 1.7、解构 ####

*  数组
    
        let arr = [1,2,3];
        
        // 如果要把这个数组的三个值分别给三个变量:
        {
              
            let a = arr[0];
            let b = arr[1];
            let c = arr[2];
        }
        
        // 新增简单方法:
        {
              
            let [a, b, c] = [1, 2 ,3];
        }
        // 或写成:
        {
              
            let [a, b, c] = arr;
        }
 *  对象
    
        let person = {
              
            name:'zhangsan',
            age:10,
            gender:'male'
        }
        {
              
            let {
              name, age, gender} = person;
            console.log(name, age, gender)
            // 输出 zhangsan 10 male
        }
        // 别名
        {
              
            let {
              name:Name, age:Age, gender:Gender} = person;
            console.log(Name, Age, Gender)
            // 输出 zhangsan 10 male
        }
 *  复合赋值
    
        let arr = [{
              name:'zhangsan', age:10}, [1,2,3], 'hello', 9 ];
        {
              
            let [a,b,c,d] = arr;
            console.log(a);
            console.log(b,c,d);
        }
 *  分解赋值
    
        let arr = [{
              name:'zhangsan', age:10}, [1,2,3], 'hello', 9 ];
        {
              
            let[{
              name,age},[a,b,c],d,e] = arr;
            console.log(name,age);  // zhangsan 10
            console.log(a,b,c);     // 1 2 3 
            console.log(d,e);       // hello 9
        
        }

#### 1.8、三点拓展运算符 ####

let array1 = [1,2,3];
    let array2 = [7,8,9];
    let myArray = [...array1, 4, 5, 6, ...array2] ;
    console.log(myArray)    // 1, 2, 3, 4, 5, 6, 7, 8, 9

function myFunction(a, b, c) {
        
        console.log(a,b,c);     
        return a+b+c;
    }
    let arr = [1,2,3];
    console.log(myFunction(...arr));    
    // 1 2 3 
    // 6

#### 1.9、模块化编程 ####

##### 1.9.1、module的引入 #####

编写html文件时,通常会引入许多js文件,如下:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="./1.js"></script>
        <script src="./2.js"></script>
    </head>
    <body>
        
    </body>
    </html>

当这些js文件中有重复命名时,便会报错 如1.js和2.js都定义一个变量name

// 1.js
    let name = 'zhangsan';

// 2.js
    let name = 'lisi';

那么在最开始那样引入三个js文件会导致变量名冲突,报错如下: `Uncaught SyntaxError: Identifier 'name' has already been declared` 因为这样引入js会导致浏览器不知道解析那个name变量

可以给script标签的type属性赋值为module来解决这个问题

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="./1.js" type='module'></script>
        <script src="./2.js" type='module'></script>
        <script src="./3.js" type='module'></script> 
    </head>
    <body>
        
    </body>
    </html>

##### 1.9.2、访问不同js文件下相同的变量 #####

// 1.js
    
    let name = 'zhangsan';
    function add(a, b){
        return a+b}
    
    export {
        name, add};  // 注意这里是json的简化写法,相当于 export {name:name};

// 3.js
    
    import {
        name, add} from './1.js';   
    // 注意这里使用了解构赋值,相当于:
    // let {name, add} = {name:name, add:add} (这个对象来自./1.js文件的export)
    
    // 接下来我们便可以直接使用name与add
    console.log(name);  // zhangsan
    console.log(add(3, 9)); // 1

##### 1.9.3、解决引入后的命名冲突 #####

当从其他文件引入变量后,也可能出现命名重复

// 3.js
    import {
        name} from './1.js';
    import {
        name} from './2.js';

可以采用取别名的方法来解决这个问题

// 3.js
    import {
        name as name1} from './1.js';
    import {
        name as name2} from './2.js';
    // 接下来使用name1或者name2即可

同样的你也可以在1.js或者2.js暴露属性时取别名

// 1.js
    
    let name = 'zhangsan';
    
    export {
        name as name1};

// 2.js
    
    let name = 'lisi';
    
    export {
        name as name2};

// 3.js
    import {
        name1} from './1.js';
    import {
        name2} from './2.js';
    
    console.log(name1, name2);  // zhangsan lisi

##### 1.9.4、定义属性时暴露 #####

// 1.js
    export let name = 'zhangsan';

##### 1.9.5、缺少名字的暴露属性 #####

每个js文件只能定义这样的一个export default,

如果出现两个及以上, 那么会报错`Uncaught SyntaxError: Identifier '.default' has already been declared`

// 1.js
    export default function(a){
        
        console.log(a)
    }

接收时名字不需要\{\}

// 3.js
    import printa from './1.js'
    // 这里的printa是自己定义的

##### 1.9.6、接收暴露的所有属性 #####

export * as name from 'url';   // 创建一个对象接收暴露的所有属性
    // name.attr;

#### 1.10、Promise ####

是异步编程的一种解决方案

从语法上说，Promise 是一个对象，从它可以获取异步操作的消息

**以前的回调**

setTimeout(()=>{
        
        console.log(111)
        setTimeout(()=>{
        
            console.log(222)
            setTimeout(()=>{
        
                console.log(333)
            },1000)
        },1000)
    },1000)

es6的回调

new Promise((resolve, reject) => {
        
        console.log(111)
        resolve(222)
        // reject(333)
    }).then(res => {
        
        console.log(res)
        return 444
    }).catch(err => {
        
        console.log(err)
    }).then(res => {
        
        console.log(res)
        return new Promise((resolve, reject) => {
        
            setTimeout(()=>{
        
                resolve(555)
            },1000)
        })
    }).then(res => {
        
        console.log(res)
    })

### 2、nodejs ###

[node.js][]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16]

#### 2.1、npm ####

npm会跟随nodejs一起安装

*  npm -v：查看版本
 *  npm install ：安装模块
 *  npm install -g：全局安装模块
 *  npm uninstall ：卸载模块

#### 2.2、Package.json ####

*  name：包名
 *  version：包的版本号
    
     *  “5.0.3”表指定版本号
     *  “~5.0.3”表安装5.0.x的最新版本
     *  “^5.0.3”表安装5.x.x的最新版本
 *  description：包的描述
 *  homepage：包的官网url
 *  author：作者
 *  contributors：包的其他贡献者
 *  dependencies：依赖包列表
 *  repository：包代码存放位置
 *  main：程序入口文件
 *  keywords：关键词

### 3、webpack ###

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 1]

npm install webpack -g

#### 3.1、快速入门 ####

*  创建文件夹
 *  `npm init -y`
 *  `npm i -D webpack webpack-cli`
 *  webpack.config.js
    
        const path = require('path')
        
        module.exports = {
              
            entry: {
              
                entry1: path.resolve(__dirname, './src/index.js'),
            },
            output: {
              
                path: path.resolve(__dirname, './dist'),
                filename: 'bundle.js',
            }
        }
 *  index.js
    
        console.log('Interesting!')
 *  index.html
    
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
        <script type="text/javascript" src="../dist/bundle.js" charset="utf-8"></script>
        </body>
        </html>
 *  package.json
    
        {
              
          "name": "demo",
          "version": "1.0.0",
          "description": "",
          "main": "index.js",
          "scripts": {
              
            "dev": "webpack --mode development",
            "build": "webpack --mode production",
            "test": "echo \"Error: no test specified\" && exit 1"
          },
          "keywords": [],
          "author": "",
          "license": "ISC",
          "devDependencies": {
              
            "webpack": "^5.60.0",
            "webpack-cli": "^4.9.1"
          }
        }
 *  编译
    
        npm run dev

#### 3.2、多入口和多出口 ####

const path = require('path')
    
    module.exports = {
        
        // 单chuank
        // entry: ["./src/index1.js",./src/index2.js]
        
        // 多chuank，key为chuank名
        entry: {
        
            entry1: path.resolve(__dirname, './src/index1.js'),
            entry2: path.resolve(__dirname, './src/index2.js')
        },
        output: {
        
            path: path.resolve(__dirname, './dist'),
            filename: '[name].js',
        }
    }

#### 3.3、webpack打包html ####

npm i html-webpack-plugin -D

webpack.config.js

webpack.config.js——多个html

const path = require('path')
    const htmlWebpackPlugin = require("html-webpack-plugin")
    module.exports = {
        
        entry: {
        
            entry1: path.resolve(__dirname, './src/index.js'),
        },
        output: {
        
            path: path.resolve(__dirname, './dist'),
            filename: 'bundle.js',
        },
        plugins: [
            new htmlWebpackPlugin({
        
                template: "./src/index.html",
                filename: "index.html",
                chunks: ["index","common"],
                minify: {
        
                    // 移除空格换行
                    collapseWhitespace: true,
                    // 移除注释
                    removeComments: true
                }
            }),
            new htmlWebpackPlugin({
        
                template: "./src/cart.html",
                filename: "cart.html",
                chunks: ["cart","common"],
                minify: {
        
                    // 移除空格换行
                    collapseWhitespace: true,
                    // 移除注释
                    removeComments: true
                }
            })
        ]
    }

#### 3.4、webpack打包css ####

*  css-loader：处理@import和url
 *  style-loader：把样式插到Dom中

npm i css-loader style-loader -D

index.js

require('./index.css')
    console.log('Interesting!')

webpack.config.js

const path = require('path')
    const htmlWebpackPlugin = require("html-webpack-plugin")
    module.exports = {
        
        entry: {
        
            entry1: path.resolve(__dirname, './src/index.js'),
        },
        output: {
        
            path: path.resolve(__dirname, './dist'),
            filename: 'bundle.js',
        },
        module: {
        
            rules: [
                {
        
                    test: /\.css$/,
                    use: ['style-loader','css-loader']
                }
            ]
        },
        plugins: [
            new htmlWebpackPlugin({
        
                template: "./src/index.html",
                filename: "demo.html",
                minify: {
        
                    // 移除空格换行
                    collapseWhitespace: true,
                    // 移除注释
                    removeComments: true
                }
            })
        ]
    }

#### 3.5、webpack打包less ####

npm install less less-loader -D

less.less

h1{
      &:hover{
        color: blue;
      }
    }

index.js

require('./index.css')
    require('./less.less')
    console.log('Interesting!')

webpack.config.js

const path = require('path')
    const htmlWebpackPlugin = require("html-webpack-plugin")
    module.exports = {
        
        entry: {
        
            entry1: path.resolve(__dirname, './src/index.js'),
        },
        output: {
        
            path: path.resolve(__dirname, './dist'),
            filename: 'bundle.js',
        },
        module: {
        
            rules: [
                {
        
                    test: /\.css$/,
                    use: ['style-loader','css-loader']
                },
                {
        
                    test: /\.less$/,
                    use: ['style-loader','css-loader','less-loader']
                }
            ]
        },
        plugins: [
            new htmlWebpackPlugin({
        
                template: "./src/index.html",
                filename: "demo.html",
                minify: {
        
                    // 移除空格换行
                    collapseWhitespace: true,
                    // 移除注释
                    removeComments: true
                }
            })
        ]
    }

#### 3.6、webpack打包sass ####

npm install sass-loader node-sass -D

sass.scss

p{
      text-indent: 2em;
    }

index.js

require('./index.css')
    require('./less.less')
    require('./sass.scss')
    console.log('Interesting!')

webpack.config.js

const path = require('path')
    const htmlWebpackPlugin = require("html-webpack-plugin")
    module.exports = {
        
        entry: {
        
            entry1: path.resolve(__dirname, './src/index.js'),
        },
        output: {
        
            path: path.resolve(__dirname, './dist'),
            filename: 'bundle.js',
        },
        module: {
        
            rules: [
                {
        
                    test: /\.css$/,
                    use: ['style-loader','css-loader']
                },
                {
        
                    test: /\.less$/,
                    use: ['style-loader','css-loader','less-loader']
                },
                {
        
                    test: /\.scss$/,
                    use: ['style-loader','css-loader','sass-loader']
                }
            ]
        },
        plugins: [
            new htmlWebpackPlugin({
        
                template: "./src/index.html",
                filename: "demo.html",
                minify: {
        
                    // 移除空格换行
                    collapseWhitespace: true,
                    // 移除注释
                    removeComments: true
                }
            })
        ]
    }

#### 3.7、提取css为单独的文件 ####

npm i mini-css-extract-plugin -D

webpack.config.js

const path = require('path')
    const htmlWebpackPlugin = require("html-webpack-plugin")
    let miniCssExtractPlugin = require("mini-css-extract-plugin");
    module.exports = {
        
        entry: {
        
            entry1: path.resolve(__dirname, './src/index.js'),
        },
        output: {
        
            path: path.resolve(__dirname, './dist'),
            filename: 'bundle.js',
        },
        module: {
        
            rules: [
                {
        
                    test: /\.css$/,
                    use: [miniCssExtractPlugin.loader,'css-loader']
                },
                {
        
                    test: /\.less$/,
                    use: ['style-loader','css-loader','less-loader']
                },
                {
        
                    test: /\.scss$/,
                    use: ['style-loader','css-loader','sass-loader']
                }
            ]
        },
        plugins: [
            new htmlWebpackPlugin({
        
                template: "./src/index.html",
                filename: "demo.html",
                minify: {
        
                    // 移除空格换行
                    collapseWhitespace: true,
                    // 移除注释
                    removeComments: true
                }
            }),
            new miniCssExtractPlugin()
        ]
    }

#### 3.8、css兼容性处理 ####

npm i postcss-loader postcss-preset-env -D

index.css

h1{
        
        color: aqua;
        transform:rotate(-30deg);
    }

webpack.config.js

const path = require('path')
    const htmlWebpackPlugin = require("html-webpack-plugin")
    let miniCssExtractPlugin = require("mini-css-extract-plugin");
    module.exports = {
        
        entry: {
        
            entry1: path.resolve(__dirname, './src/index.js'),
        },
        output: {
        
            path: path.resolve(__dirname, './dist'),
            filename: 'bundle.js',
        },
        module: {
        
            rules: [
                {
        
                    test: /\.css$/,
                    use: [miniCssExtractPlugin.loader,'css-loader','postcss-loader']
                },
                {
        
                    test: /\.less$/,
                    use: ['style-loader','css-loader','less-loader']
                },
                {
        
                    test: /\.scss$/,
                    use: ['style-loader','css-loader','sass-loader']
                }
            ]
        },
        plugins: [
            new htmlWebpackPlugin({
        
                template: "./src/index.html",
                filename: "demo.html",
                minify: {
        
                    // 移除空格换行
                    collapseWhitespace: true,
                    // 移除注释
                    removeComments: true
                }
            }),
            new miniCssExtractPlugin()
        ]
    }

postcss.config.js

module.exports = {
        
        plugins: [
            require('postcss-preset-env')()
        ]
    }

package.json

"browserslist": [
      ">0.8%",
      "last 2 version"
    ]

#### 3.9、css压缩 ####

npm i optimize-css-assets-webpack-plugin -D

webpack.config.js

#### 3.10、图片、字体资源打包 ####

webpack.config.js

const path = require('path')
    const htmlWebpackPlugin = require("html-webpack-plugin")
    const miniCssExtractPlugin = require("mini-css-extract-plugin");
    const optimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
    module.exports = {
        
        entry: {
        
            entry1: path.resolve(__dirname, './src/index.js'),
        },
        output: {
        
            path: path.resolve(__dirname, './dist'),
            filename: 'bundle.js',
        },
        module: {
        
            rules: [
                {
        
                    test: /\.css$/,
                    use: [miniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
                },
                {
        
                    test: /\.less$/,
                    use: ['style-loader', 'css-loader', 'less-loader']
                },
                {
        
                    test: /\.scss$/,
                    use: ['style-loader', 'css-loader', 'sass-loader']
                },
                {
        
                    test: /\.(png|jpg|gif)$/,
                    type: 'asset',
                    parser: {
        
                        dataUrlCondition: {
        
                            maxSize: 8192
                        }
                    },
                    generator: {
        
                        filename: 'images/[hash][ext][query]'
                    }
                },
                {
        
                    test:/\.(eot|svg|ttf|woff|woff2)/,
                    type: 'asset',
                    generator: {
        
                        filename: 'fonts/[hash][ext][query]'
                    }
                },
                // 如果html里引入了图片资源要使用html-withimg-loader插件处理
                {
        
                    test: /\.html$/,
                    use: [
                        'html-withimg-loader'
                    ],
                }
            ]
        },
        plugins: [
            new htmlWebpackPlugin({
        
                template: "./src/index.html",
                filename: "demo.html",
                minify: {
        
                    // 移除空格换行
                    collapseWhitespace: true,
                    // 移除注释
                    removeComments: true
                }
            }),
            new miniCssExtractPlugin(),
            new optimizeCssAssetsWebpackPlugin()
        ]
    }

#### 3.11、热部署devServer ####

npm i webpack-dev-server -D

webpack.config.js

const path = require('path')
    const htmlWebpackPlugin = require("html-webpack-plugin")
    const miniCssExtractPlugin = require("mini-css-extract-plugin");
    const optimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
    module.exports = {
        
        entry: {
        
            entry1: path.resolve(__dirname, './src/index.js'),
        },
        output: {
        
            path: path.resolve(__dirname, './dist'),
            filename: 'bundle.js',
        },
        module: {
        
            rules: [
                {
        
                    test: /\.css$/,
                    use: [miniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
                },
                {
        
                    test: /\.less$/,
                    use: ['style-loader', 'css-loader', 'less-loader']
                },
                {
        
                    test: /\.scss$/,
                    use: ['style-loader', 'css-loader', 'sass-loader']
                },
                {
        
                    test: /\.(png|jpg|gif)$/,
                    type: 'asset',
                    parser: {
        
                        dataUrlCondition: {
        
                            maxSize: 8192
                        }
                    },
                    generator: {
        
                        filename: 'images/[hash][ext][query]'
                    }
                },
                {
        
                    test:/\.(eot|svg|ttf|woff|woff2)/,
                    type: 'asset',
                    generator: {
        
                        filename: 'fonts/[hash][ext][query]'
                    }
                },
                {
        
                    test: /\.html$/,
                    use: [
                        'html-withimg-loader'
                    ],
                },
                {
        
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: "eslint-loader",
                    options: {
        
                        fix: true
                    }
                }
            ]
        },
        plugins: [
            new htmlWebpackPlugin({
        
                template: "./src/index.html",
                filename: "index.html",
                minify: {
        
                    // 移除空格换行
                    collapseWhitespace: true,
                    // 移除注释
                    removeComments: true
                }
            }),
            new miniCssExtractPlugin(),
            new optimizeCssAssetsWebpackPlugin()
        ],
        devServer: {
        
            open: true,
            port: 8090
        },
        mode: 'development',
        target: "web"
    }

package.json

{
        
      "name": "demo",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        
        "dev": "webpack --mode development",
        "build": "webpack --mode production",
        "test": "echo \"Error: no test specified\" && exit 1",
    	"start": "webpack-dev-server --open"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        
        "webpack": "^5.60.0",
        "webpack-cli": "^4.9.1"
      }
    }

npm start

更改下文件，查看浏览器效果

### 4、axios ###

npm i -S axios
    npm i -D webpack webpack-cli

#### 4.1、快速入门 ####

@RestController
    @CrossOrigin
    public class HelloController {
        
        @RequestMapping("/")
        public String hello(){
        
            return "hello,vue server!";
        }
        @RequestMapping("/name")
        public String hello(@RequestParam String name){
        
            return "hello,"+name;
        }
    }

import axios from "axios";
    
    console.log("hello,world!")
    
    axios.get("http://localhost:8099/").then(res=>{
        
        console.log(res);
    })
    axios.get("http://localhost:8099/name?name=frost").then(res=>{
        
        console.log(res);
    })

#### 4.2、处理并发请求 ####

import axios from "axios";
    
    console.log("hello,world!")
    
    axios.all([
        axios.get("http://localhost:8099/"),
        axios.get("http://localhost:8099/name?name=frost")
    ]).then(res=>{
        
        console.log(res);
    })

#### 4.3、全局配置 ####

import axios from "axios";
    
    console.log("hello,world!")
    
    axios.defaults.baseURL = "http://localhost:8099/"
    axios.defaults.timeout = 5000
    
    axios.get("name?name=frost").then(res=>{
        
        console.log(res);
    })

#### 4.5、实例封装 ####

#### 4.6、拦截器 ####

import axios from "axios";
    
    console.log("hello,world!")
    
    const localhost1=axios.create({
        
        baseURL: "http://localhost:8099/"
    })
    const localhost2=axios.create({
        
        baseURL: "http://localhost:8199/"
    })
    localhost1.interceptors.request.use(config=>{
        
        console.log("请求拦截成功,给请求加点料");
        return config
    },error => {
        
        console.log(error);
    })
    localhost1.interceptors.response.use(config=>{
        
        console.log("响应拦截成功,给响应加点料");
        return config
    },error => {
        
        console.log(error);
    })
    localhost1.get("name?name=frost").then(res=>{
        
        console.log(res);
    })

### 5、VUE ###

#### 5.1、vue脚手架 ####

全局安装vue脚手架

npm install -g @vue/cli

创建项目

vue create 项目名

PS D:\ITEM> vue create vue
    
    
    Vue CLI v4.5.15
    ? Please pick a preset: (Use arrow keys)
    > standard ([Vue 3] babel, router, vuex, eslint)
      Default ([Vue 2] babel, eslint)
      Default (Vue 3) ([Vue 3] babel, eslint)
      Manually select features

自定义项目配置

PS D:\ITEM> vue create vue
    
    
    Vue CLI v4.5.15
    ? Please pick a preset: Manually select features
    ? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
    ? Choose a version of Vue.js that you want to start the project with 3.x
    ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
    ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
    ? Pick a linter / formatter config: Airbnb
    ? Pick additional lint features: Lint and fix on commit
    ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
    ? Save this as a preset for future projects? Yes
    ? Save preset as: wenley-project
    
    �  Preset wenley-project saved in C:\Users\xumeng03\.vuerc

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16]

#### 5.2、vue.config.js ####

与webpack配置不一样，精简了许多

[详细配置清单][Link 1]

#### 5.3、插值 ####

<template>
      <div class="about">
        <h1>This is an about page</h1>
        <p>{
       { msg }}</p>
        
        <p v-pre>{
       { msg }}</p>
        
        <p v-once>{
       { msg }}</p>
        
        <p v-text="msg"></p>
        
        <p v-html="msg"></p>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          msg: '<strong>hello world!</strong>',
        };
      },
    };
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 1]

<template>
      <div class="about">
        <h1 :title="msg">This is an about page</h1>
        
        <p style="color:red">This is an about page</p>
        <p :style="{'font-size':'12px'}">This is an about page</p>
        <p :style="style">This is an about page</p>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          msg: 'This is an about page',
          style: {
            'font-size': '12px',
          },
        };
      },
    };
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
几乎所有的html属性都可以使用v-bind绑定

#### 5.4、计算属性 ####

<template>
      <div class="about">
        <h1>This is an about page</h1>
        <p>{
       { title }} - {
       { slogan }}</p>
        <p>{
       { title + '-' + slogan }}</p>
        <p>{
       { TheTitle }}</p>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          title: 'This is an about page',
          slogan: '标语',
        };
      },
      computed: {
        // 只要依赖值未变化，则不会重新计算
        TheTitle: {
          get() {
            return `${this.title}#${this.slogan}`;
          },
        },
      },
    };
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 3]

#### 5.5、事件 ####

<template>
      <div class="about">
        <h1 @click="click">This is an about page</h1>
        
        <h1 @click="click1($event)">This is an about page</h1>
        
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          title: 'This is an about page',
        };
      },
      methods: {
        click() {
          console.log(111);
        },
        click1(e) {
          console.log(e);
          console.log(111);
        },
      },
    };
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 4]  
事件修饰符

*  stop：阻止事件冒泡
 *  prevent：阻止默认事件的发生
 *  capture：捕获冒泡，即有冒泡发生时，有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行，然后再按自然顺序执行触发的事件
 *  self：将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响
 *  once：设置事件只能触发一次

#### 5.6、条件分支 ####

*  v-if：为false不渲染
 *  v-show：为false仅仅使用css隐藏

<template>
      <div class="about">
        <h1>This is an about page</h1>
        <p v-if="true">v-if=true</p>
        <p v-if="false">v-if=false</p>
        <p v-else>v-if=false</p>
        <p v-show="true">v-show=true</p>
        <p v-show="false">v-show=false</p>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          title: 'This is an about page',
        };
      },
    };
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 5]

#### 5.7、循环 ####

<template>
      <div class="about">
        <h1>This is an about page</h1>
        <ul>
          <li v-for="item in list" :key="item">{
       { item }}</li>
        </ul>
        <ul>
          <li v-for="(item,index) in list" :key="index">{
       { index+' '+item }}</li>
        </ul>
        <ul>
          <li v-for="(value,key) in book" :key="key">{
       { key+' '+value }}</li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          list: ['java', 'c#', 'c', 'nasm', 'vue'],
          book: {
            name: 'java web',
            price: 128,
            date: '2021-12-31',
          },
        };
      },
    };
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 6]

#### 5.8、v-model ####

<template>
      <div class="about">
        <h1>This is an about page</h1>
        <input type="text" v-model="name">
        <br>
        <input type="number" v-model.number="age">
        <br>
        <input type="text" v-model.trim="name">
        <br>
        <input type="text" v-model.lazy="name">
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          name: 'wenley',
          age: 5,
        };
      },
    };
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 7]  
修饰符

*  number 限制用户输入的只能是数字（不是将用户输入的字符串转换成number！会将input里的值用parseFloat()转化！）
 *  trim 限制用户不能输入空格
 *  lazy：改变input框中的内容并不会使得数据马上发生变化，此时当输入框失去焦点后触发change事件

#### 5.9、监视 ####

<template>
      <div class="about">
        <h1>This is an about page</h1>
        <input type="text" v-model="people.name"/>
        {
       { watchName }}
        <input type="text" v-model="name"/>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          watchName: 'wenley',
          name: 'wenley',
          people: {
            name: 'wenley',
          },
        };
      },
      watch: {
        name(newvalue, oldvalue) {
          console.log(oldvalue);
          console.log(newvalue);
          this.watchName = newvalue;
        },
        'people.name': {
          handler(newvalue, oldvalue) {
            console.log(oldvalue);
            console.log(newvalue);
            this.watchName = newvalue;
          },
          deep: true,
        },
      },
    };
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 8]

#### 5.10、组件 ####

home.vue

<template>
      <div class="home">
        <img alt="Vue logo" src="../assets/logo.png">
        
        <HelloWorld msg="Welcome to Your Vue.js App"/>
      </div>
    </template>
    
    <script>
    // 组件引入
    // @ is an alias to /src
    import HelloWorld from '@/components/HelloWorld.vue';
    
    export default {
      name: 'Home',
      // 组件注册
      components: {
        HelloWorld,
      },
    };
    </script>

helloworld.vue

<template>
      <div class="hello">
        <h1>{
       { msg }}</h1>
        <p>
          For a guide and recipes on how to configure / customize this project,<br>
          check out the
          <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
        </p>
        <h3>Installed CLI Plugins</h3>
        <ul>
          <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
          <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
          <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
          <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
        </ul>
        <h3>Essential Links</h3>
        <ul>
          <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
          <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
          <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
          <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
          <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
        </ul>
        <h3>Ecosystem</h3>
        <ul>
          <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
          <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
          <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
          <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
          <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      props: {
        msg: String,
      },
    };
    </script>
    
    
    <style scoped lang="scss">
    h3 {
      margin: 40px 0 0;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      display: inline-block;
      margin: 0 10px;
    }
    a {
      color: #42b983;
    }
    </style>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 9]

##### 5.10.1、组件通信-父传子 #####

home.vue

helloworld.vue

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 10]  
props默认值（缺省值）

props: {
        
      demoString: {
        
        type: String,
    	//缺省值
        default: '',
        //是否必传
        required:true
      },
      demoNumber: {
        
        type: Number,
        default: 0
      },
      demoBoolean: {
        
        type: Boolean,
        default: true
      },
      demoArray: {
        
        type: Array,
        default: []
      },
      demoObject: {
        
        type: Object,
        default: {
        }
      },
      demoFunction: {
        
        type: Function,
        default: function () {
         }
      }
    }

##### 5.10.2、组件通信-子传父 #####

helloworld.vue

<template>
      <div class="hello">
        <h1>{
       { msg }}</h1>
        <h2>{
       { msg1 }}</h2>
        <input type="text" v-model="num" @input="()=>this.$emit('numChange',num)">
        <p>
          For a guide and recipes on how to configure / customize this project,<br>
          check out the
          <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
        </p>
        <h3>Installed CLI Plugins</h3>
        <ul>
          <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
                 target="_blank" rel="noopener">babel</a></li>
          <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
                 target="_blank" rel="noopener">router</a></li>
          <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
                 target="_blank" rel="noopener">vuex</a></li>
          <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
                 target="_blank" rel="noopener">eslint</a></li>
        </ul>
        <h3>Essential Links</h3>
        <ul>
          <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
          <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
          <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
          <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
          <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
        </ul>
        <h3>Ecosystem</h3>
        <ul>
          <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
          <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
          <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank"
                 rel="noopener">vue-devtools</a></li>
          <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
          <li><a href="https://github.com/vuejs/awesome-vue" target="_blank"
                 rel="noopener">awesome-vue</a></li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      props: {
        msg: String,
        msg1: {
          default: ['a', 'b'],
        },
      },
      data() {
        return {
          num: 0,
        };
      },
    };
    </script>
    
    
    <style scoped lang="scss">
    h3 {
      margin: 40px 0 0;
    }
    
    ul {
      list-style-type: none;
      padding: 0;
    }
    
    li {
      display: inline-block;
      margin: 0 10px;
    }
    
    a {
      color: #42b983;
    }
    </style>

home.vue

<template>
      <div class="home">
        <img alt="Vue logo" src="../assets/logo.png">
        <HelloWorld @numChange="numChange" msg="Welcome to Your Vue.js App"/>
      </div>
      <div>
        111-
        {
       { res }}
      </div>
    </template>
    
    <script>
    // @ is an alias to /src
    import HelloWorld from '@/components/HelloWorld.vue';
    
    export default {
      name: 'Home',
      components: {
        HelloWorld,
      },
      data() {
        return {
          res: 0,
        };
      },
      methods: {
        numChange(num) {
          console.log(num);
          // eslint-disable-next-line radix
          this.res += parseInt(num);
        },
      },
    };
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 11]

##### 5.10.3、父子组件相互访问 #####

helloworld.vue

<template>
      <div class="hello">
        <h1>{
       { msg }}</h1>
        <h2>{
       { msg1 }}</h2>
        <h3>{
       { num }}</h3>
        
        <input type="button" value="res++" @click="()=>this.$parent.res++">
        <input type="button" value="res++" @click="()=>this.$parent.numChange(1)">
        <br>
        <input type="button" value="log" @click="()=>this.$root.log()">
        <p>
          For a guide and recipes on how to configure / customize this project,<br>
          check out the
          <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
        </p>
        <h3>Installed CLI Plugins</h3>
        <ul>
          <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
                 target="_blank" rel="noopener">babel</a></li>
          <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
                 target="_blank" rel="noopener">router</a></li>
          <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
                 target="_blank" rel="noopener">vuex</a></li>
          <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
                 target="_blank" rel="noopener">eslint</a></li>
        </ul>
        <h3>Essential Links</h3>
        <ul>
          <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
          <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
          <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
          <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
          <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
        </ul>
        <h3>Ecosystem</h3>
        <ul>
          <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
          <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
          <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank"
                 rel="noopener">vue-devtools</a></li>
          <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
          <li><a href="https://github.com/vuejs/awesome-vue" target="_blank"
                 rel="noopener">awesome-vue</a></li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      props: {
        msg: String,
        msg1: {
          default: ['a', 'b'],
        },
      },
      data() {
        return {
          num: 0,
        };
      },
    };
    </script>
    
    
    <style scoped lang="scss">
    h3 {
      margin: 40px 0 0;
    }
    
    ul {
      list-style-type: none;
      padding: 0;
    }
    
    li {
      display: inline-block;
      margin: 0 10px;
    }
    
    a {
      color: #42b983;
    }
    </style>

home.vue

<template>
      <div class="home">
        <img alt="Vue logo" src="../assets/logo.png">
        <HelloWorld ref="helloworld" @numChange="numChange" msg="Welcome to Your Vue.js App"/>
      </div>
      <div>
        111-
        {
       { res }}
      </div>
      <input type="button" value="num++" @click="()=>this.$refs.helloworld.num++">
    </template>
    
    <script>
    // @ is an alias to /src
    import HelloWorld from '@/components/HelloWorld.vue';
    
    export default {
      name: 'Home',
      components: {
        HelloWorld,
      },
      data() {
        return {
          res: 0,
        };
      },
      methods: {
        numChange(num) {
          console.log(num);
          // eslint-disable-next-line radix
          this.res += parseInt(num);
        },
      },
    };
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 12]

##### 5.10.4、插槽 #####

TheSlot.vue

<template>
      <div>
        <h3>This is slot test</h3>
        <slot>
          <span>这个插槽好像是空的？</span>
        </slot>
      </div>
    </template>
    
    <script>
    export default {
      name: 'TheSlot',
    };
    </script>
    
    <style scoped>
    
    </style>

About.vue

<template>
      <div class="about">
        <h1>This is an about page</h1>
        <TheSlot>
          <input type="text">
        </TheSlot>
        <TheSlot>
          <input type="button" value="button">
        </TheSlot>
        <TheSlot>
          <a href="https://www.baidu.com/">百度</a>
        </TheSlot>
        <TheSlot></TheSlot>
      </div>
    </template>
    
    <script>
    // eslint-disable-next-line import/extensions
    import TheSlot from './TheSlot';
    
    export default {
      components: {
        // eslint-disable-next-line vue/no-unused-components
        TheSlot,
      },
    };
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 13]  
**具名插槽**

TheSlot.vue

<template>
      <div>
        <h3>This is slot test</h3>
        <slot name="slot1">
          <span>slot1好像是空的？</span>
        </slot>
        <br>
        <slot name="slot2">
          <span>slot2好像是空的？</span>
        </slot>
        <br>
        <slot>
          <span>slot3好像是空的？</span>
        </slot>
      </div>
    </template>
    
    <script>
    export default {
      name: 'TheSlot',
    };
    </script>
    
    <style scoped>
    
    </style>

About.vue

<template>
      <div class="about">
        <h1>This is an about page</h1>
        <TheSlot>
          <template v-slot:slot1>
            <input type="text">
          </template>
          <template v-slot:slot2>
            <input type="button" value="button">
          </template>
        </TheSlot>
        <TheSlot>
          <template v-slot:slot1>
            <input type="text">
          </template>
        </TheSlot>
        <TheSlot>
          <a href="https://www.baidu.com/">百度</a>
    	  
          
          
        </TheSlot>
      </div>
    </template>
    
    <script>
    // eslint-disable-next-line import/extensions
    import TheSlot from './TheSlot';
    
    export default {
      components: {
        // eslint-disable-next-line vue/no-unused-components
        TheSlot,
      },
    };
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 14]  
**插槽数据**

TheSlot.vue

<template>
      <div>
        <h3>This is slot test</h3>
        <slot name="slot1">
          <span>slot1好像是空的？</span>
        </slot>
        <br>
        <slot name="slot2">
          <span>slot2好像是空的？</span>
        </slot>
        <br>
        <slot :user="user">
          <span>slot3好像是空的？</span>
        </slot>
      </div>
    </template>
    
    <script>
    export default {
      name: 'TheSlot',
      data() {
        return {
          user: {
            name: 'slot',
          },
        };
      },
    };
    </script>
    
    <style scoped>
    
    </style>

About.vue

<template>
      <div class="about">
        <h1>This is an about page</h1>
        <TheSlot>
          <template v-slot:slot1>
            <input type="text">
          </template>
          <template v-slot:slot2>
            <input type="button" value="button">
          </template>
          <template v-slot:default="children">
            <span>{
       {children.user.name}}</span>
          </template>
        </TheSlot>
      </div>
    </template>
    
    <script>
    // eslint-disable-next-line import/extensions
    import TheSlot from './TheSlot';
    
    export default {
      components: {
        // eslint-disable-next-line vue/no-unused-components
        TheSlot,
      },
      data() {
        return {
          user: {
            name: 'about',
          },
        };
      },
    };
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 15]

#### 5.11、生命周期 ####

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 16]  
[官方描述：https://v3.cn.vuejs.org/api/options-lifecycle-hooks.html\#beforecreate][https_v3.cn.vuejs.org_api_options-lifecycle-hooks.html_beforecreate]

*  beforeCreate：
 *  created：
 *  beforeMount：
 *  mounted：
 *  beforeUpdate：
 *  updated：
 *  beforeUnmount：
 *  unmounted：
 *  activated：keep-alive组件激活时触发
 *  deaactivated：keep-alive组件停用时触发

**延迟处理**

**缓存标签**

TheSlot.vue

<template>
      <div>
        <h3>This is slot test</h3>
        <p>{
       { num }}</p>
        <slot name="slot1">
          <span>slot1好像是空的？</span>
        </slot>
        <br>
        <slot name="slot2">
          <span>slot2好像是空的？</span>
        </slot>
        <br>
        <slot :user="user">
          <span>slot3好像是空的？</span>
        </slot>
      </div>
    </template>
    
    <script>
    export default {
      name: 'TheSlot',
      data() {
        return {
          user: {
            name: 'slot',
          },
          num: 0,
        };
      },
    };
    </script>
    
    <style scoped>
    
    </style>

About.vue

<template>
      <div class="about">
        <h1>This is an about page</h1>
        <input type="button" value="num++" @click="()=>this.$refs.slot1.num++">
        <input type="button" value="slot" @click="()=>this.isShow=!this.isShow">
        
        
        
        
        
        
        
        
        
        
        
        <keep-alive>
          <TheSlot v-if="isShow" ref="slot1">
            <template v-slot:slot1>
              <input type="text">
            </template>
            <template v-slot:slot2>
              <input type="button" value="button">
            </template>
            <template v-slot:default="children">
              <span>{
       {children.user.name}}</span>
            </template>
          </TheSlot>
        </keep-alive>
      </div>
    </template>
    
    <script>
    // eslint-disable-next-line import/extensions
    import TheSlot from './TheSlot';
    
    export default {
      components: {
        // eslint-disable-next-line vue/no-unused-components
        TheSlot,
      },
      data() {
        return {
          user: {
            name: 'about',
          },
          isShow: true,
        };
      },
    };
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 17]  
**延迟处理**

About.vue

<template>
      <div class="about">
        <h1>This is an about page</h1>
        <input type="button" value="slot" @click="log">
        <input v-if="isShow" type="text" ref="input">
      </div>
    </template>
    
    <script>
    // eslint-disable-next-line import/extensions
    import TheSlot from './TheSlot';
    
    export default {
      components: {
        // eslint-disable-next-line vue/no-unused-components
        TheSlot,
      },
      data() {
        return {
          user: {
            name: 'about',
          },
          isShow: true,
          text: 'this is a text',
        };
      },
      methods: {
        log() {
          this.isShow = !this.isShow;
          if (this.isShow) {
            this.$refs.input.focus();
          }
        },
      },
    };
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 18]

<template>
      <div class="about">
        <h1>This is an about page</h1>
        <input type="button" value="slot" @click="log">
        <input v-if="isShow" type="text" ref="input">
      </div>
    </template>
    
    <script>
    // eslint-disable-next-line import/extensions
    import TheSlot from './TheSlot';
    
    export default {
      components: {
        // eslint-disable-next-line vue/no-unused-components
        TheSlot,
      },
      data() {
        return {
          user: {
            name: 'about',
          },
          isShow: true,
          text: 'this is a text',
        };
      },
      methods: {
        log() {
          this.isShow = !this.isShow;
          // if (this.isShow) {
          //   this.$nextTick(() => {
          //     this.$refs.input.focus();
          //   });
          // }
        },
      },
    };
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 19]

#### 5.12、axios ####

npm i -S axios
    npm i -S qs

##### 5.12.1、axios二次封装 #####

import axios from 'axios';
    import qs from 'qs';
    
    const network = axios.create({
        
      baseURL: 'http://localhost:8099/',
      timeout: 5000,
    });
    network.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    // 请求拦截
    network.interceptors.request.use((request) => {
        
      console.log('请求拦截成功,给请求加点料');
    
      // token添加
    
      if (request.method === 'get' && request.params) {
        
        // eslint-disable-next-line no-param-reassign
        request.url = `${
          request.url}?${
          qs.stringify(request.params)}`;
        // eslint-disable-next-line no-param-reassign
        delete request.params;
      }
    
      return request;
    }, (error) => {
        
      console.log(error);
    });
    
    // 响应拦截
    network.interceptors.response.use((response) => {
        
      console.log('响应拦截成功,给响应加点料');
      return response;
    }, (error) => {
        
      if (error) {
        
        // eslint-disable-next-line default-case
        switch (error.status) {
        
          case 400:
            // 错误请求
            console.log('错误请求');
            break;
          case 401:
            // 权限验证失败，跳转登录页
            console.log('权限验证失败，跳转登录页');
            break;
          case 403:
            //  请求被拒绝
            console.log('拒绝请求');
            break;
          case 404:
            // 页面找不到
            console.log('页面找不到');
            break;
          case 405:
            // 请求方法不被支持
            console.log('请求方法不被支持');
            break;
          case 500:
            // 服务器遇到错误
            console.log('服务器遇到错误');
            break;
          case 502:
            // 网关错误
            console.log('网关错误');
            break;
          case 503:
            // 服务不可用
            console.log('服务不可用');
            break;
        }
      } else {
        
        // eslint-disable-next-line no-lonely-if
        if (!window.navigator.onLine) {
        
          // 断网处理
          console.log('断网处理');
        } else {
        
          console.log('服务器崩溃');
        }
      }
    });
    
    export default {
        
      // 导出post请求
      post(url, data) {
        
        return network.post(url, data);
      },
      // 导出get请求
      get(url, data) {
        
        return network.get(url, {
         params: data });
      },
    };

##### 5.12.2、注入vue实例 #####

import {
         createApp } from 'vue';
    import App from './App.vue';
    import network from './network/request';
    import router from './router';
    import store from './store';
    
    const app = createApp(App);
    // Vue.prototype.$http = network;
    app.config.globalProperties.$http = network;
    app.use(store)
      .use(router)
      .mount('#app');

##### 5.12.3、使用 #####

this.$http.post('post', {
        
          str: 'wenley',
          str1: '111',
        })
        .then((res) => {
        
        	console.log(res);
    	});

#### 5.13、router ####

$router代表全局路由

$route代表当前页路由

##### 5.13.1、快速入门 #####

router/index.js

import {
         createRouter, createWebHistory } from 'vue-router';
    import Home from '../views/Home.vue';
    
    const routes = [
      {
        
        path: '/',
        name: 'Home',
        component: Home,
      },
      {
        
        path: '/about',
        name: 'About',
        component: () => import('../views/About.vue'),
      },
    ];
    
    const router = createRouter({
        
      history: createWebHistory(process.env.BASE_URL),
      routes,
    });
    
    export default router;

App.vue

<template>
      <div id="nav">
        
        <router-link to="/">Home</router-link>
        |
        <router-link to="/about">About</router-link>
      </div>
      <router-view/>
    </template>
    
    <script>
    
    export default {
    };
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 20]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 21]

##### 5.13.2、懒加载 #####

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 22]  
直接加载会打成一个chunk，懒加载打成多个chunk

##### 5.13.3、自定义router-link #####

vue3取消了router-link的tag标签

replace
    <router-link to="/about" tag="span" event="dblclick">About Us</router-link>
    with
    <router-link to="/about" custom v-slot="{ navigate }">
      <span @click="navigate" @keypress.enter="navigate" role="link">About Us</span>
    </router-link>

##### 5.13.4、 r o u t e r . g o ( ) 与 router.go()与 router.go()与router.back() #####

**go(-1): 原页面表单中的内容会丢失**

*  this.$router.go(-1)：后退+刷新
 *  this.$router.go(0)：刷新
 *  this.$router.go(1) ：前进

**back(): 原页表表单中的内容会保留**

*  this.$router.back():后退
 *  this.$router.back(0) 刷新
 *  this.$router.back(1)：前进

##### 5.13.5、$router的使用 #####

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 23]

##### 5.13.6、命名视图 #####

视图未命名

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 24]  
视图命名

<template>
      <div id="nav">
        <router-link to="/">Home</router-link>
        |
        <router-link to="/about">About</router-link>
        |
        <router-link to="/about1" custom v-slot="{navigate}">
          <button @click="navigate">About1</button>
        </router-link>
        |
        <button @click="about2">About2</button>
      </div>
      <router-view/>
      <router-view name="About1" />
      <router-view name="About2" />
    </template>
    
    <script>
    
    export default {
      methods: {
        about2() {
          this.$router.push('/about2');
        },
      },
    };
    1234567891011121314151617181920212223242526
    import { createRouter, createWebHistory } from 'vue-router';
    import Home from '../views/Home.vue';
    // eslint-disable-next-line import/extensions
    import About1 from '@/views/About1';
    // eslint-disable-next-line import/extensions
    import About2 from '@/views/About2';
    
    const routes = [
      {
        path: '/',
        name: 'Home',
        components: {
          default: Home,
          About1,
          About2,
        },
      },
      {
        path: '/about',
        name: 'About',
        component: () => import('../views/About.vue'),
      },
      {
        path: '/about1',
        name: 'About1',
        component: () => import('../views/About1.vue'),
      },
      {
        path: '/about2',
        name: 'About2',
        component: () => import('../views/About2.vue'),
      },
    ];
    
    const router = createRouter({
      history: createWebHistory(process.env.BASE_URL),
      routes,
    });
    
    export default router;

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 25]

##### 5.13.7、路由嵌套 #####

<template>
      <div id="nav">
        <router-link to="/">Home</router-link>
        |
        <router-link to="/about">About</router-link>
        |
        <router-link to="/about/a1" custom v-slot="{navigate}">
          <button @click="navigate">About1</button>
        </router-link>
        |
        <button @click="about2">About2</button>
      </div>
      <router-view/>
    </template>
    
    <script>
    
    export default {
      name: 'App',
      methods: {
        about2() {
          this.$router.push('/about/a2');
        },
      },
    };
    </script>

<template>
      <div class="about">
        <router-link to="/about/a1" custom v-slot="{navigate}">
          <button @click="navigate">About1</button>
        </router-link>
        |
        <button @click="about2">About2</button>
        <h1>This is an about page</h1>
        <router-view/>
      </div>
    </template>
    
    <script>
    
    export default {
        
      name: 'About',
      data() {
        
        return {
        };
      },
      methods: {
        
        about2() {
        
          this.$router.push('/about/a2');
        },
      },
    };
    </script>

import {
         createRouter, createWebHistory } from 'vue-router';
    import Home from '../views/Home.vue';
    // eslint-disable-next-line import/extensions
    import About1 from '@/views/About1';
    // eslint-disable-next-line import/extensions
    import About2 from '@/views/About2';
    // eslint-disable-next-line import/extensions
    import About from '@/views/About';
    
    const routes = [
      {
        
        path: '/',
        name: 'Home',
        component: Home,
      },
      {
        
        path: '/about',
        // name: 'About',
        component: About,
        children: [
          {
        
            path: 'a1',
            component: About1,
          },
          {
        
            path: 'a2',
            component: About2,
          },
        ],
      },
    ];
    
    const router = createRouter({
        
      history: createWebHistory(process.env.BASE_URL),
      routes,
    });
    
    export default router;

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 26]

##### 5.13.8、动态路由 #####

**params参数传递**

<template>
      <div id="nav">
        <router-link to="/">Home</router-link>
        |
        <router-link to="/about/2">About</router-link>
        |
        <button @click="click">About</button>
      </div>
      <router-view/>
    </template>
    
    <script>
    
    export default {
      name: 'App',
      methods: {
        click() {
          this.$router.push('/about/3');
        },
      },
    };
    </script>

<template>
      <div class="about">
        <h1>This is an about page</h1>
        <p>{
        {
        $route.path}}</p>
        <p>{
        {
        $route.params.id}}</p>
      </div>
    </template>
    
    <script>
    
    export default {
        
      name: 'About',
      data() {
        
        return {
        };
      },
    };
    </script>

// eslint-disable-next-line import/extensions
    import About from '@/views/About';
    
    const routes = [
      {
        
        path: '/',
        name: 'Home',
        component: Home,
      },
      {
        
        path: '/about/:id',
        name: 'About',
        component: About,
      },
    ];
    
    const router = createRouter({
        
      history: createWebHistory(process.env.BASE_URL),
      routes,
    });
    
    export default router;

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 27]  
**query参数传递**

<template>
      <div id="nav">
        <router-link to="/">Home</router-link>
        |
        <router-link to="/about?name=wenley&age=1">About</router-link>
        |
        <button @click="click">About</button>
      </div>
      <router-view/>
    </template>
    
    <script>
    
    export default {
      name: 'App',
      methods: {
        click() {
          this.$router.push({
            path: '/about',
            query: {
              name: 'wenley',
              age: 2,
            },
          });
        },
      },
    };
    </script>

<template>
      <div class="about">
        <h1>This is an about page</h1>
        <p>{
        {
        $route.path}}</p>
        <p>{
        {
        $route.query.name}}</p>
        <p>{
        {
        $route.query.age}}</p>
      </div>
    </template>
    
    <script>
    
    export default {
        
      name: 'About',
      data() {
        
        return {
        };
      },
    };
    </script>

import {
         createRouter, createWebHistory } from 'vue-router';
    import Home from '../views/Home.vue';
    // eslint-disable-next-line import/extensions
    import About1 from '@/views/About1';
    // eslint-disable-next-line import/extensions
    import About2 from '@/views/About2';
    // eslint-disable-next-line import/extensions
    import About from '@/views/About';
    
    const routes = [
      {
        
        path: '/',
        name: 'Home',
        component: Home,
      },
      {
        
        path: '/about',
        name: 'About',
        component: About,
      },
    ];
    
    const router = createRouter({
        
      history: createWebHistory(process.env.BASE_URL),
      routes,
    });
    
    export default router;

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 28]

##### 5.13.9、重定向 #####

import {
         createRouter, createWebHistory } from 'vue-router';
    import Home from '../views/Home.vue';
    // eslint-disable-next-line import/extensions
    import About from '@/views/About';
    // eslint-disable-next-line import/extensions
    import About1 from '@/views/About1';
    
    const routes = [
      {
        
        path: '/',
        name: 'Home',
        component: Home,
        // redirect: '/about1',
        // redirect: { name: 'About1' },
        redirect: {
        
          path: '/about',
          query: {
        
            name: 'wenley',
            age: 4,
          },
        },
      },
      {
        
        path: '/about',
        name: 'About',
        component: About,
      },
      {
        
        path: '/about1',
        name: 'About1',
        component: About1,
      },
    ];
    
    const router = createRouter({
        
      history: createWebHistory(process.env.BASE_URL),
      routes,
    });
    
    export default router;

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 29]

##### 5.13.10、别名 #####

import {
         createRouter, createWebHistory } from 'vue-router';
    import Home from '../views/Home.vue';
    // eslint-disable-next-line import/extensions
    import About from '@/views/About';
    // eslint-disable-next-line import/extensions
    import About1 from '@/views/About1';
    
    const routes = [
      {
        
        path: '/',
        name: 'Home',
        component: Home,
        // alias: '/home',
        alias: ['/home', '/h'],
      },
      {
        
        path: '/about',
        name: 'About',
        component: About,
      },
      {
        
        path: '/about1',
        name: 'About1',
        component: About1,
      },
    ];
    
    const router = createRouter({
        
      history: createWebHistory(process.env.BASE_URL),
      routes,
    });
    
    export default router;

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 30]

##### 5.13.11、导航守卫 #####

待补

#### 5.14、Vuex ####

Vuex 是一个专为 Vue.js 应用程序开发的**状态管理模式**。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

##### 5.14.1、快速入门 #####

import {
         createStore } from 'vuex';
    
    export default createStore({
        
      state: {
        
        num: 0,
      },
      mutations: {
        
      },
      actions: {
        
      },
      modules: {
        
      },
    });

<template>
      <div class="about">
        <h1>This is an about page</h1>
        <div @click="()=>this.$store.state.num++">
          {
        {
         $store.state.num }}
        </div>
      </div>
    </template>
    
    <script>
    
    export default {
        
      name: 'About',
      data() {
        
        return {
        };
      },
      methods: {
        },
    };
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 31]

##### 5.14.2、mutations的使用 #####

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 32]  
**mutations基本使用**

import {
         createStore } from 'vuex';
    
    export default createStore({
        
      state: {
        
        num: 0,
        num1: 0,
      },
      mutations: {
        
        add(state) {
        
          // eslint-disable-next-line no-plusplus
          state.num1 += 2;
        },
      },
      actions: {
        },
      modules: {
        },
    });
    12345678910111213141516
    <template>
      <div class="about">
        <h1>This is an about page</h1>
        <div @click="()=>this.$store.state.num++">
          {
        {
         $store.state.num }}
        </div>
        <div @click="()=>this.$store.commit('add')">
          {
        {
         $store.state.num1 }}
        </div>
      </div>
    </template>
    
    <script>
    
    export default {
        
      name: 'About',
      data() {
        
        return {
        };
      },
      methods: {
        },
    };
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 33]  
**mutations传参（单参数）**

import {
         createStore } from 'vuex';
    
    export default createStore({
        
      state: {
        
        num: 0,
        num1: 0,
        num2: 0,
      },
      mutations: {
        
        add(state) {
        
          // eslint-disable-next-line no-plusplus
          state.num1 += 2;
        },
        add1(state, count) {
        
          // eslint-disable-next-line no-plusplus
          state.num2 += count;
        },
      },
      actions: {
        },
      modules: {
        },
    });

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 34]  
**mutations传参（多参数）**

import {
         createStore } from 'vuex';
    
    export default createStore({
        
      state: {
        
        num: 0,
        num1: 0,
        num2: 0,
        num3: 0,
      },
      mutations: {
        
        add(state) {
        
          // eslint-disable-next-line no-plusplus
          state.num1 += 2;
        },
        add1(state, step) {
        
          // eslint-disable-next-line no-plusplus
          state.num2 += step;
        },
        // add2(state, step, count) {
        
        //   // eslint-disable-next-line no-plusplus
        //   state.num3 += step * count;
        // },
        add2(state, object) {
        
          // eslint-disable-next-line no-plusplus
          state.num3 += object.step * object.count;
        },
      },
      actions: {
        },
      modules: {
        },
    });

<template>
      <div class="about">
        <h1>This is an about page</h1>
        <div @click="()=>this.$store.state.num++">
          {
        {
         $store.state.num }}
        </div>
        <div @click="()=>this.$store.commit('add')">
          {
        {
         $store.state.num1 }}
        </div>
        
        <div @click="()=>this.$store.commit('add1',Math.random())">
          {
        {
         $store.state.num2 }}
        </div>
        
        
        
        
        <div @click="()=>this.$store.commit('add2',{step: 2,count: 2})">
          {
        {
         $store.state.num3 }}
        </div>
      </div>
    </template>
    
    <script>
    
    export default {
        
      name: 'About',
      data() {
        
        return {
        };
      },
      methods: {
        },
    };
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 35]

##### 5.14.3、devTools #####

[devTools][]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 36]

##### 5.14.4、getters #####

<template>
      <div class="about">
        <h1>This is an about page</h1>
        <div @click="()=>this.$store.commit('add',2)">
          {
        {
         $store.state.num }}
        </div>
        <div>
          {
        {
         $store.getters.num2 }}
        </div>
      </div>
    </template>
    
    <script>
    
    export default {
        
      name: 'About',
      data() {
        
        return {
        };
      },
      methods: {
        },
    };
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 37]

##### 5.14.5、actions #####

import {
         createStore } from 'vuex';
    
    export default createStore({
        
      state: {
        
        num: 0,
      },
      mutations: {
        
        add(state, step) {
        
          state.num += step;
        },
      },
      getters: {
        
        num2(state) {
        
          return state.num * state.num;
        },
      },
      actions: {
        
        api(content) {
        
          setTimeout(() => {
        
            // eslint-disable-next-line no-param-reassign
            // content.state.num += 5;
            content.commit('add', 5);
          }, 5000);
        },
      },
      modules: {
        },
    });

<template>
      <div class="about">
        <h1>This is an about page</h1>
        <div @click="()=>this.$store.commit('add',2)">
          {
        {
         $store.state.num }}
        </div>
        <div>
          {
        {
         $store.getters.num2 }}
        </div>
        <div @click="()=>this.$store.dispatch('api')">
          点击请求API
        </div>
      </div>
    </template>
    
    <script>
    
    export default {
        
      name: 'About',
      data() {
        
        return {
        };
      },
      methods: {
        },
    };
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 38]

##### 5.14.6、modules #####

import {
         createStore } from 'vuex';
    
    const moduleA = {
        
      state: () => ({
         num: 1 }),
      mutations: {
        },
      actions: {
        },
      getters: {
        },
    };
    
    const moduleB = {
        
      state: () => ({
         num: 2 }),
      mutations: {
        },
      actions: {
        },
      getters: {
        },
    };
    
    export default createStore({
        
      modules: {
        
        a: moduleA,
        b: moduleB,
      },
    });

<template>
      <div class="about">
        <h1>This is an about page</h1>
        <div @click="()=>this.$store.commit('add',2)">
          {
        {
         $store.state.a.num }}
        </div>
        <div>
          {
        {
         $store.state.b.num }}
        </div>
      </div>
    </template>
    
    <script>
    
    export default {
        
      name: 'About',
      data() {
        
        return {
        };
      },
      methods: {
        },
    };
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 39]

[node.js]: http://nodejs.cn/
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/0af49f0016764000979342203b66c4d2.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/92dd00dffa7f41c7a97ac6c7d9f2e024.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/3c8901098db0464d8e2cdf180b19cb9b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[Link 1]: https://cli.vuejs.org/zh/config/
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/d2c70830224e49eb92fb78aeb7ec4f02.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/b5945282963246448e4f044d04f47246.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/7d1cdafaec3344b9bd0482966969d58f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/a0551d972687468b926ca33c3c0d5479.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/41bcb182ee934b05bc5f6e2817566f61.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/37bc6eb0f6e247dda23c89b194f7b893.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/bf6bd054b33e4098b5b08e4b41430d03.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 8]: https://img-blog.csdnimg.cn/2eb26b35e8934ffaa5b8a0eee3b4df8a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 9]: https://img-blog.csdnimg.cn/da2e97d59195466da573757719aec2c0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 10]: https://img-blog.csdnimg.cn/c634b04ce3c54c2fb1f6579c04707331.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 11]: https://img-blog.csdnimg.cn/5fa542cfa85442efbd6e1c15b56b7901.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 12]: https://img-blog.csdnimg.cn/e61b8b7370564e429f21ca30f82219ac.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 13]: https://img-blog.csdnimg.cn/67f091cae53f4869a8765299b5229f99.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 14]: https://img-blog.csdnimg.cn/b76117a149054a62bc1f40246a3c6059.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 15]: https://img-blog.csdnimg.cn/7263407524654cc8934356d87bd001e5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 16]: https://img-blog.csdnimg.cn/8b1b477b23924a06bd89e78f0453681e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[https_v3.cn.vuejs.org_api_options-lifecycle-hooks.html_beforecreate]: https://v3.cn.vuejs.org/api/options-lifecycle-hooks.html#beforecreate
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 17]: https://img-blog.csdnimg.cn/305ce66aaa834e689ee7e720a10d0d78.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 18]: https://img-blog.csdnimg.cn/df9f4b4a9d754bd7b5b2e5b6a6bda183.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 19]: https://img-blog.csdnimg.cn/3a2ce623d0db4f01a17d78a18f74d2bc.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 20]: https://img-blog.csdnimg.cn/c059989d33114d2788ad0c5a6bb7a1c6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 21]: https://img-blog.csdnimg.cn/46f84665827349cdb78eb8b8d7766639.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 22]: https://img-blog.csdnimg.cn/2d8b939726c6489d86492cd5fb6b5dcd.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 23]: https://img-blog.csdnimg.cn/4345a433e4e0495e94a11dd61f698383.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 24]: https://img-blog.csdnimg.cn/0244b18b5da64de583e507522e9b0ddf.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 25]: https://img-blog.csdnimg.cn/0f05b97a5e5243aab5fe600f01d086f7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 26]: https://img-blog.csdnimg.cn/243cf7c0668b45bb8d0a6381d90edc26.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 27]: https://img-blog.csdnimg.cn/927537d6d177415094aba25f01bd8607.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 28]: https://img-blog.csdnimg.cn/9f6df1d1c37b46b89cc28c800ad1fb24.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 29]: https://img-blog.csdnimg.cn/3d3459bb045d49f98f60b255b7e67603.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 30]: https://img-blog.csdnimg.cn/277f3b6bb1aa465ba0979246ce2ec02f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 31]: https://img-blog.csdnimg.cn/90916a70c40e4250a89c543bde705a4f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 32]: https://img-blog.csdnimg.cn/ce4ed20733a84a588cf49b80719259fe.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 33]: https://img-blog.csdnimg.cn/cef31d62df8940048fec4774474879fe.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 34]: https://img-blog.csdnimg.cn/67d0e5f58ccf4df084b2d1d043a41ee7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 35]: https://img-blog.csdnimg.cn/d413fc43937141aba8498db4c86e2848.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[devTools]: https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg/related?hl=zh
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 36]: https://img-blog.csdnimg.cn/40276a2730d14c48a585d000e046d5fc.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 37]: https://img-blog.csdnimg.cn/c3abc1685fb945949ef59b103d4b1dcf.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 38]: https://img-blog.csdnimg.cn/e87cabcbbfa5443793d5e8fb9d01379c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55y855y45rWB6L2s_size_20_color_FFFFFF_t_70_g_se_x_16 39]: https://img-blog.csdnimg.cn/83d0057593624f0e82389b94ab2b0639.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55y855y45rWB6L2s,size_20,color_FFFFFF,t_70,g_se,x_16