526互联

第三阶段前端随手笔记

发布时间 2023-12-05 20:07:20作者: jajajajava萌新

1.let细节 注意

直接输出x,会报错！

image-20230819192451389

image-20230819192500011

在输出语句后面使用var定义变量x，会变量提升，输出undefined

image-20230819192721942

image-20230819192822282

 

image-20230819193152185

image-20230819193208755

 

image-20230819193451906

image-20230819193349938

 

 

 

 

2 Vue 笔记

1 控制台直接使用vm对象

image-20230825204602162

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue快速入门</title>
</head>
<body>
<!--老师解读
1. div元素不是必须的，也可以是其它元素，比如span,但是约定都是将vue实例挂载到div
2. 因为div更加适合做布局
3. id 不是必须为app , 是程序员指定,一般我们就使用app
-->
<div id="app">
    <!--老师解读
    1. {{message}} : 插值表达式
    2. message 就是从model的data数据池来设置
    3. 当我们的代码执行时，会到data{} 数据池中去匹配数据, 如果匹配上, 就进行替换
       , 如果没有匹配上, 就是输出空
    -->
    <h1>欢迎你{{message}}-{{name}}</h1>
</div>
<!--引入vue.js-->
<script src="vue.js"></script>
<script>
    //创建Vue对象
    /**
     * 老韩解读
     * 1. 创建Vue对象实例
     * 2. 我们在控制台输出vm对象，看看该对象的结构！(data/listeners)
     *
     */
    let vm = new Vue({
        el: "#app", //创建的vue实例挂载到 id=app的div
        data: { //data{} 表示数据池(model的有了数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)
            message: "Hello-Vue!",
            name: "韩顺平教育"
        }
    })
    console.log("vm=>", vm);
    console.log(vm._data.message);
    console.log(vm._data.name);
    console.log(vm.name);
    console.log(vm.message);
</script>
​
</body>
</html>

 

2 idea 中 v-bind 爆红问题

image-20230825214927058

 

alt + enter 引入一下即可 引入xml的命名空间

image-20230825215014325

 

 

image-20230825214805598

 

3 url书写格式注意

https://www.baidu.com/ 冒号写在http后面再后面是//

image-20230826170027286

 

4 v-if v-on: 后面可以直接写一个条件表达式

​
<h1>欢迎你{{message}}-{{name}}</h1>
​
单向数据渲染
<img v-bind:src="img_src" v-bind:width="img_width">
<img :src="img_src" :width="img_width">
​
双向数据渲染
<input type="text" v-model="hobby.val"><br/><br/>
​
Vue修饰符使用
<form action="http://www.baidu.com" v-on:submit.prevent="onMySubmit">
        妖怪名: <input type="text" v-model="monster.name"><br/><br/>  
<button v-on:click.once="onMySubmit">点击一次</button><br/>
<input type="text" v-on:keyup.enter="onMySubmit">
<input type="text" v-on:keyup.down="onMySubmit">
<input type="text" v-model.trim="count">
​
事件处理
<button v-on:click="sayHi()">点击输出</button>
<button v-on:click="count += 2">点击增加+2</button>
<button @click="sayHi()">点击输出</button>
​
​
<button v-on:click="count += 2">点击增加+2</button>
​
条件渲染 v-if
<div v-if="score >= 90">你的成绩优秀</div>
<div v-else-if="score >= 70">你的成绩良好</div>
<div v-else-if="score >= 60">你的成绩及格</div>
<div v-else="score < 60">你的成绩不及格</div>
v-for 列表渲染
<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>事件处理-作业1</title>
</head>
<body>
<div id="app">
    <h1>{{message}}</h1>
    <button v-on:click="add">点击增加+1</button>
    <!--老师解读
    1. 这里count += 2 的count数据是data数据池的count
    2. 案例不难，重点是掌握和理解机制
    -->
​
​
    <button v-on:click="add2">点击增加+2</button>
    <!--add2()函数只有一句话 this.count += 2;
    Vue 支持直接写在 v-on:click="" 里 因为在这写 脱离了下面的vm Vue对象实例 所以 把this拿掉
    this 只可以在对象里面使用；问题是在这里写count += 2 它能不能找到数据池里的 count
    可以 因为上来就把vm Vue对象挂载到了 id="app"的div 所以在此处去找count时 它发现count并不是一个方法
    它就会自动的去数据池里面找，找到count ,因此 这里的count 还是数据池里的数据count
    -->
    <button v-on:click="this.count += 2">点击增加+2</button>
    <button v-on:click="count += 2">点击增加+2</button>
