vue学习日记（使用vite和vue-cli3.x新建项目并运行）

最新推荐文章于 2026-04-21 16:30:13 发布
原创 最新推荐文章于 2026-04-21 16:30:13 发布 · 356 阅读 · 4 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#vue.js #学习 #前端

文章目录

前言

前两天安装了前端的环境之后就忙的起飞，马上周末了，再次拾起来这零零散散的vue学习，今天想成功新建和运行起来一个vue项目
如果需要查看vue前期环境搭建工作的可以查看我的上一篇博客
vue学习日记day-1（安装node和vue）

一、使用vue-cli3.x创建

1.打开你要创建vue项目的文件夹，在路径前输入cmd 按回车键进入命令窗口

在这里插入图片描述

2.输入命令

vue create 【项目名】

在这里插入图片描述
直接选择创建vue3项目按下回车即可；出现此窗口即算是创建成功；
在这里插入图片描述

3.运行

在刚刚结束的命令行窗口内 进入你创建的项目内，再使用npm run serve命令即可开始运行
在这里插入图片描述
出现此情况证明启动成功，在浏览器输入地址即可打开
在这里插入图片描述

二、使用npm init vue@latest 创建项目，基于vite打包

1.参照1的方式在你要创建项目的目录打开命令行窗口，输入

npm init vue@latest

按提示输入项目名称和其他配置信息即可创建成功，
在这里插入图片描述
按以上提示进行操作进行成功运行起来vue

