1.let细节 注意
直接输出x,会报错！
在输出语句后面使用var定义变量x，会变量提升，输出undefined
2 Vue 笔记
1 控制台直接使用vm对象
<!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 爆红问题
alt + enter 引入一下即可 引入xml的命名空间
3 url书写格式注意
https://www.baidu.com/ 冒号写在http后面再后面是//
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 回车
安装过会显示版本号：
没安装过 ：
6 安装node时出现错误
C:\WINDOWS\system32>cnpm install -g @vue/[email protected]
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)
解决方法：
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 [email protected] --registry=https://registry.npm.taobao.org
C:\WINDOWS\system32>npm install -g [email protected] --registry=https://registry.npm.taobao.org
npm WARN deprecated [email protected]: 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 [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: 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 [email protected] requires a peer of proxy-agent@^5.0.0 but none is installed. You must install peer dependencies yourself.
+ [email protected]
added 388 packages from 138 contributors, removed 401 packages and updated 188 packages in 59.646s
查看cnpm的版本:
cnpm -v
如下即为成功:
C:\WINDOWS\system32>cnpm -v [email protected] (C:\Users\yangd\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js) [email protected] (C:\Users\yangd\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js) [email protected] (D:\Java_developer_tools\program\nodejs10.16\node.exe) [email protected] (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 [email protected] requires a peer of proxy-agent@^5.0.0 but none is installed. You must install peer dependencies yourself.
+ [email protected]
updated 249 packages in 39.775s
C:\WINDOWS\system32>npm install [email protected] 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/[email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @webpack-cli/[email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @webpack-cli/[email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] 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: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ [email protected]
+ [email protected]
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/[email protected]
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 [email protected] 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/[email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @webpack-cli/[email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @webpack-cli/[email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: 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 [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated [email protected]: 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 [email protected]: 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 [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN @webpack-cli/[email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @webpack-cli/[email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @webpack-cli/[email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
+ [email protected]
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/[email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @webpack-cli/[email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @webpack-cli/[email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: 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/[email protected]
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/[email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @webpack-cli/[email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @webpack-cli/[email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: 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 [email protected] --registry=https://registry.npm.taobao.org
'[root@localhost' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
C:\WINDOWS\system32>npm install -g [email protected] --registry=https://registry.npm.taobao.org
npm WARN deprecated [email protected]: 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 [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: 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 [email protected] requires a peer of proxy-agent@^5.0.0 but none is installed. You must install peer dependencies yourself.
+ [email protected]
added 388 packages from 138 contributors, removed 401 packages and updated 188 packages in 59.646s
C:\WINDOWS\system32>cnpm install -g @vue/[email protected]
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\_@[email protected]@@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\[email protected]@deepmerge
[2/36] commander@^2.20.0 installed at node_modules\[email protected]@commander
[3/36] @vue/cli-ui-addon-widgets@^4.0.3 installed at node_modules\_@[email protected]@@vue\cli-ui-addon-widgets
[4/36] @vue/cli-ui-addon-webpack@^4.0.3 installed at node_modules\_@[email protected]@@vue\cli-ui-addon-webpack
[5/36] debug@^4.1.0 installed at node_modules\[email protected]@debug
[6/36] execa@^1.0.0 existed at node_modules\[email protected]@execa
[7/36] didyoumean@^1.2.1 installed at node_modules\[email protected]@didyoumean
[8/36] ejs@^2.6.1 installed at node_modules\[email protected]@ejs
[9/36] envinfo@^7.2.0 installed at node_modules\[email protected]@envinfo
[10/36] chalk@^2.4.1 installed at node_modules\[email protected]@chalk
[11/36] boxen@^4.1.0 installed at node_modules\[email protected]@boxen
[12/36] javascript-stringify@^1.6.0 installed at node_modules\[email protected]@javascript-stringify
[13/36] cmd-shim@^2.0.2 installed at node_modules\[email protected]@cmd-shim
[14/36] isbinaryfile@^4.0.0 installed at node_modules\[email protected]@isbinaryfile
[15/36] import-global@^0.1.0 installed at node_modules\[email protected]@import-global
[16/36] lru-cache@^5.1.1 existed at node_modules\[email protected]@lru-cache
[17/36] minimist@^1.2.0 existed at node_modules\[email protected]@minimist
[18/36] lodash.clonedeep@^4.5.0 installed at node_modules\[email protected]@lodash.clonedeep
[19/36] request@^2.87.0 existed at node_modules\[email protected]@request
[20/36] fs-extra@^7.0.1 installed at node_modules\[email protected]@fs-extra
[21/36] resolve@^1.10.1 existed at node_modules\[email protected]@resolve
[22/36] semver@^6.1.0 existed at node_modules\[email protected]@semver
[23/36] js-yaml@^3.13.1 installed at node_modules\[email protected]@js-yaml
[24/36] slash@^3.0.0 installed at node_modules\[email protected]@slash
[25/36] @vue/cli-shared-utils@^4.0.3 installed at node_modules\_@[email protected]@@vue\cli-shared-utils
[26/36] recast@^0.18.1 installed at node_modules\[email protected]@recast
[27/36] shortid@^2.2.11 installed at node_modules\[email protected]@shortid
[28/36] download-git-repo@^1.0.2 installed at node_modules\[email protected]@download-git-repo
[29/36] validate-npm-package-name@^3.0.0 installed at node_modules\[email protected]@validate-npm-package-name
[30/36] globby@^9.2.0 installed at node_modules\[email protected]@globby
[31/36] yaml-front-matter@^3.4.1 installed at node_modules\[email protected]@yaml-front-matter
[32/36] vue-jscodeshift-adapter@^2.0.2 installed at node_modules\[email protected]@vue-jscodeshift-adapter
[33/36] jscodeshift@^0.6.4 installed at node_modules\[email protected]@jscodeshift
[34/36] request-promise-native@^1.0.7 installed at node_modules\[email protected]@request-promise-native
[35/36] inquirer@^6.3.1 installed at node_modules\[email protected]@inquirer
[36/36] @vue/cli-ui@^4.0.3 installed at node_modules\_@[email protected]@@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\\[email protected]@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/[email protected] › [email protected] › [email protected] › [email protected] › @apollo/[email protected] run "node scripts/postinstall", root: "C:\\Users\\yangd\\AppData\\Roaming\\npm\\node_modules\\@vue\\cli\\node_modules\\_@[email protected]@@apollo\\protobufjs"
[2/3] scripts.postinstall @vue/[email protected] › [email protected] › [email protected] › [email protected] › @apollo/[email protected] finished in 171ms
[3/3] scripts.postinstall @vue/[email protected] › [email protected] › [email protected] › [email protected] › 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\\[email protected]@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/[email protected] › [email protected] › [email protected] › [email protected] › core-js-pure@^3.10.2 finished in 115ms
peerDependencies WARNING @vue/[email protected] › [email protected] › [email protected] › [email protected] › node-fetch@^2.6.1 requires a peer of encoding@^0.1.0 but none was installed
peerDependencies WARNING @vue/[email protected] › [email protected] › [email protected] › 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/[email protected] › [email protected] › [email protected] › 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/[email protected] › @hapi/joi@^15.0.1 Switch to 'npm install joi'
deprecate @vue/[email protected] › request@^2.88.2 request has been deprecated, see https://github.com/request/request/issues/3142
deprecate @vue/[email protected] › @hapi/[email protected] › @hapi/[email protected] This version has been deprecated and is no longer supported or maintained
deprecate @vue/[email protected] › [email protected] › har-validator@~5.1.3 this library is no longer supported
deprecate @vue/[email protected] › @hapi/[email protected] › @hapi/[email protected] This version has been deprecated and is no longer supported or maintained
deprecate @vue/[email protected] › @hapi/[email protected] › @hapi/[email protected] Moved to 'npm install @sideway/address'
deprecate @vue/[email protected] › @hapi/[email protected] › @hapi/[email protected] This version has been deprecated and is no longer supported or maintained
deprecate @vue/[email protected] › [email protected] › 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 [email protected] › [email protected] › [email protected] › [email protected] › source-map-resolve@^0.5.0 See https://github.com/lydell/source-map-resolve#deprecated
deprecate [email protected] › [email protected] › [email protected] › [email protected] › [email protected] › urix@^0.1.0 Please see https://github.com/lydell/urix#deprecated
deprecate [email protected] › [email protected] › [email protected] › [email protected] › [email protected] › source-map-url@^0.4.0 See https://github.com/lydell/source-map-url#deprecated
deprecate [email protected] › [email protected] › [email protected] › [email protected] › [email protected] › resolve-url@^0.2.1 https://github.com/lydell/resolve-url#deprecated
deprecate @vue/[email protected] › 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/[email protected] › [email protected] › @types/[email protected] › @types/body-parser@* delcares @types/body-parser@*(resolved as 1.19.2) but using ancestor(apollo-server-express)'s dependency @types/[email protected](resolved as 1.19.0)
deprecate @vue/[email protected] › [email protected] › 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/[email protected] › [email protected] › [email protected] › 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/[email protected] › [email protected] › [email protected] › 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/[email protected] › [email protected] › [email protected] › 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/[email protected] › [email protected] › 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/[email protected] › [email protected] › 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/[email protected] › [email protected] › [email protected] › 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/[email protected] › [email protected] › 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/[email protected] › [email protected] › [email protected] › 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/[email protected] › [email protected] › [email protected] › 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/[email protected] › [email protected] › [email protected] › 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/[email protected] › [email protected] › [email protected] › 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/[email protected] › [email protected] › [email protected] › 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:
→ [email protected] › @types/[email protected] › @types/node@*(20.5.7) (08:33:06)
2023-08-27
→ [email protected] › @babel/[email protected] › @babel/[email protected] › [email protected] › caniuse-lite@^1.0.30001517(1.0.30001524) (13:47:37)
2023-08-26
→ [email protected] › @babel/[email protected] › @babel/[email protected] › [email protected] › electron-to-chromium@^1.4.477(1.4.503) (06:02:25)
2023-08-25
→ [email protected] › @babel/[email protected] › @babel/[email protected] › @babel/plugin-transform-optional-chaining@^7.22.5(7.22.12) (16:28:36)
2023-08-24
→ [email protected] › @babel/preset-typescript@^7.1.0(7.22.11) (21:08:53)
→ [email protected] › @babel/[email protected] › @babel/plugin-transform-modules-commonjs@^7.22.11(7.22.11) (21:08:39)
→ [email protected] › @babel/[email protected] › @babel/plugin-transform-typescript@^7.22.11(7.22.11) (21:08:47)
→ [email protected] › @babel/parser@^7.1.6(7.22.11) (21:08:36)
→ [email protected] › @babel/[email protected] › @babel/helper-create-class-features-plugin@^7.18.6(7.22.11) (21:08:36)
→ [email protected] › flow-parser@0.*(0.215.1) (02:21:32)
→ [email protected] › @babel/core@^7.1.6(7.22.11) (21:08:56)
→ [email protected] › @babel/[email protected] › @babel/helpers@^7.22.11(7.22.11) (21:08:52)
→ [email protected] › @babel/[email protected] › @babel/traverse@^7.22.11(7.22.11) (21:08:47)
→ [email protected] › @babel/[email protected] › @babel/plugin-transform-class-static-block@^7.22.5(7.22.11) (21:08:47)
→ [email protected] › @babel/[email protected] › @babel/plugin-transform-async-generator-functions@^7.22.10(7.22.11) (21:08:36)
→ [email protected] › @babel/[email protected] › @babel/[email protected] › @babel/[email protected] › @babel/types@^7.22.5(7.22.11) (21:08:45)
→ [email protected] › @babel/[email protected] › @babel/plugin-transform-dynamic-import@^7.22.5(7.22.11) (21:08:37)
→ [email protected] › @babel/[email protected] › @babel/plugin-transform-export-namespace-from@^7.22.5(7.22.11) (21:08:38)
→ [email protected] › @babel/[email protected] › @babel/plugin-transform-json-strings@^7.22.5(7.22.11) (21:08:38)
→ [email protected] › @babel/[email protected] › @babel/plugin-transform-logical-assignment-operators@^7.22.5(7.22.11) (21:08:38)
→ @vue/[email protected] › [email protected] › [email protected] › [email protected] › node-fetch@^2.6.1(2.7.0) (01:18:39)
→ [email protected] › @babel/[email protected] › @babel/plugin-transform-modules-systemjs@^7.22.5(7.22.11) (21:08:39)
→ [email protected] › @babel/[email protected] › @babel/plugin-transform-nullish-coalescing-operator@^7.22.5(7.22.11) (21:08:39)
→ [email protected] › @babel/[email protected] › @babel/plugin-transform-numeric-separator@^7.22.5(7.22.11) (21:08:39)
→ [email protected] › @babel/[email protected] › @babel/plugin-transform-object-rest-spread@^7.22.5(7.22.11) (21:08:40)
→ [email protected] › @babel/[email protected] › @babel/plugin-transform-optional-catch-binding@^7.22.5(7.22.11) (21:08:40)
→ [email protected] › @babel/[email protected] › @babel/plugin-transform-private-property-in-object@^7.22.5(7.22.11) (21:08:47)
→ [email protected] › @babel/[email protected] › @babel/[email protected] › [email protected] › @babel/runtime@^7.8.4(7.22.11) (21:08:41)
2023-08-23
→ @vue/[email protected] › [email protected] › @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/[email protected]] 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
[email protected] (C:\Users\yangd\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
[email protected] (C:\Users\yangd\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js)
[email protected] (D:\Java_developer_tools\program\nodejs10.16\node.exe)
[email protected] (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>
7 创建Vue脚手架项目时出错
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 [email protected]: This package has been deprecated in favour of @vue/cli
npm WARN deprecated [email protected]: 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 [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: 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.
> [email protected] 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 [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ @vue/[email protected]
added 248 packages from 213 contributors in 126.789s
8 在cmd 窗口 退出vue cli 脚手架项目
9 vue cli 脚手架项目位置
D:\Java_developer_tools\frontweb\my_vue_project\my_vue_project_qs
10 在vue 中使用插件 通常要Vue.use() 一下
11 Vue2 cli 脚手架 的路由文件router/index.js中 alt+enter 自动引入组件
但是自动引入的是相对路径的 同时后面有个分号 不好，与上面保持一致
改写为import Hsp1 from "@/components/Hsp1"
12 配置路由时的name属性与组件的名称保持一致
直接去复制
