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

已于 2024-05-08 11:09:32 修改
阅读量1.8k 收藏 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访问问题。
摘要由CSDN通过智能技术生成

目录

一、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】进入设置，点击系统-->系统信息

点击高级系统设置

点击高级-->环境变量

找到Path,点击编辑

将刚才安装node.js的路径复制粘贴

win+R查看是否安装成功  node -V 在cmd运行

2.安装npm管理器

npm包管理器，是集成在node中的，所以安装了node也就有了npm。有了npm就可以通过命令去下载资源库文件。

npm常见命令：

  1. npm install：用于安装项目所需的依赖包。
  2. npm install package-name：安装指定的包。
  3. npm uninstall package-name：卸载指定的包。
  4. npm list：列出项目中已安装的包。
  5. npm start：启动项目。
  6. npm run script-name：运行项目中的特定脚本。
  7. npm search package-name：搜索 NPM 仓库中的包。
  8. npm publish：发布自己开发的包。
  9. npm link：在本地创建包的链接。
  10. npm ls：列出项目的依赖树。
  11. npm update：更新项目中的包。
  12. npm outdated：检查已安装的包是否有可用的更新。

npm 安装md5报错，提示证书过期：

解决方案：

npm cache clean --force
npm config set strict-ssl false
npm install

以管理员身份运行cmd命令符窗口

使用管理员身份运行命令行，在命令行中，执行下指令：

npm config set prefix "安装路径"

查看安装路径：

npm config get prefix

3.安装淘宝镜像(cnpm)

看个人需求安装，安装成功后，可用cnpm 代替npm下载资源文件。

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

二、安装vue-cli

Vue CLi介绍

如已安装旧版本vue-cil，需先卸载再安装，否则vue-cil原始文件一直存在，版本号不会更新！！！

1. 版本号查看

首先查看一下版本号，看是否为 vue-cli 3.6 及以上版本。

vue -v

2.旧版本卸载

1、删除原文件；
2、保险起见，可再执行如下命令。

npm uninstall vue-cli -g

3.新版本安装

npm install -g @vue/cli

4.检查

vue --version

安装好后，便可以创建Vue项目了。

三、Vue项目的搭建

项目的创建【两种方式】

  • 使用命令vue ui可视化窗口进行创建
  • 使用vue create vue-projectName命令创建
📌进入Vue项目管理器

下面演示vue ui可视化窗口搭建脚手架：

在命令行中键入：

vue ui

等待项目创建完成！！！

★命令方式创建

1、全局安装Vue CLI： 如果你还没有安装Vue CLI，你可以通过npm或yarn来安装它。

使用npm安装：

npm install -g @vue/cli

将<project-name>替换为你的项目名称。

2、创建新项目： 使用Vue CLI创建一个新项目，运行以下命令：

vue create <project-name>

3、选择预设： 在创建过程中，Vue CLI会询问你几个问题，包括是否选择默认预设（包含一些基本的配置和依赖），或者手动选择特性。

4、安装依赖并启动项目： 项目创建完成后，进入项目目录并安装依赖：

cd <project-name> npm install

安装完依赖后，你可以启动开发服务器：

npm run serve

若localhost拒绝访问怎么办？

打开电脑的控制面板->

这样我们就可以成功访问localhost服务器啦！！！