​
    <p>你的按钮被点击了{{count}}次</p>
</div>
<script src="vue.js"></script>
<!--创建一个vue实例,并挂载到id=app的div-->
<script>
    let vm = new Vue({
        el: "#app", //创建的vue实例挂载到 id=app的div, el 就是element的简写
        data: { //data{} 表示数据池(model中的数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)
            message: "Vue事件处理的作业",
            count: 0//点击的次数
        },
        methods: {
            add() {
                //修改data数据池的count
                //因为data和methods在同一个vue实例中,因此可以通过this.数据方式访问
                this.count += 1;
            },
            add2() {
                //修改data数据池的count
                //因为data和methods在同一个vue实例中,因此可以通过this.数据方式访问
                this.count += 2;
            }
        }
    })
</script>
</body>
</html>

 

5 如何查看是否安装了node.js

cmd控制台 输入 node -v 回车

安装过会显示版本号：

image-20230828110254161

没安装过 ：

image-20230828110231859

 

6 安装node时出现错误

C:\WINDOWS\system32>cnpm install -g @vue/cli@4.0.3
internal/modules/cjs/loader.js:638
    throw err;
    ^
​
Error: Cannot find module 'node:util'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (C:\Users\yangd\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm:3:15)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)

 

image-20230828143733432

解决方法：

https://blog.csdn.net/qq_41619841/article/details/129869658

 

npm和cnpm的版本不匹配，需要匹配版本(记得先删除之前的)：

npm uninstall cnpm

 

当前npm版本：在命令行输入指令时记得输入的是# 后面的npm -v

C:\WINDOWS\system32>node -v
v10.16.3
​
C:\WINDOWS\system32>npm -v
6.9.0
​

全局安装cnpm指定版本：这里这句话解决了问题!!!

npm install -g cnpm@6.0.0 --registry=https://registry.npm.taobao.org
C:\WINDOWS\system32>npm install -g cnpm@6.0.0 --registry=https://registry.npm.taobao.org
​
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
C:\Users\yangd\AppData\Roaming\npm\cnpm -> C:\Users\yangd\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm
npm WARN urllib@2.41.0 requires a peer of proxy-agent@^5.0.0 but none is installed. You must install peer dependencies yourself.
​
+ cnpm@6.0.0
added 388 packages from 138 contributors, removed 401 packages and updated 188 packages in 59.646s

image-20230828145234665

查看cnpm的版本:

 cnpm -v

如下即为成功:

C:\WINDOWS\system32>cnpm -v cnpm@6.0.0 (C:\Users\yangd\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js) npm@6.14.18 (C:\Users\yangd\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js) node@10.16.3 (D:\Java_developer_tools\program\nodejs10.16\node.exe) npminstall@3.28.1 (C:\Users\yangd\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js) prefix=C:\Users\yangd\AppData\Roaming\npm win32 x64 10.0.19045 registry=https://registry.npm.taobao.org

 

安装vue cli 脚手架时 命令行具体执行代码如下：

Microsoft Windows [版本 10.0.19045.3324]
(c) Microsoft Corporation。保留所有权利。
​
C:\WINDOWS\system32>node -v
v10.16.3
​
C:\WINDOWS\system32>npm uninstall vue-cli -g
up to date in 0.029s
​
C:\WINDOWS\system32>npm install -g cnpm --registry=https://registry.npm.taobao.org
C:\Users\yangd\AppData\Roaming\npm\cnpm -> C:\Users\yangd\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm
npm WARN urllib@2.41.0 requires a peer of proxy-agent@^5.0.0 but none is installed. You must install peer dependencies yourself.
​
+ cnpm@9.2.0
updated 249 packages in 39.775s
​
C:\WINDOWS\system32>npm install webpack@4.41.2 webpack-cli -D
npm WARN saveError ENOENT: no such file or directory, open 'C:\WINDOWS\system32\package.json'
npm WARN enoent ENOENT: no such file or directory, open 'C:\WINDOWS\system32\package.json'
npm WARN @webpack-cli/configtest@2.1.1 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN @webpack-cli/info@2.0.2 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN @webpack-cli/serve@2.0.5 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN webpack-cli@5.1.4 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN system32 No description
npm WARN system32 No repository field.
npm WARN system32 No README data
npm WARN system32 No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
​
+ webpack-cli@5.1.4
+ webpack@4.41.2
updated 2 packages and audited 600 packages in 7.088s
found 3 high severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
​
C:\WINDOWS\system32>cnpm install -g @vue/cli@4.0.3
internal/modules/cjs/loader.js:638
    throw err;
    ^
