Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程

Node.js与VueCLI3快速部署与项目初始化指南,
已于 2025-06-30 17:38:09 修改
阅读量3.2k 收藏 32
点赞数 24
CC 4.0 BY-SA版权
分类专栏： Vue2、Vue3、Vite、CSS 文章标签： vue.js ui 前端
于 2024-01-28 14:46:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/CYK_byte/article/details/135893502
本文详细介绍了如何安装和配置Node.js，包括设置环境变量、安装淘宝镜像和cnpm，以及使用vue-cli3创建和启动Vue项目，对比了vue-cli2和3的主要差异。

  免费查看本文章可前往我的网站：PiQiu

目录

前言提示

一、安装 & 配置 nodejs

1.1、安装 nodejs

1.2、配置必要目录

1.3、配置环境变量

1.4、测试 安装&配置 是否成功

1.5、安装淘宝镜像

1.5、cnpm 安装（推荐安装）

二、vue-cli3 创建项目

2.1、vue-cli2 和 vue-cli3 主要区别

2.2、安装 vue-cli3

2.3、创建 vue-cli3 脚手架

2.4、启动项目

前言提示

以下过程凡是涉及到终端的使用，一定都要使用 管理员 方式打开！ 

一、安装 & 配置 nodejs

1.1、安装 nodejs

官网下载地址：Node.js — Download (nodejs.org)