㏒浅忆
关注
使用 Vue-cli 脚手架创建项目
Sun_blog
07-14 2313
文章目录使用Vue CLI创建项目第一步，安装Node.js第二步，进入命令行第三步，安装脚手架工具第四步，切换目录第五步，创建项目总结 使用Vue CLI创建项目 本次以WIN10系统为例，其他系统略有差异。 第一步，安装Node.js Node.js官网 下载左侧的版本，根据提示安装即可。没什么特殊注意的情况，这里就不做演示了，安装过的同学可以跳过这一步。 第二步，进入命令行 按下键盘 WIN+R 键，输入 cmd 回车进入命令行。 安装过的同学，可以输入node -v 查看 node.js 的
[VUE] Vue-CLI的安装、使用及环境配置（超详细）
热门推荐
leo的博客
11-20 4万+
Vue-CLI的安装、使用及环境配置的详细步骤（超详细）
Vue-CLI最新详细安装教程【附安装包】
最新发布
ZHOUPUYU的博客
11-28 4714
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-cli3.0 脚手架搭建项目
HelloZHXA的博客
04-22 377
原文地址：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 6732
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 5014
Vue脚手架搭建项目以及node版本切换
使用@vue/cli脚手架创建项目
hanq2016的博客
02-27 2516
使用@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-Cli脚手架（超详细）
2401_84091628的博客
04-17 1377
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
vuecli脚手架的搭建
IT12345666的博客
05-20 654
安装nodejs 并搭建环境 去nodejs的官网进行下载 和jdk的环境配置一样： 打开电脑高级系统管理： 配置新建 NODEHOME 刚才拷贝的路径 并在path里面添加 %NODEHOME%\bin 打开cmd 输入 npm -version 出现这个 就证明node 环境变量配置成功了！ 安装vue项目 请严格按照步骤来 避免踩坑：搭建完环境变量之后 在全局中进行安装依赖： 前面请在桌面上直接打开cmd进行安装： 首先进行nodejs的初始化 npm init -y 在您的计
Vue创建脚手架项目
aa
04-06 903
vue脚手架创建项目要使用Vue脚手架创建一个新的项目，请按照以下步骤操作：确保你已经安装了Node.js和npm。安装Vue CLI（Vue的官方命令行工具）：这里我已经安装完了 从创建项目开始演示打开vscode终端（ctrl + ~）直接输入以下命令我这里创建到C盘上了，你可以切换到别的盘符此时屏幕会显示?选择你要创建vue2或者vue3项目，这里我选的是vue2（键盘上下按键就可以选择,完毕后按回车）此时屏幕会显示一些信息等待即可。
Vue-CLI 快速搭建
一夜星尘
10-06 5617
1.首先安装node.js 2.安装完成node.js后，打开cmd输入如下命令： // An highlighted block var foo = 'bar';
vue 脚手架创建
qq_43826626的博客
04-22 1405
脚手架是什么呢，就是vue自动创建脚手架的项目模板，用于搭建项目的整体骨架，就比如后端开发时，咱们可以创建一个空项目，一步步创建为mvc项目，但是vs封装了mvc的框架，我们可以直接生成整体框架，其中包括基础包和一些重要文件，脚手架的创建也是同样的效果。
vue Cli脚手架搭建项目
zhaoyin1994的博客
05-17 313
Vue Cli vue脚手架 是vue 官方提供的一个全局命令工具可以帮助我们快速创建一个开发的vue项目的标准化基础架子，集成了webpack配置，统一配置。
vue项目实战（一）之vue-cli脚手架搭建项目
abcwanglinyong的博客
10-17 4761
首先假如你已经安装了node和npm,如果没有的话自己百度安装一下。 如果感觉npm下载速度慢，可以使用淘宝镜像cnpm,链接地址： http://npm.taobao.org/ 安装cnpm 方式一： npm install -g cnpm --registry=https://registry.npm.taobao.org 方式二： alias cnpm="npm --...
Vue脚手架搭建
Fanbin168的专栏
12-25 2186
我们使用vue是建立在node的命令 第一步：安装node.js 安装完毕后查看版本号， node-v 出现版本号及表示安装成功，也可以查看npm版本 npm -v 第二步： node 切换到淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 第三步：安装vue客户端 vue cli的包名称由vue-cli改成了@vue/cli 如果你再以前已经安装了vue-cli 那么你需要先将老版本卸载。 ...
vue脚手架（cli）项目搭建
dawfwafaew的博客
02-26 416
vue脚手架（cli）项目搭建，保姆教程
搭建vue脚手架---vue-cli
weixin_34087503的博客
03-04 78
vue-cli作为一款mvvm框架语言(vue)的脚手架，集成了webpack环境及主要依赖，对于项目的搭建、打包、维护管理等都非常方便快捷。我们在开发项目时尤其需要这样一个快速构建项目的工具。 以下是使用vue脚手架，vue-cli搭建开发环境，进行项目的基础代码结构搭建，做一些项目初始化的工作。 一：准备环境和工具 ...
使用vue-cli脚手架创建项目
hanq2016的博客
02-27 1524
1、基于webpack创建项目的方式，是vue脚手架2系列 2、安装webpack npm install webpack webpack-cli -g webpack -v(小写) 3、安装vue-cli npm install vue-cli -g vue -V(大写的) 4、使用终端切换到工作空间目录 C:\Users\root>cd /d F:\web_workspace\web20 5、使用脚手架创建项目 vue init webpack vue-20210226 ?
Vue-cli（脚手架）的创建
计算机硕士的博客
04-26 3234
Vue-cli（脚手架）的创建。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值