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