Vue-Cli - Vue 脚手架的创建 以及 目录结构说明
CYK_byte的博客
10-18 3546
f）这个问你是否进行单词校验，校验出错会有红色波浪线. 这里不需要，因为你可能会写很多特殊字符，因此输入 n 回车即可.之后他就会去构建项目了，如果此时出现了如下错误，说明你权限不够，要使用管理员的方式打开命令行，再执行上述步骤.b）接下来会问你项目描述是否叫（默认）："A Vue.js project". 如果不想改，直接回车即可.d）接下来会问你，是否采用运行 + 编译的方式，实际上就是是否要热部署的意思，直接回车即可.h）接下来问你是否要使用 npm 来管理项目，这个肯定是需要的，直接回车即可.
Vue-CLI详解
输入技术、输出想法
04-28 2万+
Vue-CLI详解Vue-CLI详解Vue CLICLI是什么意思?拉取 2.x 模板 (旧版本)Vue CLI2创建项目目录结构详解Runtime-Compiler和Runtime-only的区别render和templateVue程序运行过程render函数的使用Vue CLI3创建vue-cli3目录结构详解配置去哪里了？修改配置箭头函数基础语法 Vue-CLI详解 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI;如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue C
Vue 命令行工具 Vue-CLI 详解
wgchen
04-21 3万+
阅读目录阐述vue全家桶vue-cliVue CLI 的安装① 默认安装 vue/cli 脚手架 3② 默认安装失败，解决mode版本问题③ nvm下载太慢问题解决④ 安装 Node ^12.0.0⑤ 从新安装 VueCli 脚手架 3④ 拉取 2.x 模板 (旧版本)⑤ 安装vue指定版本⑥ 博主node版本初始化项目① vue init命令讲解② 项目初始化③ 目录结构详解④ 运行项目node 安装适合小白1 去node官网下载2 下载完成后双击安装包，跳出安装弹窗，点击Next从新来过vue-cli
Vue3——Vue CLI
最新发布
吴声子夜歌的博客
04-21 479
Vue CLI是一个基于Vue.js进行快速开发的完整系统。新版本的Vue CLI的包名由原来的vue-cli改成了@vue/cli。Vue CLI有几个独立的部分，下面分别进行介绍。CLICLI是全局安装的npm包，提供了一些vue命令。通过vuecreate命令可以快速搭建一个新项目，通过vue serve命令可以构建新想法的原型，通过vue ui命令可以使用图形化界面来管理项目。CLI服务。
学习笔记|Vue入门笔记—脚手架vue-cli的详细安装和使用
Jum的博客
03-18 3100
Vue-cli是vue的一个脚手架工具，主要作用：目录结构、本地调试、代码部署、热加载、单元测试。
Vue CLI
m0_48670609的博客
04-26 2125
Vue CLI 简介，Vue CLI 安装，Vue CLI 项目搭建，Vue CLI 目录与文件，Vue CLI 打包与部署
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 学习(八、Vue-CLI 使用和项目结构介绍)
Ares5k
01-05 3404
Vue-CLI 新老版本的使用和目录结构
Vue CLI的详细介绍与讲解
zayyo的博客
07-03 1万+
如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI。 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI 使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作，那无以效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架。Vue CLI是一个官方发布 vue.js 项目脚手架。使用 vue
vue-cli
qq_33879627的博客
09-28 621
（十六）vue-cli 16.1 vue-cli起步 16.1.1 什么是vue-cli Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供： 通过 @vue/cli 搭建交互式的项目脚手架。 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。 一个运行时依赖 (@vue/cli-service)，该依赖： 可升级； 基于 webpack 构建，并带有合理的默认配置； 可以通过项目内的配置文件进行配置； 可以通过插件进行扩展。 一
脚手架vue-cli创建Vue项目手把手教学
H524268015wsw的博客
11-18 4925
Default是默认选择（vue2,vue3）,Manually select features 是自己手动选择，可以选择你需要的。通常都是自己手动选择,键盘上下键选择，enter确定。用vue -V检查版本，如果出现“vue” 不是内部或外部命令，也不是可运行的程序或批处理文件，就说明你电脑没有安装vue。像这种要选择yes还是no的一般情况下都是选择no，可以避免下次写特殊项目不好配置。再然后也是一些选项，按照翻译选择自己需要的，我这里选的倒数第二个。选择自己需要的以后，按下回车再次选择自己需要的。
什么是vue_cli(转载)
zy103118的博客
05-31 1万+
版权声明：本文为CSDN博主「知其黑、受其白」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/weiguang102/article/details/124224766 vue-cli vue-cli 就是快速搭建一个 vue 项目的脚手架工具。 VueCLI是一个官方发布vue.js项目脚手架，使用 VueCLI 可以快速搭建 vue 开发环境，以及对应的 webpack 配置。 1、CLI 是 Command
Vue-cli（基于cli如何创建项目）最详细教程，手把手教学
分享JAVA/ Python/ Ts学习路上的一些笔记，不足之处多多见谅。
06-14 5950
Vue-cli（基于cli如何创建项目）最详细教程，手把手教学
vue-cli的使用
qq_38345899的博客
01-15 2704
vue-cli的使用环境搭建以及项目创建Node.js环境安装下载安装配置Vue-cli安装NPMCNPM安装vue-cli创建vue-cli项目创建过程参数说明:使用vue-cli开发项目结构说明项目主结构文件说明node_modulessrc目录文件static文件目录地址栏网址去除地址栏”#”组件安装与卸载安装卸载如何导入vue-cli项目Dos命令行使用编辑软件使用Vue-cli—知识点R...
03.Vue CLI项目创建详细指南
yk_dflkg的博客
07-02 3277
Vue CLI（Command Line Interface）是Vue.js官方提供的标准化命令行工具，用于快速搭建Vue.js项目。它提供了一整套完整的开发环境配置，包括项目结构、构建工具、开发服务器、测试框架等，让开发者可以专注于业务逻辑的开发。
安装vue-cli&使用vue-cli搭建项目
qq_64001795的博客
09-26 5762
vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板。xxx 为自己创建项目的名称必须先安装vue,vue-cli，webpack，node等一些必要的环境*.vue 文件，是一个自定义的文件类型，用类似HTML的语法描述一个Vue组件。每个.vue文件包含三种类型的顶级语言块 , 和 。这三个部分分别代表了 html,js,css。
脚手架(vue-cli)的安装详细教程
weixin_62268437的博客
07-28 5471
这时候就会出现对应的版本，如果你能终端打印出来这个，说明已经成功一半了，但是这个版本太高了，有时候运行项目的时候会报错，此时我们需要把版本降低，那么如何把版本降低呢？可以把这个链接复制到浏览器回车，也可以左手按住ctrl，右手鼠标点击，他会发生页面跳转，一般是这样子的，但是不一定所有电脑都行，但是前者肯定是可以的！此时你会发现你可能卡到一个地方很久，一直没有动 ，这时候我们可以考虑去切换淘宝镜像或者阿里镜像，这样子下载会快许多！选择要安装的位置，不是必须要安装到C盘中，想安装到哪里就安装到哪里！
vueCli项目实战（超详细保姆级教学）
SuperTun的博客
01-10 3061
vueCLi项目实战（超详细保姆级教学）
[VUE] Vue-CLI的安装、使用及环境配置（超详细）
热门推荐
leo的博客
11-20 4万+
Vue-CLI的安装、使用及环境配置的详细步骤（超详细）
【Vue系列】Vue-cli（Vue脚手架）详细教程
pakerder的博客
11-01 2389
如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试..本篇文章全面了解Vue中的脚手架用法及总结。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值