vue-cli的安装过程（简单）

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

#node.js #vue-cli3

本文详细介绍了如何在中国环境下快速安装vue-cli并配置新建Vue项目，包括设置npm国内镜像源、选择预设选项以及配置Babel、Router、Vuex和CSS预处理器等关键步骤。

第一步，安装npm和node.js
第二步，打开cmd，因npm的仓库服务器地址在国外，国内访问会很慢，我们把镜像源设置为国内后下载会更快，使用以下命令。然后再下载安装脚手架！！

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install -g vue-cli

参考链接https://www.jianshu.com/p/70644a7d56f5

第三步，然后再切换到相应的版本下
在这里插入图片描述
第四步，创建项目名，
在这里插入图片描述
第五步，选择默认模式进行配置

最低0.47元/天 解锁文章
vue-cli（vue脚手架）安装 详细教程
m0_54853503的博客
02-23 7292
vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK。 一.安装vue-cli 1、 使用npm（需要安装node环境）全局安装webpack，打开命令行工具输入：npm install webpack -g或者（npm install -g webpack），安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。 注意：webpack 4.
安装vue-cli的简易过程
12-11
总的来说，Vue CLI为Vue.js开发者提供了一个高效、便捷的开发环境，使得创建和管理Vue项目变得更加简单。通过上述步骤，你已经掌握了安装Vue CLI的基本流程，以及如何使用它来初始化和运行一个Vue项目。在实际开发中...
Vue-CLI最新详细安装教程【附安装包】
ZHOUPUYU的博客
11-28 1万+
vue-cli2025最新保姆级教程，Vue CLI（Vue.js Command Line Interface）是一个基于Vue.js框架的项目脚手架工具，用于快速生成Vue工程化项目的工具。‌ 它由Vue.js官方提供，旨在通过简单的命令行操作，帮助开发者快速搭建项目结构，包含项目所需的配置和依赖。变量【C:\Program Files\nodejs\】如果存在，就新建剩下的两个变量即可。显示（v22.11.0）版本号则表示node.js安装成功。这里我以输入vue create demo为例。
安装 Vue CLI (vue脚手架搭建)
最新发布
qq_36710118的博客
10-25 295
本文介绍了Vue项目环境的安装与搭建步骤：首先需要安装Node.js和npm作为基础运行环境；其次通过npm全局安装Vue CLI；然后使用Vue CLI创建新项目并启动开发服务器；最后还介绍了可选安装的Vue CLI图形界面工具。全文提供了从环境配置到项目创建的具体命令行操作指南，帮助开发者快速搭建Vue开发环境。
如何安装vue-cli
坏小哥
02-18 4746
首先我们需要安装nodeJs,node中有自带的npm，可以直接全局安装vue-cli。 运行下面命令： npm install --global vue-cli 如果太慢的话，建议切换成淘宝镜像： npm get registry //得到原本的镜像地址 npm config set...
精选资源
vue-cli中安装方法(图文详细步骤)
01-21
1、安装node，vue运行需要基于npm一定的版本，所以首先升级npm到最新的版本，而在安装的过程中个人比较喜欢淘宝的镜像，所以先安装cnpm（因为速度和稳定性都比较好） 2、在目标文件夹下打开终端 3、执行cnpm install...
精选资源
vue-cli开发的商城源代码
01-18
Vue.js 的设计目标是使开发过程更加简单和高效，同时提供了丰富的生态系统，如Vuex（状态管理）、Vue Router（路由管理）和Vue CLI（项目脚手架）。 `vue-cli` 在这个项目中起到了基础架构的作用。它允许开发者通过...
用Vue-cli搭建的项目中引入css报错的原因分析
08-29
我在研究Vue的过程中，遇到了这个问题，后来查询了许多资料，终于找到了解决方法。 解决方法 解决方法很简单，只需要在build文件下的webpack.base.conf.js文件中添加以下代码： ``` { test: /\.css$/, include:...
Vue-Cli(脚手架)安装及如何创建Vue-Cli项目-保姆级别教程,手把手教会你
热门推荐
m0_72568513的博客
06-09 5万+
快速创建 Vue.js 项目的向导式用户界面：我们只需要按照界面上的步骤一步步操作，就可以快速创建一个 Vue.js 项目。支持自定义配置：Vue CLI 提供了多种配置选项，开发者可以根据自己的需求进行选择和配置。支持插件扩展：Vue CLI 支持插件化扩展，开发者可以根据需要安装插件，例如路由、状态管理等。支持开箱即用的工具集成：Vue CLI 集成了很多实用的工具，例如 Babel、Webpack、ESLint 等。
vue-cli安装教程
inticaler的博客
04-10 1555
vue-cli安装教程 vue-cli详细安装教程，首次写博客，记录一下 一、使用npm安装vue-cli之前，需要配置node环境。 node安装 去node官网（https://nodejs.org/en/download/）下载node安装包，安装。 npm安装 在终端框中输入命令：npm install npm -g，然后回车，如图 npm安装完成 二、安装vue-cli 在命...
如何安装vue-cli并搭建vue项目
游海东的技术专栏
07-02 666
1、在HBuilder创建一个Vue2 Web项目2、利用cmd切换路径cd D:\njws\Vue2 d:3、安装vue-clicnpm install -g vue-cli4、查看vue安装版本vue -V5、初始化vue并创建项目、下载webpack模板vue init webpack cmp6、切换到项目目录cd cmp7、启动vue项目npm run dev...
[VUE] Vue-CLI的安装、使用及环境配置（超详细）
leo的博客
11-20 4万+
Vue-CLI的安装、使用及环境配置的详细步骤（超详细）
安装 Vue-CLI 详细方法及踩坑记录
sywdebug的博客
11-18 1万+
配置: 如果环境中没有配置全局目录，那么安装模块时会自动安装装到 C:\User\当前用户\Appdata\Roaming\npm 目录下。原因: 没有权限，以管理员身份运行即可，也有可能是 nodejs 安装后没有配置环境变量。这个玩意我也是第一次见到，清缓存等方法还会给我报错，就记录一下吧，搞了好长时间，最后参考。右键我的电脑 - - - 属性 - - - 高级系统设置 - - - 环境变量。或者使用下面命令安装 cnpm，然后使用 cnpm 进行安装。用户变量和系统变量应该都是可以的。
安装Vue CLI的详细指南
2302_77758423的博客
10-26 2573
通过以上步骤，你已经成功安装了Vue CLI并创建了一个新的Vue项目。Vue CLI提供了丰富的功能和插件，可以帮助你更高效地开发Vue应用。希望这篇博客对你有所帮助！Vue CLI 现已处于维护模式!现在官方推荐使用create-vue来创建基于Vite的新项目。
Vue-cli安装步骤详细版
qq_45801516的博客
03-12 4057
1.我选择自定义安装步骤。
vue-cli_安装及使用
初学者乐园的博客
05-03 247
官网安装说明介绍 1、安装 包名称从更改vue-cli为@vue/cli。如果您在vue-cli全局安装了以前的（1.x或2.x）软件包，则需要先卸载它 npm uninstall vue-cli -g # OR yarn global remove vue-cli。 Vue CLI需要Node.js版本8.9或更高版本（建议使用8.11.0+） 要安装新软件包，请使用以下命令之一。除非通过No...
创建vue项目(使用vue-cli)
chengxiadenghuo的博客
08-27 1077
安装过程，部分参考https://www.cnblogs.com/yanxulan/p/8978732.html 1.安装node环境，下载地址：http://nodejs.cn/download/，检查是否安装成功：如果输出版本号，说明我们安装node环境成功 2.为了提高我们的效率，可以使用淘宝的镜像：http://npm.taobao.org/，...
基于Vue-cli的qiankun框架简易教程
资源摘要信息:"本资源为关于使用Vue-cli结合qiankun框架实现的简单demo的压缩包文件。qiankun是一个基于single-spa的微前端框架，它允许我们将一个大型前端应用拆分成若干个小型应用，每个应用可以独立开发、部署，...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值