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

最新推荐文章于 2025-10-09 21:12:53 发布
原创 最新推荐文章于 2025-10-09 21:12:53 发布 · 1.5k 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

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

qq_58956810
关注
npm报错 npm WARN deprecated....的问题解决方式
任聪聪的博客
07-19 16万+
报错 ：npm WARN deprecated … 现象：无法进行有效的vue项目的部署以及npm install 命令的执行。 原因一：版本问题 说明：由于npm的版本过低或者过高导致的报错 检查版本： npm -v 如果版本是比较旧的，或者是最新的，这里可以进行对npm的更新和回退。 更新npm版本： npm updated -d 查看可以更新的版本 npm install -g npm 默认安装最新版本 安装回退指定的版本： npm updated -d 查看所有的版本 npm -g i.
npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at leas t 2.1.6 to avoid a
热门推荐
郭宝的博客
06-24 1万+
利用npm安装cnpm时出现的错误 解决办法： 1、降低npm版本 npm install npm@4.6.1 -g 2、通过npm update -d查看当前npm安装的版本 3、重新安装cnpm (npm install -g cnpm --registry=https://registry.npm.taobao.org） 4、根据安装提示配置cnp...
给 npm install 做一次大扫除：我如何干掉 deprecated inflight 和 glob 警告
小丁的博客
10-09 1279
摘要 本文分享了如何解决 npm install 时出现的 deprecated inflight 和 glob 警告问题。作者通过 npm ls 命令追踪到警告源头是 style-resources-loader 包，发现其在现代 Vite 项目中已冗余。解决方案包括： 卸载冗余包（节省24个依赖） 清理环境（删除 node_modules 和 lock 文件） 重新安装验证 关键经验： 不要忽视 deprecated 警告 善用 npm ls 排查间接依赖 定期审视项目依赖 拥抱现代工具的内置功能 最终
React——配置环境、ES6语法补充、Components
夜空像是一片紫水潭，星星是些不动的大亮点，夜风是些浅蓝色的流线，云端传来喧嚣的声音。
07-31 1114
配置环境难死了
vue脚手架安装慢
qq_53701739的博客
09-22 508
再npm config get registry 看看，是否成功。解决办法，换成淘宝的源就行了。
解决vue-cli插件下载慢的问题
Lawless
02-11 2581
将npm的仓库地址改为淘宝镜像 npm config set registry https://registry.npm.taobao.org --global npm config set disturl https://npm.taobao.org/dist --global 使用命令： vue不是内部或者外部命令 解决方法就是： 1.在电脑内搜索vue....
Vue教程｜搭建vue项目｜Vue-CLI2.x 模板脚手架
baidu_21035953的博客
11-29 1652
通过实战方式，介绍基于Vue-CLI2.x 模板脚手架搭建vue2.x项目的完整构建过程，从环境搭建、脚手架搭建到脚手架构建项目，另外分享了工程结构各文件的具体用途，方便大家了解和掌握
安卓毕业设计app项目源码6-vue-cli:@vue/cli4.0.*配置示例详解。目标为产出一套多场景适用脚手架
06-06
最近想升级一下技术架构，发现新版本的脚手架和之前的区别有点大。 很多之前的配置要进行迁移。 基于此，在这里做下配置说明以及配置一些自定义的功能实现。 主要基础功能如下： TODO: << SPA单页面应用功能点...
vue-cli脚手架打包静态资源请求出错的原因与解决
12-02
Vue CLI 是一个非常流行的前端构建工具，用于快速搭建 Vue.js 应用程序。在使用 Vue CLI 打包项目时，可能会遇到静态资源请求出错的问题，尤其是在将项目部署到特定路径下。这个问题主要体现在访问应用时，CSS 和 JS...
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
10-17
完成以上五步后，Vue-cli3 项目在低版本安卓系统和 IE 浏览器上白屏的问题通常能得到解决。在实际应用中，可能还需要根据项目的具体需求和错误信息进一步调整配置。同时，考虑到性能优化，可以考虑使用 Bundle ...
vue-cli2和vue-cli3脚手架介绍和深入理解
weixin_45221036的博客
04-04 1215
一、vuecli的介绍和安装 1、介绍 CLI是Command-Line Interface（命令行界面）俗称脚手架 Vue CLI使用的前提 Node.js、webpack（npm install webpack -g全局安装） 2、安装vue脚手架（cli3） npm install -g @vue/cli -g就是全局安装（global） 注意：此时安装的是最新版本，如果需要想按照v...
npm install -g @vue/cil 非常卡慢
Hellc007的博客
11-01 1647
时遇到卡慢的情况通常和网络问题有关，特别是国内的网络环境下访问 npm 的服务器可能较慢。淘宝 NPM 镜像源对国内用户更加友好。你可以临时使用淘宝镜像源安装。尝试这些方法后，安装速度应会有所提升。
解决安装vue-cli缓慢问题
毅航的博客
01-14 6910
使用淘宝镜像来进行安装操作 1.首先装一个cnpm，指向淘宝npm仓库 npm install -g cnpm --registry=https://registry.npm.taobao.org` 2.安装vue cli npm install -g vue-cli 安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。 3.查看Vue版本信息： vue --version 补充：安装vue cli前要先安
vue脚手架安装很慢_vue-cli3脚手架安装
weixin_39771614的博客
12-20 1125
1.vue脚手架的使用需要node.js支持，所以需要下载安装node.js ，可以到node.js官网下载node.jshttps://nodejs.org/zh-cn/,可以根据个人需要下载版本，推荐多数用户使用(LTS)2.安装很简单，一串点点点下一步就完事了，安装路径根据自己爱喜好来设置3.安装完成后 win+R 输入cmd 查看安装版本4.npm 安装第三方包时速度过慢问题 ...
vue下載太慢了
z3502603706的博客
01-20 640
【代码】vue下載太慢了。
Vue脚手架安装慢解决
qq_45488981的博客
01-19 1201
https://www.cnblogs.com/Aangle-long/p/11600966.html 安装npm install时，长时间停留在fetchMetadata: xxxxxx处， 是数据源的问题，下载太慢了 更换成淘宝的源就行了 npm config set registry https://registry.npm.taobao.org – 可以通过下面方式来验证是否成功 npm config get registry – 或npm info express ...
Web 前端 之 Vue 脚手架环境的安装搭建/并创建Vue脚手架工程简单整理（内含:国内环境安装搭建 下载速度慢 的简单解决办法）
仙魁XAN
10-17 1030
一、简单介绍 Web 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。 本节介绍，Web 前端开发中使用 Vue 脚手架时，环境的安装搭建，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。 二、实现原理 安装 1、使用 node 的相关命令进行操作者（如果没有安装 node ，需要先安装） 2、npm install -g @vue/cli 安装 3、npm install -g @vue/cli-init 安装初始化的一些东西 创...
c++安装包_Advanced Installer(安装包制作工具)中文版分享
weixin_39959794的博客
11-03 1249
Advanced Installer是一款知名度很高的安装包制作工具。它具有友好的图形用户界面，操作简单而直观，功能多样而完备，无需具备任何脚本方面的知识就可以制作出符合Windows Installer要求的安装程序。可用于安全，可靠，可靠地安装，更新和配置您的产品。Advanced Installer简化了在Windows上打包和更新软件的方式。通过我们简单的GUI，克服复杂性并利用Windo...
vue-cli 安装太慢解决方案，以及mac 初始化项目报错 EACCES: permission denied
转身那一瞬
04-14 837
vue-cli 安装太慢解决方案 npm config set registry https://registry.npm.taobao.org 安装 vue-cli npm install -g @vue/cli 初始化项目 vue init webpack zy-cms-web EACCES: permission denied, unlink '/Users/xian...
通过vue/cli来创建项目
最新发布
10-24
虽然 **Vue CLI** 曾是 Vue 项目的主流脚手架，但自 Vue 3 发布以来，官方更推荐使用 **Vite + `create-vue`** 来创建项目。不过，如果你希望 **通过 Vue CLI 创建一个适用于 Chrome 扩展的 Vue 3 + TypeScript + Pinia + Vue Router 工程化项目**，我们仍然可以实现 —— 只是需要手动调整部分配置以适配浏览器扩展开发。 --- ## ⚠️ 注意：Vue CLI 的现状 - Vue CLI 使用的是 **Webpack 构建系统**，相比 Vite 构建速度较慢。 - 官方已将其进入 **维护模式**，不再新增功能。 - 不原生支持 Chrome 扩展（MV3）构建流程（如 HMR、manifest 处理等）。 > ✅ 但仍可用于快速搭建基础结构，后续再集成 Chrome 扩展逻辑。 --- ## 🛠️ 步骤一：安装 Vue CLI 并创建项目 ```bash # 全局安装 Vue CLI（如果尚未安装） npm install -g @vue/cli # 创建项目 vue create my-sidebar-extension ``` 在交互式菜单中选择： ``` ? Please pick a preset: Default ([Vue 2] babel, eslint) Default (Vue 3) ([Vue 3] babel, eslint) ❯ Manually select features ``` 选择以下特性： ``` Check the features needed for your project: ◉ Choose Vue version ◉ Babel ◉ TypeScript ◉ Router ◉ Pinia ◉ Linter / Formatter ``` 然后按提示完成配置： - Vue version: `3.x` - Use class-style component syntax? `No` - Use Babel alongside TypeScript? `Yes` - Use history mode for router? `Yes`（虽然扩展中可用可不用） - Pick a linter / formatter config: `Prettier` - Pick additional lint features: `Lint on save` - Where do you prefer placing config? `In dedicated config files` --- ## 📦 项目创建完成后目录结构（简化版） ``` my-sidebar-extension/ ├── public/ │ └── index.html ├── src/ │ ├── views/ │ ├── components/ │ ├── router/ │ ├── stores/ # Pinia 自动创建 │ ├── types/ │ ├── App.vue │ └── main.ts ├── babel.config.js ├── vue.config.js # Webpack 配置入口 ├── tsconfig.json └── package.json ``` --- ## 🔧 步骤二：适配 Chrome 扩展（MV3）需求 ### 1. 添加 `public/manifest.json` ```json { "manifest_version": 3, "name": "My Sidebar Extension", "version": "1.0.0", "description": "A sidebar extension built with Vue CLI", "background": { "service_worker": "js/background.js" }, "action": {}, "side_panel": { "default_path": "index.html" }, "permissions": ["sidePanel", "storage"], "web_accessible_resources": [ { "resources": ["js/*.js", "css/*.css"], "matches": ["<all_urls>"] } ] } ``` > ⚠️ 注意：Vue CLI 输出路径为 `/dist/js/app.xxx.js`，所以这里用 `"js/*.js"` 匹配。 --- ### 2. 修改 `vue.config.js`（关键！） Vue CLI 使用 Webpack，需自定义输出路径和禁用默认 HTML 注入。 ```js // vue.config.js const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ // 禁用生产环境 source map（可选） productionSourceMap: false, // 自定义输出目录 outputDir: 'dist', // 更改默认的 index.html 路径 pages: { index: { entry: 'src/main.ts', template: 'public/index.html', filename: 'index.html', chunks: ['chunk-vendors', 'chunk-common', 'app'] } }, // 关闭 eslint 在保存时的强制报错（避免阻塞构建） lintOnSave: 'warning', // 配置 webpack 输出路径前缀（重要：避免路由问题） publicPath: './' }) ``` --- ### 3. 创建 `src/background/background.ts`（Service Worker） ```ts // src/background/background.ts chrome.sidePanel .setOptions({ path: 'index.html', enabled: true }) .catch((error) => console.error(error)) ``` > 构建后需手动复制到 `dist/js/background.js` 或通过脚本自动化。 --- ### 4. 创建内容脚本 `src/content/content.ts` ```ts // src/content/content.ts console.log('Content script loaded') // 示例：监听页面点击并发送消息 document.addEventListener('mouseup', () => { const selection = window.getSelection()?.toString().trim() if (selection) { chrome.runtime.sendMessage({ type: 'TEXT_SELECTED', text: selection, url: location.href }) } }) ``` > 同样需要手动注入或通过额外构建步骤处理。 --- ## 🔄 步骤三：构建与部署流程 ### 1. 构建命令 ```bash # 开发 npm run serve # 生产构建 npm run build ``` 输出路径：`dist/` ### 2. 手动处理 Service Worker 和 Content Script 由于 Vue CLI **不支持多入口打包**（如 background.js、content.js），你需要： #### 方案 A：手动复制 + 引入 ```bash # 构建后执行： cp src/background/background.ts dist/js/background.js cp src/content/content.ts dist/js/content.js ``` 并在 `manifest.json` 中引用： ```json "background": { "service_worker": "js/background.js" }, "content_scripts": [ { "matches": ["<all_urls>"], "js": ["js/content.js"] } ] ``` #### 方案 B：使用额外构建工具（推荐进阶用户） 使用 `tsc` 单独编译 `.ts` 文件： ```json "scripts": { "build:sw": "tsc src/background/background.ts --outDir dist/js", "build:content": "tsc src/content/content.ts --outDir dist/js", "build": "vue-cli-service build && npm run build:sw && npm run build:content" } ``` --- ## 💡 优缺点总结 | 优点 | 缺点 | |------|------| | ✅ 快速生成标准 Vue 项目结构 | ❌ 基于 Webpack，启动慢 | | ✅ 内置对 TypeScript、Router、Pinia 支持 | ❌ 不支持 HMR for Chrome Extensions | | ✅ 适合团队熟悉 Vue CLI 的场景 | ❌ 需手动处理多入口（background/content） | | ✅ 配置相对稳定 | ❌ 官方已不再积极维护 | --- ## ✅ 推荐替代方案（强烈建议） 如果你要做 **现代化 Chrome 扩展开发**，建议改用基于 **Vite + `@crxjs/vite-plugin`** 的方案： ```bash npm create vite@latest my-ext -- --template vue-ts cd my-ext npm install @crxjs/vite-plugin ``` 它天然支持： - 多入口自动构建（background、content、side panel） - HMR 热更新 - TypeScript + JSX 支持 - 更快的开发体验 --- ## ✅ 总结：通过 Vue CLI 创建项目的完整命令流 ```bash # 1. 安装 CLI（首次） npm install -g @vue/cli # 2. 创建项目 vue create my-sidebar-extension # 3. 进入项目 cd my-sidebar-extension # 4. 添加 manifest.json 到 public/ # 创建 src/background/background.ts 和 src/content/content.ts # 5. 修改 vue.config.js（设置 publicPath 和 outputDir） # 6. 构建 npm run build # 7. 手动复制 background.ts → dist/js/background.js # 8. 加载 dist 目录到 Chrome 扩展页面调试 ``` ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值