​
Error: Cannot find module 'node:util'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (C:\Users\yangd\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm:3:15)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
​
C:\WINDOWS\system32>cnpm install webpack@4.41.2 webpack-cli -D
internal/modules/cjs/loader.js:638
    throw err;
    ^
​
Error: Cannot find module 'node:util'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (C:\Users\yangd\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm:3:15)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
​
C:\WINDOWS\system32>npm audit fix
npm ERR! code EAUDITNOPJSON
npm ERR! audit No package.json found: Cannot audit a project without a package.json
​
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\yangd\AppData\Roaming\npm-cache\_logs\2023-08-28T06_20_26_816Z-debug.log
​
C:\WINDOWS\system32>npm init --yes
Wrote to C:\WINDOWS\system32\package.json:
​
{
  "name": "system32",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "webpack-cli": "^5.1.4",
    "webpack": "^4.41.2"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
​
​
​
C:\WINDOWS\system32>npm audit fix
npm WARN @webpack-cli/configtest@2.1.1 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN @webpack-cli/info@2.0.2 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN @webpack-cli/serve@2.0.5 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN webpack-cli@5.1.4 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN system32@1.0.0 No description
npm WARN system32@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
​
up to date in 1.447s
fixed 0 of 1 vulnerability in 387 scanned packages
  1 package update for 1 vuln involved breaking changes
  (use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)
​
C:\WINDOWS\system32>npm install webpack@^4.41.2 --save-dev
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated fsevents@1.2.13: The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2
npm notice save webpack is being moved from dependencies to devDependencies
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\watchpack-chokidar2\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN @webpack-cli/configtest@2.1.1 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN @webpack-cli/info@2.0.2 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN @webpack-cli/serve@2.0.5 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN webpack-cli@5.1.4 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN system32@1.0.0 No description
npm WARN system32@1.0.0 No repository field.
​
+ webpack@4.41.2
updated 1 package and audited 387 packages in 35.631s
found 1 high severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details
​
C:\WINDOWS\system32>
C:\WINDOWS\system32>npm audit fix
npm WARN @webpack-cli/configtest@2.1.1 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN @webpack-cli/info@2.0.2 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN @webpack-cli/serve@2.0.5 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN webpack-cli@5.1.4 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN system32@1.0.0 No description
npm WARN system32@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
​
up to date in 1.455s
fixed 0 of 1 vulnerability in 387 scanned packages
  1 package update for 1 vuln involved breaking changes
  (use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)
​
C:\WINDOWS\system32>cnpm install -g @vue/cli@4.0.3
internal/modules/cjs/loader.js:638
    throw err;
    ^
​
Error: Cannot find module 'node:util'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (C:\Users\yangd\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm:3:15)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
​
C:\WINDOWS\system32>npm uninstall cnpm
npm WARN @webpack-cli/configtest@2.1.1 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN @webpack-cli/info@2.0.2 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN @webpack-cli/serve@2.0.5 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN webpack-cli@5.1.4 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN system32@1.0.0 No description
npm WARN system32@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
​
audited 387 packages in 3.01s
found 1 high severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details
​
C:\WINDOWS\system32>[root@localhost ~]# npm install -g cnpm@6.0.0 --registry=https://registry.npm.taobao.org
'[root@localhost' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
​
C:\WINDOWS\system32>npm install -g cnpm@6.0.0 --registry=https://registry.npm.taobao.org
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
C:\Users\yangd\AppData\Roaming\npm\cnpm -> C:\Users\yangd\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm
npm WARN urllib@2.41.0 requires a peer of proxy-agent@^5.0.0 but none is installed. You must install peer dependencies yourself.
​
+ cnpm@6.0.0
added 388 packages from 138 contributors, removed 401 packages and updated 188 packages in 59.646s
​
C:\WINDOWS\system32>cnpm install -g @vue/cli@4.0.3
Downloading @vue/cli to C:\Users\yangd\AppData\Roaming\npm\node_modules\@vue\cli_tmp
Copying C:\Users\yangd\AppData\Roaming\npm\node_modules\@vue\cli_tmp\_@vue_cli@4.0.3@@vue\cli to C:\Users\yangd\AppData\Roaming\npm\node_modules\@vue\cli
Installing @vue/cli's dependencies to C:\Users\yangd\AppData\Roaming\npm\node_modules\@vue\cli/node_modules
[1/36] deepmerge@^3.2.0 installed at node_modules\_deepmerge@3.3.0@deepmerge
[2/36] commander@^2.20.0 installed at node_modules\_commander@2.20.3@commander
[3/36] @vue/cli-ui-addon-widgets@^4.0.3 installed at node_modules\_@vue_cli-ui-addon-widgets@4.5.19@@vue\cli-ui-addon-widgets
[4/36] @vue/cli-ui-addon-webpack@^4.0.3 installed at node_modules\_@vue_cli-ui-addon-webpack@4.5.19@@vue\cli-ui-addon-webpack
[5/36] debug@^4.1.0 installed at node_modules\_debug@4.3.4@debug
[6/36] execa@^1.0.0 existed at node_modules\_execa@1.0.0@execa
[7/36] didyoumean@^1.2.1 installed at node_modules\_didyoumean@1.2.2@didyoumean
[8/36] ejs@^2.6.1 installed at node_modules\_ejs@2.7.4@ejs
[9/36] envinfo@^7.2.0 installed at node_modules\_envinfo@7.10.0@envinfo
[10/36] chalk@^2.4.1 installed at node_modules\_chalk@2.4.2@chalk
[11/36] boxen@^4.1.0 installed at node_modules\_boxen@4.2.0@boxen
[12/36] javascript-stringify@^1.6.0 installed at node_modules\_javascript-stringify@1.6.0@javascript-stringify
[13/36] cmd-shim@^2.0.2 installed at node_modules\_cmd-shim@2.1.0@cmd-shim
[14/36] isbinaryfile@^4.0.0 installed at node_modules\_isbinaryfile@4.0.10@isbinaryfile
[15/36] import-global@^0.1.0 installed at node_modules\_import-global@0.1.0@import-global
[16/36] lru-cache@^5.1.1 existed at node_modules\_lru-cache@5.1.1@lru-cache
[17/36] minimist@^1.2.0 existed at node_modules\_minimist@1.2.8@minimist
[18/36] lodash.clonedeep@^4.5.0 installed at node_modules\_lodash.clonedeep@4.5.0@lodash.clonedeep
[19/36] request@^2.87.0 existed at node_modules\_request@2.88.2@request
[20/36] fs-extra@^7.0.1 installed at node_modules\_fs-extra@7.0.1@fs-extra
[21/36] resolve@^1.10.1 existed at node_modules\_resolve@1.22.4@resolve
[22/36] semver@^6.1.0 existed at node_modules\_semver@6.3.1@semver
[23/36] js-yaml@^3.13.1 installed at node_modules\_js-yaml@3.14.1@js-yaml
[24/36] slash@^3.0.0 installed at node_modules\_slash@3.0.0@slash
[25/36] @vue/cli-shared-utils@^4.0.3 installed at node_modules\_@vue_cli-shared-utils@4.5.19@@vue\cli-shared-utils
[26/36] recast@^0.18.1 installed at node_modules\_recast@0.18.10@recast
[27/36] shortid@^2.2.11 installed at node_modules\_shortid@2.2.16@shortid
[28/36] download-git-repo@^1.0.2 installed at node_modules\_download-git-repo@1.1.0@download-git-repo
[29/36] validate-npm-package-name@^3.0.0 installed at node_modules\_validate-npm-package-name@3.0.0@validate-npm-package-name
[30/36] globby@^9.2.0 installed at node_modules\_globby@9.2.0@globby
[31/36] yaml-front-matter@^3.4.1 installed at node_modules\_yaml-front-matter@3.4.1@yaml-front-matter
[32/36] vue-jscodeshift-adapter@^2.0.2 installed at node_modules\_vue-jscodeshift-adapter@2.2.0@vue-jscodeshift-adapter
[33/36] jscodeshift@^0.6.4 installed at node_modules\_jscodeshift@0.6.4@jscodeshift
[34/36] request-promise-native@^1.0.7 installed at node_modules\_request-promise-native@1.0.9@request-promise-native
[35/36] inquirer@^6.3.1 installed at node_modules\_inquirer@6.5.2@inquirer
[36/36] @vue/cli-ui@^4.0.3 installed at node_modules\_@vue_cli-ui@4.5.19@@vue\cli-ui
execute post install 3 scripts...
[1/3] scripts.postinstall ejs@^2.6.1 run "node ./postinstall.js", root: "C:\\Users\\yangd\\AppData\\Roaming\\npm\\node_modules\\@vue\\cli\\node_modules\\_ejs@2.7.4@ejs"
Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)
​
[1/3] scripts.postinstall ejs@^2.6.1 finished in 257ms
[2/3] scripts.postinstall @vue/cli-ui@4.5.19 › apollo-server-express@2.26.1 › apollo-server-types@0.10.0 › apollo-reporting-protobuf@0.8.0 › @apollo/protobufjs@1.2.2 run "node scripts/postinstall", root: "C:\\Users\\yangd\\AppData\\Roaming\\npm\\node_modules\\@vue\\cli\\node_modules\\_@apollo_protobufjs@1.2.2@@apollo\\protobufjs"
[2/3] scripts.postinstall @vue/cli-ui@4.5.19 › apollo-server-express@2.26.1 › apollo-server-types@0.10.0 › apollo-reporting-protobuf@0.8.0 › @apollo/protobufjs@1.2.2 finished in 171ms
[3/3] scripts.postinstall @vue/cli-ui@4.5.19 › apollo-server-express@2.26.1 › apollo-server-core@2.26.1 › apollo-graphql@0.9.7 › core-js-pure@^3.10.2 run "node -e \"try{require('./postinstall')}catch(e){}\"", root: "C:\\Users\\yangd\\AppData\\Roaming\\npm\\node_modules\\@vue\\cli\\node_modules\\_core-js-pure@3.32.1@core-js-pure"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
​
The project needs your help! Please consider supporting core-js:
> https://opencollective.com/core-js
> https://patreon.com/zloirock
> https://boosty.to/zloirock
> bitcoin: bc1qlea7544qtsmj2rayg0lthvza9fau63ux0fstcz
​
I highly recommend reading this: https://github.com/zloirock/core-js/blob/master/docs/2023-02-14-so-whats-next.md
​
[3/3] scripts.postinstall @vue/cli-ui@4.5.19 › apollo-server-express@2.26.1 › apollo-server-core@2.26.1 › apollo-graphql@0.9.7 › core-js-pure@^3.10.2 finished in 115ms
peerDependencies WARNING @vue/cli-ui@4.5.19 › apollo-server-express@2.26.1 › apollo-server-types@0.10.0 › apollo-server-env@3.2.0 › node-fetch@^2.6.1 requires a peer of encoding@^0.1.0 but none was installed
peerDependencies WARNING @vue/cli-ui@4.5.19 › apollo-server-express@2.26.1 › subscriptions-transport-ws@0.9.19 › ws@^5.2.0 || ^6.0.0 || ^7.0.0 requires a peer of bufferutil@^4.0.1 but none was installed
peerDependencies WARNING @vue/cli-ui@4.5.19 › apollo-server-express@2.26.1 › subscriptions-transport-ws@0.9.19 › ws@^5.2.0 || ^6.0.0 || ^7.0.0 requires a peer of utf-8-validate@^5.0.2 but none was installed
deprecate @vue/cli-shared-utils@4.5.19 › @hapi/joi@^15.0.1 Switch to 'npm install joi'
deprecate @vue/cli-shared-utils@4.5.19 › request@^2.88.2 request has been deprecated, see https://github.com/request/request/issues/3142
deprecate @vue/cli-shared-utils@4.5.19 › @hapi/joi@15.1.1 › @hapi/bourne@1.x.x This version has been deprecated and is no longer supported or maintained
deprecate @vue/cli-shared-utils@4.5.19 › request@2.88.2 › har-validator@~5.1.3 this library is no longer supported
deprecate @vue/cli-shared-utils@4.5.19 › @hapi/joi@15.1.1 › @hapi/topo@3.x.x This version has been deprecated and is no longer supported or maintained
deprecate @vue/cli-shared-utils@4.5.19 › @hapi/joi@15.1.1 › @hapi/address@2.x.x Moved to 'npm install @sideway/address'
deprecate @vue/cli-shared-utils@4.5.19 › @hapi/joi@15.1.1 › @hapi/hoek@8.x.x This version has been deprecated and is no longer supported or maintained
deprecate @vue/cli-shared-utils@4.5.19 › request@2.88.2 › uuid@^3.3.2 Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
deprecate request-promise-native@^1.0.7 request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
deprecate shortid@^2.2.11 Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
deprecate globby@9.2.0 › fast-glob@2.2.7 › micromatch@3.1.10 › snapdragon@0.8.2 › source-map-resolve@^0.5.0 See https://github.com/lydell/source-map-resolve#deprecated
deprecate globby@9.2.0 › fast-glob@2.2.7 › micromatch@3.1.10 › snapdragon@0.8.2 › source-map-resolve@0.5.3 › urix@^0.1.0 Please see https://github.com/lydell/urix#deprecated
deprecate globby@9.2.0 › fast-glob@2.2.7 › micromatch@3.1.10 › snapdragon@0.8.2 › source-map-resolve@0.5.3 › source-map-url@^0.4.0 See https://github.com/lydell/source-map-url#deprecated
deprecate globby@9.2.0 › fast-glob@2.2.7 › micromatch@3.1.10 › snapdragon@0.8.2 › source-map-resolve@0.5.3 › resolve-url@^0.2.1 https://github.com/lydell/resolve-url#deprecated
deprecate @vue/cli-ui@4.5.19 › apollo-server-express@^2.13.1 The `apollo-server-express` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
anti semver @vue/cli-ui@4.5.19 › apollo-server-express@2.26.1 › @types/express@4.17.17 › @types/body-parser@* delcares @types/body-parser@*(resolved as 1.19.2) but using ancestor(apollo-server-express)'s dependency @types/body-parser@1.19.0(resolved as 1.19.0)
deprecate @vue/cli-ui@4.5.19 › apollo-server-express@2.26.1 › apollo-server-types@^0.10.0 The `apollo-server-types` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
deprecate @vue/cli-ui@4.5.19 › apollo-server-express@2.26.1 › apollo-server-types@0.10.0 › apollo-reporting-protobuf@^0.8.0 The `apollo-reporting-protobuf` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This package's functionality is now found in the `@apollo/usage-reporting-protobuf` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
deprecate @vue/cli-ui@4.5.19 › apollo-server-express@2.26.1 › apollo-server-types@0.10.0 › apollo-server-caching@^0.7.0 This package is part of the legacy caching implementation used by Apollo Server v2 and v3, and is no longer maintained. We recommend you switch to the newer Keyv-based implementation (which is compatible with all versions of Apollo Server). See https://www.apollographql.com/docs/apollo-server/v3/performance/cache-backends#legacy-caching-implementation for more details.
deprecate @vue/cli-ui@4.5.19 › apollo-server-express@2.26.1 › apollo-server-types@0.10.0 › apollo-server-env@^3.2.0 The `apollo-server-env` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This package's functionality is now found in the `@apollo/utils.fetcher` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
deprecate @vue/cli-ui@4.5.19 › apollo-server-express@2.26.1 › subscriptions-transport-ws@^0.9.19 The `subscriptions-transport-ws` package is no longer maintained. We recommend you use `graphql-ws` instead. For help migrating Apollo software to `graphql-ws`, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws    For general help using `graphql-ws`, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md
deprecate @vue/cli-ui@4.5.19 › apollo-server-express@2.26.1 › apollo-server-core@^2.26.1 The `apollo-server-core` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
deprecate @vue/cli-ui@4.5.19 › apollo-server-express@2.26.1 › apollo-server-core@2.26.1 › apollo-datasource@^0.10.0 The `apollo-datasource` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
deprecate @vue/cli-ui@4.5.19 › apollo-server-express@2.26.1 › graphql-tools@^4.0.8 This package has been deprecated and now it only exports makeExecutableSchema.
And it will no longer receive updates.
We recommend you to migrate to scoped packages such as @graphql-tools/schema, @graphql-tools/utils and etc.
Check out https://www.graphql-tools.com to learn what package you should use instead
deprecate @vue/cli-ui@4.5.19 › apollo-server-express@2.26.1 › apollo-server-core@2.26.1 › apollo-server-errors@^2.5.0 The `apollo-server-errors` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
deprecate @vue/cli-ui@4.5.19 › apollo-server-express@2.26.1 › apollo-server-core@2.26.1 › apollo-server-plugin-base@^0.14.0 The `apollo-server-plugin-base` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
deprecate @vue/cli-ui@4.5.19 › apollo-server-express@2.26.1 › apollo-server-core@2.26.1 › apollo-tracing@^0.16.0 The `apollo-tracing` package is no longer part of Apollo Server 3. See https://www.apollographql.com/docs/apollo-server/migration/#tracing for details
deprecate @vue/cli-ui@4.5.19 › apollo-server-express@2.26.1 › apollo-server-core@2.26.1 › apollo-cache-control@^0.15.0 The functionality provided by the `apollo-cache-control` package is built in to `apollo-server-core` starting with Apollo Server 3. See https://www.apollographql.com/docs/apollo-server/migration/#cachecontrol for details.
deprecate @vue/cli-ui@4.5.19 › apollo-server-express@2.26.1 › apollo-server-core@2.26.1 › graphql-extensions@^0.16.0 The `graphql-extensions` API has been removed from Apollo Server 3. Use the plugin API instead: https://www.apollographql.com/docs/apollo-server/integrations/plugins/
Recently updated (since 2023-08-21): 29 packages (detail see file C:\Users\yangd\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\.recently_updates.txt)
  Today:
    → globby@9.2.0 › @types/glob@7.2.0 › @types/node@*(20.5.7) (08:33:06)
  2023-08-27
    → jscodeshift@0.6.4 › @babel/plugin-proposal-object-rest-spread@7.20.7 › @babel/helper-compilation-targets@7.22.10 › browserslist@4.21.10 › caniuse-lite@^1.0.30001517(1.0.30001524) (13:47:37)
  2023-08-26
    → jscodeshift@0.6.4 › @babel/plugin-proposal-object-rest-spread@7.20.7 › @babel/helper-compilation-targets@7.22.10 › browserslist@4.21.10 › electron-to-chromium@^1.4.477(1.4.503) (06:02:25)
  2023-08-25
    → jscodeshift@0.6.4 › @babel/preset-env@7.22.10 › @babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.22.5 › @babel/plugin-transform-optional-chaining@^7.22.5(7.22.12) (16:28:36)
  2023-08-24
    → jscodeshift@0.6.4 › @babel/preset-typescript@^7.1.0(7.22.11) (21:08:53)
    → jscodeshift@0.6.4 › @babel/preset-typescript@7.22.11 › @babel/plugin-transform-modules-commonjs@^7.22.11(7.22.11) (21:08:39)
    → jscodeshift@0.6.4 › @babel/preset-typescript@7.22.11 › @babel/plugin-transform-typescript@^7.22.11(7.22.11) (21:08:47)
    → jscodeshift@0.6.4 › @babel/parser@^7.1.6(7.22.11) (21:08:36)
    → jscodeshift@0.6.4 › @babel/plugin-proposal-class-properties@7.18.6 › @babel/helper-create-class-features-plugin@^7.18.6(7.22.11) (21:08:36)
    → jscodeshift@0.6.4 › flow-parser@0.*(0.215.1) (02:21:32)
    → jscodeshift@0.6.4 › @babel/core@^7.1.6(7.22.11) (21:08:56)
    → jscodeshift@0.6.4 › @babel/core@7.22.11 › @babel/helpers@^7.22.11(7.22.11) (21:08:52)
    → jscodeshift@0.6.4 › @babel/core@7.22.11 › @babel/traverse@^7.22.11(7.22.11) (21:08:47)
    → jscodeshift@0.6.4 › @babel/preset-env@7.22.10 › @babel/plugin-transform-class-static-block@^7.22.5(7.22.11) (21:08:47)
    → jscodeshift@0.6.4 › @babel/preset-env@7.22.10 › @babel/plugin-transform-async-generator-functions@^7.22.10(7.22.11) (21:08:36)
    → jscodeshift@0.6.4 › @babel/preset-typescript@7.22.11 › @babel/plugin-transform-modules-commonjs@7.22.11 › @babel/helper-simple-access@7.22.5 › @babel/types@^7.22.5(7.22.11) (21:08:45)
    → jscodeshift@0.6.4 › @babel/preset-env@7.22.10 › @babel/plugin-transform-dynamic-import@^7.22.5(7.22.11) (21:08:37)
    → jscodeshift@0.6.4 › @babel/preset-env@7.22.10 › @babel/plugin-transform-export-namespace-from@^7.22.5(7.22.11) (21:08:38)
    → jscodeshift@0.6.4 › @babel/preset-env@7.22.10 › @babel/plugin-transform-json-strings@^7.22.5(7.22.11) (21:08:38)
    → jscodeshift@0.6.4 › @babel/preset-env@7.22.10 › @babel/plugin-transform-logical-assignment-operators@^7.22.5(7.22.11) (21:08:38)
    → @vue/cli-ui@4.5.19 › apollo-server-express@2.26.1 › apollo-server-types@0.10.0 › apollo-server-env@3.2.0 › node-fetch@^2.6.1(2.7.0) (01:18:39)
    → jscodeshift@0.6.4 › @babel/preset-env@7.22.10 › @babel/plugin-transform-modules-systemjs@^7.22.5(7.22.11) (21:08:39)
    → jscodeshift@0.6.4 › @babel/preset-env@7.22.10 › @babel/plugin-transform-nullish-coalescing-operator@^7.22.5(7.22.11) (21:08:39)
    → jscodeshift@0.6.4 › @babel/preset-env@7.22.10 › @babel/plugin-transform-numeric-separator@^7.22.5(7.22.11) (21:08:39)
    → jscodeshift@0.6.4 › @babel/preset-env@7.22.10 › @babel/plugin-transform-object-rest-spread@^7.22.5(7.22.11) (21:08:40)
    → jscodeshift@0.6.4 › @babel/preset-env@7.22.10 › @babel/plugin-transform-optional-catch-binding@^7.22.5(7.22.11) (21:08:40)
    → jscodeshift@0.6.4 › @babel/preset-env@7.22.10 › @babel/plugin-transform-private-property-in-object@^7.22.5(7.22.11) (21:08:47)
    → jscodeshift@0.6.4 › @babel/preset-env@7.22.10 › @babel/plugin-transform-regenerator@7.22.10 › regenerator-transform@0.15.2 › @babel/runtime@^7.8.4(7.22.11) (21:08:41)
  2023-08-23
    → @vue/cli-ui@4.5.19 › apollo-server-express@2.26.1 › @types/express-serve-static-core@^4.17.21(4.17.36) (02:14:02)
