共计 5751 个字符，预计需要花费 15 分钟才能阅读完成。
如何下载 webpack 包，使用 npm，以及安装淘宝镜像 
安装淘宝镜像
npm config set registry https://registry.npmmirror.com查看是否安装成功
npm config get registry如果安装成功，显示如下
https://registry.npm.taobao.org/也可以使用 pnpm 以及 cnpm 来安装
再次下载脚手架的时候，速度就很快了
下载脚手架的时候还报错了
npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm WARN deprecated @babel/plugin-proposal-nullish-coalescing-operator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
npm WARN deprecated @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
npm WARN deprecated rimraf@2.6.3: Rimraf versions prior to v4 are no longer supported
npm WARN deprecated @babel/plugin-proposal-optional-chaining@7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
npm WARN deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated apollo-server-errors@3.3.1: 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.
npm WARN deprecated apollo-datasource@3.3.2: The `apollo-datasource` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated apollo-server-plugin-base@3.7.2: 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.
npm WARN deprecated apollo-server-types@3.8.0: The `apollo-server-types` 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.
npm WARN deprecated apollo-reporting-protobuf@3.4.0: The `apollo-reporting-protobuf` 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/usage-reporting-protobuf` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated apollo-server-env@4.2.1: The `apollo-server-env` 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/utils.fetcher` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated shortid@2.2.16: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
npm WARN deprecated subscriptions-transport-ws@0.11.0: 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
npm WARN deprecated vue@2.7.16: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.
added 852 packages in 21s原因未知，以后解决，但是对创建项目，以及运行项目没有影响
很显然，使用 vue/cli 创建以及打开项目，没有使用 vite 创建以及打开项目快速
使用 cnpm 安装会有一些问题，这个问题暂时忘记了，后面遇到问题了的时候记得记录一下
Vue – Official 给新建的组件代码添加颜色
在写 vue2 项目的时候，安装的 vue-router 版本过高的话，会报如下的错误，
可以指定版本安装，一般 vue2 项目对应的版本在 vue-router@3，安装命令如下：
npm i --save vue-router@3 --legacy-peer-depsChrome 安装 Vue 插件 vue-devtools 的步骤_wx5c85fbef9e4ef 的技术博客_51CTO 博客
vue2 项目当中，在安装 vuex 状态管理工具的时候，如果没有安装适应于 vue2 的特定的版本，就是用 vuex 当中的属性的话，会报错，报错信息如下：
解决方案，安装适应于 vue2 的版本
npm install --save vuex@3 --legacy-peer-deps但是这个时候还显示着报错的界面，可能是程序没有反应过来，在运行一下项目就会出现正常的效果了
使用 swiper 插件时，实例化 new Swiper 在组件中应该放置在什么地方，才会让页面动态效果正常显示？
放在 mounted 中不行，因为此时的执行顺序如下：
其中获取请求数据，是从 vuex 状态管理中进行的，组件获取 state 当中的数据进行渲染，代码如下：
mounted() {console.log('组件的 mounted')
// 派发 action, 通知 vuex 发 ajax 请求，将数据存储在仓库当中
this.$store.dispatch("getBannerList");
//Swiper 在使用的时候注意:new Swiper 类的实例之前, 轮播图结构 DOM, 必须要完整!!!【现在把 new Swiper 实例放在 mounted 这里发现不行】// 为什么：结构还不完整
console.log('初始化 swiper 实例')
},vuex 转态管理中：
const mutations = {GETBANNERLIST(state,bannerList){
state.bannerList = bannerList
console.log('在修改仓库中的 bannerList 数据')
}
}
// action| 用户处理派发 action 的地方的，可以书写异步语句，自己逻辑的地方
const actions = {
// 获取首页轮播图数据
async getBannerList({commit}) {console.log('在向服务器发起 ajax 请求，获取轮播图的数据')
const result = await reqGetBannerListt()
// mock 发送的 ajax 请求会被浏览器拦截，所以在开发者工具当中的网络当中就查看不到与 mock 相关的请求，只有与真实与像服务器获取数据的请求，但是打印出来，可以在控制台看到获取到的数据
console.log(result)
if(result.code == 200){commit('GETBANNERLIST', result.data)
}
}
}简单来说就是要等数据渲染完成之后才进行实例化，否则会显示报错，实例化不成功，所以有些实例化是放在 watch 中的，或者 $nextTick 当中的，$nextTick 会等到循环完成之后才开始执行的方法，$nextTick 的应用场景还有其他的，具体根据他的特性，比如减少更新次数，在数据改变的时候进行的操作，与 created 结合起来使用等
原文地址: 下载 vue/cli 脚手架的时候，下载速度过慢怎么解决，适配版本
正文完
