【Vue】vue-cli 起步配置步骤

ZHOUXIN2022

已于 2022-09-27 11:43:53 修改

阅读量446

点赞数

分类专栏： vue 文章标签： vue.js

于 2022-09-27 11:36:23 首次发布

本文链接：https://blog.youkuaiyun.com/m0_56889397/article/details/127067080

版权

本文详细介绍了如何使用vue-cli进行起步配置，包括安装vue-cli、生成工程化Vue项目的过程，以及在创建项目时手动选择配置项的步骤，帮助初学者快速上手Vue开发。

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

文章目录

一、vue-cli 起步配置
- 1. 安装 vue-cli
- 2. 快速生成工程化 Vue 项目

一、vue-cli 起步配置

官网：https://cli.vuejs.org/zh/

1. 安装 vue-cli

vue-cli 是npm上的一个全局包，使用 npm install 命令即可安装：

npm install -g @vue/cli

2022092701
查看是否安装成功

C:\Users\huawei>vue -V
@vue/cli 5.0.8

2. 快速生成工程化 Vue 项目

（1）在终端下运行如下命令，创建指定名称的项目

vue create 项目的名称

（2）询问是否使用更快的淘宝镜像，这里选择Y
2022092702
（3）选择使用默认配置创建还是手动选择配置项
2022092703

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ZHOUXIN2022

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue2 入门-第一篇：Vue2 基础认知

无

04-04

675

Vue2 是一款在前端开发领域广泛应用的主流框架，主要用于构建交互式用户界面。它具有轻量级和渐进式的显著特点。轻量级意味着 Vue2 的核心库体积小巧，这使得在项目引入时不会给页面加载带来过多负担。无论是小型项目还是大型应用，都能快速集成并高效运行。渐进式则体现在其灵活性上。Vue2 可以从简单的视图渲染开始，逐步扩展到复杂的单页应用（SPA）。开发者可以根据项目需求，选择性地使用 Vue2 的特性，如组件化、状态管理等，而不必一开始就采用整套复杂的架构。

Vue-cli————快速入门（02）——Vue项目创建、启动、端口配置

JianChiGuoFuHao的博客

04-17

522

NPM是一个脚本，如果下载了这个脚本下方没有NPM这个界面，可以在VS Code时间线上方的资源管理器右边的三个点中选中，如果资源管理器中没有，这里建议重新打开VS Code（因为我的就是这样）输入项目名称——包管理器（由于使用的NodeJS环境所以选择npm）——初始化Git仓库给关掉(其他的都不用管)点击下一步——选择当前所使用的vue版本（我使用的2×）——第二个是选择语法检测规范直接选择第一个。点击下一步——（选择插件的功能）我只打开了Router，也就是vue当中的路由功能。

1 条评论您还未登录，请先登录后发表或查看评论

vue-cli启动流程

w1234567465的博客

08-20

1692

Vue-CLI最新详细安装教程【附安装包】

最新发布

2503_90209418的博客

03-29

638

它由Vue.js官方提供，旨在通过简单的命令行操作，帮助开发者快速搭建项目结构，包含项目所需的配置和依赖。Interface）是一个基于Vue.js框架的项目脚手架工具，用于快速生成Vue工程化项目的工具。变量【C:\Program Files\nodejs\如果存在，就新建剩下的两个变量即可。6.输入命令【npm run serve】，按下回车键启动项目。显示（v22.11.0）版本号则表示node.js安装成功。这里我以输入vue create demo为例。我这里以输入【cd demo】为例。

VueCLI：起步

qq_43005779的博客

06-18

129

VueCLI3的创建和起步一、创建CLI3项目 vue create 项目名每个选项的含义如上图为什么CLI3比CLI2的文件结构和配置更简单：这个组件帮助我们管理了很多包的版本 1.1 文件夹结构 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QVkp10VE-1592450741681)(C:\Users\93221\AppData\Roaming\Typora\typora-user-images\image-20200618010128782.png)]

vue cli 启动一个项目

Drizzlejj的博客

01-10

558

启动方式一：创建一个项目 vue create test 2022 创建流程把这个文件拖入到 VScode 中，找到 package_json,里面有安装的模块，运行脚本。运行完成以后如图，打开这个地址：http://localhost:8080/ 表示启动成功了。修改 src 文件下 App.vue 组件内容。修改 public文件下 index.html 首页内容结果如图： ...

vue cli的启动命令

qq_54640546的博客

06-01

482

3、vue ui。

Vue起步(无cli)的啊教程详解

10-17

总结来说，通过手动配置，我们可以了解每个构建步骤的作用，这有助于理解Vue应用的工作原理。虽然使用Vue CLI可以更快速地初始化项目，但这种无CLI的方法有助于加深对webpack和Vue本身的理解，对于开发者来说，这是...