All packages installed (842 packages installed from npm registry, used 1m(network 1m), speed 485.17kB/s, json 759(7.85MB), tarball 31.1MB)
[@vue/cli@4.0.3] link C:\Users\yangd\AppData\Roaming\npm\vue@ -> C:\Users\yangd\AppData\Roaming\npm\node_modules\@vue\cli\bin\vue.js
​
C:\WINDOWS\system32>node -v
v10.16.3
​
C:\WINDOWS\system32>npm -v
6.9.0
​
C:\WINDOWS\system32>cnpm -v
cnpm@6.0.0 (C:\Users\yangd\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
npm@6.14.18 (C:\Users\yangd\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@10.16.3 (D:\Java_developer_tools\program\nodejs10.16\node.exe)
npminstall@3.28.1 (C:\Users\yangd\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=C:\Users\yangd\AppData\Roaming\npm
win32 x64 10.0.19045
registry=https://registry.npm.taobao.org
​
C:\WINDOWS\system32>vue -V
@vue/cli 4.0.3
​
C:\WINDOWS\system32>

image-20230828150026377

 

7 创建Vue脚手架项目时出错

image-20230828172256244

D:\Java_developer_tools\frontweb\my_vue_project>vue init webpack my_vue_project_qs
​
  Command vue init requires a global addon to be installed.
  Please run npm install -g @vue/cli-init and try again.
​
​
D:\Java_developer_tools\frontweb\my_vue_project>npm install -g @vue/cli-init
npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli
npm WARN deprecated consolidate@0.14.5: Please upgrade to consolidate v1.0.0+ as it has been modernized with several long-awaited fixes implemented. Maintenance is supported by Forward Email at https://forwardemail.net ; follow/watch https://github.com/ladjs/consolidate for updates and release changelog
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
​
> metalsmith@2.6.1 postinstall C:\Users\yangd\AppData\Roaming\npm\node_modules\@vue\cli-init\node_modules\metalsmith
> node metalsmith-migrated-plugins.js || exit 0
​
(node:3660) ExperimentalWarning: The fs.promises API is experimental
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules\@vue\cli-init\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
​
+ @vue/cli-init@5.0.8
added 248 packages from 213 contributors in 126.789s

 

8 在cmd 窗口 退出vue cli 脚手架项目

 

image-20230828174354942

9 vue cli 脚手架项目位置

D:\Java_developer_tools\frontweb\my_vue_project\my_vue_project_qs

10 在vue 中使用插件 通常要Vue.use() 一下

 

 

image-20230828230152369

11 Vue2 cli 脚手架 的路由文件router/index.js中 alt+enter 自动引入组件

image-20230829101459422

image-20230829101528396

但是自动引入的是相对路径的 同时后面有个分号 不好，与上面保持一致

改写为import Hsp1 from "@/components/Hsp1"

image-20230829101735430

12 配置路由时的name属性与组件的名称保持一致

image-20230829112550133

直接去复制

image-20230829112802341

13