Vue-Cli脚手架项目的搭建【新手快速入手】

已于 2024-05-08 11:09:32 修改
阅读量2.1k 收藏 29
点赞数 37
文章标签： vue.js 前端 javascript
于 2024-05-06 19:17:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79258776/article/details/138500548
版权
本文详细介绍了如何安装VueCLI，包括Node.js和npm的前置准备，淘宝镜像的安装，以及如何查看、更新和卸载不同版本的VueCLI。还指导了Vue项目的两种创建方法，解决localhost访问问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

一、Vue CLI脚手架简介☺

1.Node.js前置环境的安装

2.安装npm管理器

3.安装淘宝镜像(cnpm)

二、安装vue-cli

1. 版本号查看

2.旧版本卸载

3.新版本安装

4.检查

三、Vue项目的搭建

📌进入Vue项目管理器

★命令方式创建

若localhost拒绝访问怎么办？

一、Vue CLI脚手架简介☺

什么是vue脚手架？

Vue脚手架（Vue CLI）是一个官方提供的命令行工具，用于快速搭建和管理Vue.js项目的开发环境。它提供了一套可配置的脚手架，帮助开发者初始化Vue项目，并集成了开发所需的工具和依赖项，包括构建工具、开发服务器、打包工具等。babel、webpack都集成在其中。


Vue CLI是官方提供的一套全面的开发工具链，可以帮助开发者快速搭建Vue项目。以下是使用Vue CLI搭建Vue脚手架的步骤：

  • 安装Vue CLI：通过npm或yarn全局安装Vue CLI。
  • 创建Vue项目：使用命令行运行vue create project-name来创建一个新的Vue项目。
  • 选择项目配置：可以选择默认配置或手动配置项目选项。
  • 添加插件：可以根据项目需求选择添加一些插件。
  • 运行项目：运行npm run serve命令来启动开发服务器。

1.Node.js前置环境的安装

点击官网下载node.js

安装完成之后，打开安装目录下的文件。

配置环境变量

通过快捷键【win+I】进入设置，点击系统-->系统信息