（起步1）IDEA2016+VUE+WEBPACK+VUE-CLI 搭建

12-22

6870

IDEA+VUE+WEBPACK+VUE-CLI项目搭建目录 1）安装node.js 图1-1 1.1 npm全局环境变量配置 1.2 增加NOEDE_PATH(全局变量模块存放位置)（步骤图1-1正常，这步跳过） 2) IDEA安装Vue.js 3）IDEA必要设置 4）安装VUE-CLI 5）构建vue-cli项目

vue-first:vue起步

04-16

总的来说，"vue-first:vue起步"涵盖了从安装Vue到构建简单应用的基本步骤，包括理解Vue实例、模板语法、组件系统以及响应式数据绑定等核心概念。通过实践这些知识，初学者可以逐步掌握Vue.js，并为更深入的学习打下...

vue-cli 快速入门

m0_66357705的博客

06-11

1036

介绍：Vue-cli 是Vue官方提供一个脚手架，用于快速生成一个Vue的项目模板。Vue-cli提供了如下功能：统一的目录结构本地调试热部署单元测试集成打包上线依赖环境：NodeJS注。

Vue-Cli的简单入门使用

GODwhjx的博客

05-05

597

说明这篇文章是为了让我和组里同学快速上手，学会使用Vue-Cli的基本使用而写的，里面可能有许多错误，还请仔细识别，当然，欢迎指正。 Vue-Cli简单使用说明框架的创建创建代码安装时报错及解决办法安装完毕后的构建操作报错及解决办法如何使用框架启动基本使用文件夹说明一些原理和操作说明重定向复用代码的方法总结这里默认大家已经安装了Vue和Vue-Cli还有node.js(利用其npm工具)，这里不做详细说明框架的创建创建代码 vue init webpack 你想取的文件夹名来创建一个框架说明：

Vue CLI3 快速启动指南（一）

龙哥盟

07-25

894

Vue 最初是由一个人 Evan You 发起的项目。令人惊讶的是，它已经发展到今天这个地步：成为最受欢迎的前端框架之一，与由公司支持的 React 和 Angular 竞争。当然，这些并不是唯一的前端框架，但 Vue、React 和 Angular 这三者似乎是最受欢迎的，互联网上充斥着这些框架的比较和使用经验。比如，很常见的是看到一篇比较 Vue 和 React 的文章，或者一篇关于 Vue 比 Angular 更好的博客文章。

Vue安装脚手架CLI与创建、启动项目

weixin_60664694的博客

10-25

1419

Vue,CLI,脚手架，Vue脚手架，项目创建

vue项目完整搭建与启动

qq_42400124的博客

01-10

4728

vue项目完整搭建与启动

新手简单搭建vue-cli(脚手架)以及启动

NI_computer的博客

10-12

671

vue-cli脚手架可以帮助开发者快速搭建项目框架（文件结构），可以节省很多搭建时间，本文章将简单的介绍如何搭建一个vue-cli。前言：安装vue-cli整个过程是基于已经安装好node.js以及cnpm的基础上。可以在cmd命令窗口中先查看是否已经安装之后再进行接下来的操作。全局安装vue-cli 1.安装 window+r调出运行弹框，输入cmd调用命令窗口。输入： cnpm install @vue/cli -g 如果之前有下载过旧版本报错之后需要卸载旧版本之后重新下载。安装完成时没有红

vue-cli的使用

blog_pancc的博客

05-31

372

vue-cli中文官网: https://cli.vuejs.org/zh/的一个html页面,所有的功能与交互都在这个唯一的页面内完成。基于vue-cli快速生成工程化的vue项目。(1).到要创建项目的目录下,终端命令创建vue项目。(3).使用空格选择自己项目所需的预设。此时就可以快速的生成一个Vue项目了。(8).执行终端命令,启动服务。创建工程化的vue项目过程。1.vue-cli的安装。查看vue-cli版本号。2.vue-cli的使用。什么是vue-cli?(4).选择vue版本。

vue-cli（vue）项目的安装及开启

weixin_37881839的博客

08-18

686

1.安装需要的环境及vue-cli：【node.js】官方：http://nodejs.cn/download/ 下载安装；命令行输入：node -v，检查是否安装成功；【npm】官网安装node.js后，就已经自带npm；命令行输入：npm -v，检查是否安装成功；【cnpm】命令行输入：npm install -g cnpm --registry=https://registry.npm.taobao.org 命令行输入：cnpm -v，检查是否安装成功；【webp

Vue项目anti-boredom利用boredapi.com数据创新显示

在Vue项目中，通常会使用Vue CLI（命令行界面）来进行项目的创建和管理。 ### 文件信息知识点 - **项目名称**: “anti-boredom-master”是项目的名称或仓库名，表明开发者可能将项目版本化管理，并将文件存储在git...