了解本专栏 订阅专栏 解锁全文 超级会员免费看
Vue3.0（二）：Vue组件化基础 - 脚手架
weixin_55041125的博客
02-04 1601
本文章主要讲了Vue的组件化思想，使用脚手架搭建一个项，vue中插槽的基本用法，具名插槽以及作用域插槽的用法，父子组件的通信以及非父子组件通信（Provide/Indect以及事件总线）
vue3之搭建脚手架快速创建vue项目
soos的博客
08-11 995
通过脚手架创建vue项目
Vue3 从零到全掌握：最详尽的入门指南（近万字超全内容）
老高的博客
07-02 1万+
以前的官方脚手架@vue-cli也可以用，但这里推荐一个更轻快的脚手架Vite方式一：vue-cli脚手架初始化Vue3项目官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create// 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上// 安装或者升级你的@vue/cli// 创建// 启动方式二：vite初始化Vue3项目。
Vue3 项目创建实战：Vue CLI 与 Vite 深度对比与操作指南
最新发布
qq_40303030的博客
10-18 1395
摘要：Vue3项目构建工具VueCLI和Vite各有特点。VueCLI基于Webpack，适合复杂大型项目，但启动较慢；Vite采用ES模块原生支持，按需编译，开发体验更快更轻量。本文详细对比两者的创建流程、项目结构、工作原理及适用场景，建议新项目优先选择Vite，大型项目可考虑VueCLI。通过分析性能差异和实际案例，帮助开发者根据项目需求做出合理选择，提升开发效率。
vue-cli3创建Vue项目
程序员柒的博客
02-09 3201
本文讲解了如何使用vue-cli3创建属于自己的Vue项目，如果本文对你有所帮助请三连支持博主，你的支持是我更新的动力。下面案例可供参考。
搭建一个nodejs前端脚手架的方法步骤
Mo_Luffy的博客
01-04 1535
前言 像我们熟悉的 vue-cli，taro-cli 等脚手架，只需要输入简单的命令 taro init project ，即可快速帮我们生成一个初始项目。在日常开发中，有一个脚手架工具可以用来提高工作效率。 搭建前准备 第三方工具 commander.js ，可以自动的解析命令和参数，用于处理用户输入的命令。 download-git-repo ，下载并提取 git 仓库，用于下载项目模板。 ...
什么是VueCLI3
swpu715095938的博客
08-16 1843
什么是VueCLI 介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供： 通过 @vue/cli 搭建交互式的项目脚手架。 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。 一个运行时依赖 (@vue/cli-service)，该依赖： 可升级； 基于 webpack 构建，并带有合理的默认配置； 可...
详解使用nodeJs安装Vue-cli
10-19
Vue CLI是Vue.js官方提供的一个快速脚手架工具，用于简化Vue.js项目的搭建过程。在使用Vue CLI之前，确保已经安装了Node.js环境，因为Vue CLI是基于Node.js的npm包管理器构建的。 **1. 全局安装Vue CLI** 安装Vue ...
基于Vue-cli快速搭建项目的完整步骤
12-09
vue-cli 是一个官方发布 vue.js 项目脚手架，Vue-cli可以快速帮助我们创建一个项目，这是官方给我们提供的脚手架。下面我说一下vue-cli的使用方法。 下面话不多说了，来一起看看详细的介绍吧 一、准备工作 在使用...
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
10-17
Vue CLI 是 Vue.js 官方提供的一个强大工具，用于快速搭建现代化的 Vue.js 应用。它通过自动化配置，简化了项目的初始化、构建过程以及开发环境的设置。然而，在使用 Vue CLI 进行开发时，有时会遇到热更新（Hot ...
Node.js环境安装和Vue-cli脚手架构建过程
@李青龙的博客
06-28 1335
1. 前言Node.js简介Node.js 是一个开源的、跨平台的 JavaScript 运行环境，它允许开发者使用 JavaScript 编写服务器端代码。Node.js 基于 Google 的 V8 JavaScript 引擎构建，该引擎是 Chrome 浏览器中用于解析和执行 JavaScript 的核心组件。因此，Node.js 能够以接近原生的速度运行 JavaScript 代码。2. 准备工作检查系统要求（Windows、macOS 或 Linux）
vue3脚手架搭建
贝西奇谈
10-18 5724
Vue3CLI（脚手架）
基于Vue CLI 3构建Vue3项目（Vue2也可参考）
博客主要分享技术教程、工具教程、bug解决、前沿技术动态、编程经验、心得感悟等。 内容同步、干货获取、推广宣发请看侧栏推广信息
07-17 1566
每个人都有惰性，但不断学习是好好生活的根本，共勉！蜀国曾闻子规鸟，宣城还见杜鹃花。一叫一回肠一断，三春三月忆三巴。——《宣城见杜鹃花》
VUE3脚手架工具cli配置搭建及创建VUE3工程
雾林小妖的博客
06-17 4374
VUE3脚手架工具cli配置搭建及创建VUE工程
vue基础7（nodejs中npm的使用）
weixin_30299709的博客
05-21 155
NPM是什么？ 简单的说，npm就是JavaScript的包管理工具。类似Java语法中的maven，gradle，python中的pip。 安装 傻瓜式的安装。 第一步：打开https://nodejs.org/en/ 第二步： 第三步：我们为了统一版本，虽然node.js更新到了8.11.1的版本，但对于我个人而言，还是比较喜欢6.10.*版本的。 第四步： ...
Vuecli3
qq_41558265的博客
06-08 702
VueCLI3的使用： VueCLI3与Vuecli2的使用略有不同。 cli3相比cli2的优势： 1：功能丰富：对babel、Typescript、ESLint...提供开箱即用的支持 2：易于扩展：它的插件系统可以让社区根据需求构建和共享可复用的解决方案 3：无需Eject：vue cli 完全可配置的，无需再使用webpack配置 4：CLI图形化界面：vue ui图形化界面创...
nodejs服务器及安装vue脚手架--vue-cli
weixin_52725665的博客
04-17 548
写好的vue工程—把我们的工程部署到该服务器上。注意:不要安装到中文目录下或者空格的目录下。创建标准的 vue 工程。
vue-cli 版本3.0项目搭建和详解
一个懒惰前端的博客
05-27 7172
介绍 首先官方文档：https://cli.vuejs.org/ Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件： cli：@vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令） cli 服务：@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上（提供 如：serve、build 和 inspect 命令） cli 插件：
五分钟教你使用vue-cli3创建项目（三种创建方式，小白入门必看）
热门推荐
道阻且长，行则将至。
09-14 1万+
五分钟教你使用vue-cli3创建项目（小白入门必看） 一、搭建vue环境 安装Nodejs 官网下载Nodejs，如果希望稳定的开发环境则下LTS(Long Time Support)长期支持版，稳定。 点我进入node官网 安装好后cmd输入node -v查询是否安装成功，如下出现版本号即为成功。 二、Vue脚手架工具 全局安装vue-cli，命令行中输入： npm install --g vue-cli 国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝镜像或者yarn 淘宝镜像的安装
全面解析：nodejs8.9.4及其环境npm, webpack, vue-cli安装教程
Vue-cli 是 Vue.js 的官方命令行工具，它允许用户快速搭建 Vue.js 项目脚手架。以下是使用 vue-cli 的步骤： 1. **安装 Vue-cli：** 使用 npm 安装 Vue-cli，命令为 `npm install -g @vue/cli`。这将在全局环境中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陈亦康

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值