下载vue/cli脚手架的时候，下载速度过慢怎么解决，适配版本

如何下载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-deps

Chrome安装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结合起来使用等