首页 前端知识 下载vue/cli脚手架的时候,下载速度过慢怎么解决,适配版本

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

2024-10-13 20:10:46 前端知识 前端哥 997 876 我要收藏

如何下载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结合起来使用等

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18952.html
标签
评论
发布的文章

安装Nodejs后,npm无法使用

2024-11-30 11:11:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!