最低0.47元/天 解锁文章
㏒浅忆
关注
搭建Vue-Cli脚手架（超详细）
2401_84091628的博客
04-17 1446
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
vue-cli脚手架搭建
SuaSUA_He的博客
04-14 422
1.安装node.js http://nodejs.cn/download/ 在cscode终端/cmd中输入 node -v查安装好的版本号 2.安装cnpm（npm的镜像） https://npmmirror.com/ 3.安装yarn npm install yarn 4.安装vue-cli脚手架 cnpm install -g@vue/cli@版本号 验证是否安装成功： vue -V查版本号 5.vue create 项目名（小写字母） 6.引入element-ui npm i e
vuecli脚手架的搭建
IT12345666的博客
05-20 675
安装nodejs 并搭建环境 去nodejs的官网进行下载 和jdk的环境配置一样： 打开电脑高级系统管理： 配置新建 NODEHOME 刚才拷贝的路径 并在path里面添加 %NODEHOME%\bin 打开cmd 输入 npm -version 出现这个 就证明node 环境变量配置成功了！ 安装vue项目 请严格按照步骤来 避免踩坑：搭建完环境变量之后 在全局中进行安装依赖： 前面请在桌面上直接打开cmd进行安装： 首先进行nodejs的初始化 npm init -y 在您的计
Vue-CLI最新详细安装教程【附安装包】
最新发布
2503_90209418的博客
03-29 1544
它由Vue.js官方提供，旨在通过简单的命令行操作，帮助开发者快速搭建项目结构，包含项目所需的配置和依赖。Interface）是一个基于Vue.js框架的项目脚手架工具，用于快速生成Vue工程化项目的工具。变量【C:\Program Files\nodejs\如果存在，就新建剩下的两个变量即可。6.输入命令【npm run serve】，按下回车键启动项目。显示（v22.11.0）版本号则表示node.js安装成功。这里我以输入vue create demo为例。我这里以输入【cd demo】为例。
vue脚手架（cli）项目搭建
dawfwafaew的博客
02-26 422
vue脚手架（cli）项目搭建，保姆教程
手摸手教你使用vue-cli脚手架-详细步骤图文解析[vue入门]
weixin_34050005的博客
08-05 743
写在前面： 使用 vue-cli 可以快速创建 vue 项目，vue-cli很好用，但是在最初搭建环境安装vue-cli及相关内容的时候，对一些人来说是很头疼的一件事情，本人在搭建vue-cli的项目环境的时候也是踩了相当多的坑，特此写了一篇搭建环境的教程，每一步尽量详细解析。需要的朋友可以过来参考下，喜欢的可以点波赞，或者关注一下本人，希望可以帮到大家。 vue-cli脚手架的优势： 有一套成...
Vue2移动端项目开发流程
Mr.小灰狼_随笔
09-02 6239
Vue 项目开发流程 目录 移动端电影项目 1、项目效果 2、开发项目流程 3、开发环境 4、初始化项目 @4.5.19 版本Vue脚手架创建项目 UI 图形界面创建项目 Mac 电脑使用 Vue.cli4.X搭建项目流程 5、Vant 移动端组件库 5-1、安装 Vant 5-2、自动按需引入组件( 推荐 ！) 5-3、移动端样式设置（适配） 6、路由规划 7、网络请求 实战案例 :
【沉淀之华】强烈推荐后端同学使用的新版Vue框架速成之路: Vue + Vite + TypeScript + Antd~ 你没有玩过的全新版本!
浮-沉
12-26 985
这里是牺牲一定未知稳定性，因为后端童鞋写前端肯定不是为了TOC，否则就单独招聘了，所以哪怕技术框架新有些小毛病也没啥，但是带来的好处是，你可以不用那么多考虑版本兼容问题，因为越老或者越成熟的版本，向后兼容是有一定的问题，比如Vue2.x 和Vue3 区别还是很大的，至少Vue3有很多简化写法是非常提升效率，强烈推荐新手直接使用Vue3。拉一个成品项目改改，刚开始肯定能跑起来，但是久而久之，你不断叠加新的内容的时会越来越发现项目的维护变得不可控，这其实非常依赖项目设计之初原创作者的功力。
《vue开发教程&案例》
06-07
Vue CLI提供了丰富的脚手架选项，帮助开发者快速搭建项目骨架。 4. **Vue Router 教程**： - **简介**：Vue Router 教程教会开发者如何使用Vue Router进行页面路由管理，包括定义路由规则、导航守卫等高级特性。 5....
云班课项目：springboot+vue线上课堂互动教学系统
- Vue CLI：Vue的官方脚手架工具，用于快速构建和开发Vue项目。 - Vue Router：用于构建单页面应用的官方路由器。 - Vuex：用于在Vue.js中实现集中式状态（数据）管理的一个库，主要用于复杂的单页应用。 #### 3...
vue-cli3.0 脚手架搭建项目
HelloZHXA的博客
04-22 395
原文地址：https://www.cnblogs.com/qq1272850043/p/9812421.html 1.安装vue-cli 3.0 npm install -g @vue/cli # or yarn global add @vue/cli 安装成功后查看版本：vue -V(大写的V) 2.命令变化 vue create --help 用法：create [options] &l...
Vue-cli 脚手架搭建项目
Yuki_yuhan的博客
02-28 6779
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：1. 通过 @vue/cli 实现的交互式的项目脚手架。2. 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。3. 一个运行时依赖 (@vue/cli-service)，这个依赖：（1）可升级；（2）基于 webpack 构建····4. 一个丰富的官方插集合，集成了前端生态中最好的工具。5. 一套完全图形化的创建和管理 Vue.js 项目的用户界面。快速创建项目：命令行和图形化界面创建
Vue脚手架搭建项目
酸菜丶小子
07-27 5074
Vue脚手架搭建项目以及node版本切换
使用@vue/cli脚手架创建项目
hanq2016的博客
02-27 2550
使用@vue/cli脚手架创建项目 1、安装@vue/cli脚手架工具 npm install @vue/cli -g 2、查看安装后的vue版本 vue -V(大写) 3、创建项目 vue create vue-20210227 4、选择项目的配置 // 选择一个预设 Please pick a preset: Manually select features // 选择项目的特征 ? Check the features needed for your project: (*.
Vue创建脚手架项目
aa
04-06 961
vue脚手架创建项目要使用Vue脚手架创建一个新的项目，请按照以下步骤操作：确保你已经安装了Node.js和npm。安装Vue CLI（Vue的官方命令行工具）：这里我已经安装完了 从创建项目开始演示打开vscode终端（ctrl + ~）直接输入以下命令我这里创建到C盘上了，你可以切换到别的盘符此时屏幕会显示?选择你要创建vue2或者vue3项目，这里我选的是vue2（键盘上下按键就可以选择,完毕后按回车）此时屏幕会显示一些信息等待即可。
Vue-cli（Vue脚手架）vue脚手架搭建项目
胡迪警长的博客
08-27 1677
vue脚手架搭建 1.Vue.js是一套构建用户界面的渐进式框架。 2.Vue 只关注视图层，采用自底向上增量开发的设计。 3.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 前言 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供： 通过 @vue/cli 实现的交互式的项目脚手架 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发 一个运行时依赖 (@vue/cli-service)，该依赖： 可升
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值