如何创建一个Vue项目(Vue2脚手架的安装)

vue-cli2,vue-cli3(vue脚手架)超详细教程 文章目录 vue-cli脚手架 Node.js环境安装 vue-cli2的安装 npm,cnpm介绍 安装脚手架 用脚手架生成项目目录 vue-cli3的安装 使用vue-cli3图形界面 vue-cli脚手架 顾名思义,脚手架就是用来协助,配合,帮助构建一个项目的。使用vue-cli仅需5分钟就可以搭建一个完整的Vue.js应用,相较于人工操作,具有安全,高效的特点。 vue-cli与平台无关,功能更加齐全。无论是预编译模板,注入依赖,还是模拟生产环境等功能,vue-cli都具 阅读详情
AI摘要

本文详细介绍了如何从零开始使用Vue CLI创建项目,包括安装Node.js和vue-cli,选择项目特性,以及启动项目。在创建过程中,可以选择Vue版本、路由、状态管理等组件,并通过npm run serve启动开发服务器。最后展示了项目初始页面的运行效果。

一 、前期准备

脚手架是什么?

我们创建vue项目,可以借助脚手架工具,脚手架是一套已经包含核心功能和标准文件夹结构的半成品项目,它具有标准化!而且极其便于协作,能够使我们降低学习成本,所有的vue项目几乎都是在脚手架的基础上开发的

初始化vue项目之前需要在你的电脑里安装一些vue的依赖

1.安装node.js ,

在百度搜索node.js,电脑需要安装node.js,需要下载长期维护版(稳定),按提示安装

① 安装完之后 检查是否安装成功,在cmd 命令行窗口输入 node -v 出现版本号说明安装成功 

2.安装vue-cli 

① 在cmd 命令行窗口输入 npm install --global vue-cli (vue-cli是创建脚手架的工具)

② 安装完成之后,输入 vue -V 查看版本号 出现版本号说明安装成功


二 、通过命令行创建vue项目

你可以在任意文件夹下通过cmd 命令行创建项目

首先创建一个test测试文件夹

然后在文件内的地址栏输入cmd 打开命令行

如图:

打开之后是这个样子的 

重点来了,通过命令创建自己的vue项目  在命令行输入    vue create my_app  (my_app是项目名称,自定义的,叫什么都行)

输入命令之后会出现 我们选择第三个选项 > Manually select features 这个选项可以让我们自己选择安装哪些组件

之后会出现,这个是选择要在项目里安装哪些东西 , 我们可以选择  (上下键选择  空格确定)

Choose Vue version 是选择vue版本

Router 路由 控制页面切换

Vuex 全局状态管理

 CSS Pre-processors css 预处理器

Progressive Web App (PWA) Support 这个可选可不选 (说的不对的地方 欢迎评论指教)

接着出现选择版本 我们选择2.x 这里我们发现 vue2 和vue3项目创建方法是一样  回车确定

这里的是问选择history模式的路由还是mode模式 ,可以看到选项里面大大的Y 直接敲回车默认Y

这里是选择哪一种css预处理器,sass和less都差不多 没有用过css 预处理器的可以去搜一下 ,它可以帮助我们css结构更加清晰,便于维护

这里直接回车看下一个选项

这里是选择我们项目的依赖信息存放到哪一个文件

我们当然选择 package.json 把所有的依赖信息都存放在一个文件中 然后回车

这里大概的意思是 是否把我们这次创建项目的配置保存起来,如果保存起来,下次新建项目的时候就会看到这个记录,不用再重新配置

官方选择项里有个大大的N,所以我们当然是直接敲回车  (你也可以保存起来)

让它跑一会

最后是这个样子的

打开刚才的测试文件夹,会发现我们刚刚创建好的项目

用代码编辑器打开这个项目,接着用鼠标右键点击src文件夹 选择集成终端中打开 在命令行输入npm run serve 敲回车

 项目启动之后

 最后就可以看到我们项目的初始页面


以上是创建vue项目的全部内容,如有遗漏的,欢迎评论补充,

 这个二维码是一个前端交流群,欢迎进群讨论前端技术

0到1搭建前端Vue2项目 1.1 打开 cmd 命令提示符进入到存放项目的目录,在命令提示符上使用 “ vue create 项目名” 命令创建项目。1.2 之后可以选择 vue 版本,虽然现在 vue2 已经停更,但是还是值得学习的。1.3 等待初始化 vue 脚手架后,会出现蓝色的两条命令,依次执行它们即可启动 vue。vue脚手架启动成功后会出现蓝色的两个网址,无论是哪个网址都可以打开页面。1.4 浏览器输入网址后界面如下。 阅读详情

相关推荐

Vue教程|搭建vue项目|Vue-CLI2.x 模板脚手架

通过实战方式,介绍基于Vue-CLI2.x 模板脚手架搭建vue2.x项目的完整构建过程,从环境搭建、脚手架搭建到脚手架构建项目,另外分享了工程结构各文件的具体用途,方便大家了解和掌握

baidu_21035953的博客 1795

用脚手架新建一个vue2的项目

2、在项目新建路径的外层文件夹下打开cmd,输入vue create 项目名(需要安装node,node安装完成后,可用node -v查看安装版本。项目名不能包含大写母,否则会提示以下错误。注意此时的v是大写的V。

sinat_34896766的博客 1627

从零搭建企业网络:使用Packet Tracer模拟多区域OSPF组网全过程

本文通过Cisco Packet Tracer模拟,详细演示了从零搭建一个典型企业多区域OSPF网络的完整流程。内容涵盖网络拓扑规划、IP地址设计、多区域划分原理,并提供了从设备初始化、接口配置到OSPF多区域核心配置与验证的详细步骤。文章旨在帮助网络学习者与IT支持人员通过动手实验,将理论知识转化为实际的配置与排障能力。

day7的博客 1030

创建一个vue2的脚手架项目(超详细)

vue,vue2,脚手架,目录,npm,node,vue项目

adminsir0的博客 9636

PaddleOCR GPU部署:从环境配置到避坑实战指南

本文详细介绍了PaddleOCR GPU部署的全过程,从环境配置到避坑实战指南。通过分析常见的部署失败原因,提供硬件兼容性自查、软件环境精配方案以及路径配置的解决方案,帮助用户高效完成GPU加速的OCR任务部署,避免90%的常见错误。

weixin_30839881的博客 417

xsens IMU配置

1.安装驱动 sudo apt-get update sudo apt-get install ros-kinetic-xsens-driver 2.配置IMU 设置输出四元数,加速度、角速度、地磁 cd /opt/ros/kinetic/lib/xsens_driver python mtdevice.py --configure "oq,aa,wr,mf" 3.启动IMU roslaunch xsens_driver xsens_driver.launch 转(https://www.cnblo

qq_41585680的博客 2325

创建vue2项目

创建vue2项目

桎梏的博客 2万+

【Burp入门第三十一篇】Burp+SwitchyOmega实现本地localhost代理

在部分情况下(如本地靶场),当我们需要在Burp中查看、修改本地流量包的时候,按以下三个配置是不能得到本地流量包的。

等风来 3214

如何安装Vue2脚手架,并使用脚手架创建一个项目?解析创建项目各个文件的作用,内容超详细,通俗易懂。

首先确保您的电脑上下载过Node.js,这样才可以使用npm进行下载。如果没有安装过请先自行安装node.js 1. 打开命令终端 右键windows窗口标志,找到Windows终端(管理员),点击运行 2. 输入指令npm i @vue/cli -g 稍等片刻等待下载完成。 3. 待下载完成后,输入vue --v查看是否成功安装 ps: 我在安装时出现报错:Vue : 无法加载文件 C:\Users\Asiger\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运

Asigerg的博客 593

MediaPipe 教程:从安装到应用-全网最全

MediaPipe是Google推出的开源框架,专为构建机器学习管道设计,可以高效处理视频、音频等时间序列数据。本文教程从安装到应用逐步讲解: 安装步骤简单,只需通过pip安装mediapipe包并验证版本; 重点演示人体姿态检测功能,可识别33个身体关键点; 提供基础代码实现,包括视频捕获、关键点检测与可视化; 强调模块化开发,将功能封装成类以提高代码复用性。 教程适合初学者,通过清晰指引和实用代码示例,帮助快速实现计算机视觉应用。

FJN110的博客 1563

突破Cloudflare 5秒盾:Python爬虫+GPT分析JS混淆,零基础也能爬

传统突破Cloudflare 5秒盾的门槛极高,需要精通JS逆向、浏览器指纹伪造、行为模拟,而本文的“Playwright+GPT”方案,彻底降低了门槛——无需懂逆向、无需手动改指纹、无需写复杂JS代码,只需3步就能突破大部分网站的防护。低门槛:新手1小时内就能上手,无需逆向工程知识;高成功率:覆盖80%+的普通防护网站,15%的中等防护网站;易扩展:适配不同类型网站,可结合代理、打码平台升级为高可用系统。

专注于Python爬虫开发,分享爬虫技巧、项目实战与反爬经验,使用Scrapy、BeautifulSoup等工具,解决数据抓取难题。 1163

搭建Vue2脚手架

1.配置npm淘宝镜像 查看是否配置成功 2.下载、安装webpack ②下载完毕输入 ③webpack-cli -v检查版本号,安装成功 1.若此前已经安装过脚手架,可以跳过第一步。 若此前没有安装过脚手架: 2.在合适的文件位置嵌入cmd 打开并输入命令创建脚手架 3.创建脚手架时选择vue的版本为vue2 在创建脚手架的文件目录下开启服务 开启成功 搭建成功...

qq_53152029的博客 3869

Open3D 计算点云模型的表面积和体积【2025最新版】

python编程实现 计算点云模型的表面积和体积,博客长期更新,本文最近一次更新时间为:2025年4月4日。

点云侠的博客 13万+

Vue创建一个简单的脚手架示例

Vue简单创建一个脚手架实例

hssjsh的博客 212

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

Vue2.0创建一个新项目

win+R输入cmd 打开终端等待脚手架安装完成。

胖儿の博客 571

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

vue2.0项目的创建步骤

vue2.0项目包创建

wwwwssmas的博客 813

从零开始创建一个Vue2项目

Vue CLI是一个快速创建vue工程化目录的工具,底层使用的是webpack,webpack是一个打包工具,它的职能就是把vue的语法,最终打包成js css 和html,后面还会学到vite打包工具,更先进,vue3项目一般就不会使用 Vue CLI构建了,因为只要使用Vue CLI,底层就还是webpack打包工具,一般vue3我们还是更倾向于vite打包工具,这是后话。下载包默认是从外网下载的,速度很慢,所以要设置国内镜像源,下载速度就很快了。选择如下,按空格键选择,按上下键调序,按回车。

前端工程师 · Vue 生态深耕者,专注多端与工程化 926

基于脚手架创建vue工程

然后回让你选择一个版本 我这边选的vue2,上下选择 选好后按Enter;1.在一个没有中文的路径里打开命令行 输入vue create 项目名称。安装脚手架的命令:npm i @vue/cli -g。忘了自己有没有安装可以通过在黑窗口输入命令看一下。npm:javascript的包管理器。node.js:前端项目的运行环境。这里出现版本号就说明已经安装了。vue cli:项目脚手架。

2301_79106424的博客 573

vue 创建_vue基本创建步骤

由于vue3今年9月份刚刚发布,一系列周边功能还不是特别完善,所以今天我们还是使用vue2的 cli 的3、4版第一步 首先在全局安装vue的脚手架 npm install -g @vue/cli 安装完之后先检测一下版本 vue -V第二步 创建项目 vue ui 创建项目项目名我一般选择手动配置依赖,到时候用到什么下什么就好是否预设开启项目...

weixin_35486751的博客 110

创建vue2.0项目教程

1.首先需要node环境,有node环境才能npm node官网:https://nodejs.org/zh-cn/ 建议下载稳定版 2.安装node后可以到命令提示符面板查看node的版本 node -v npm -v 有版本代表安装成功了 3.启动终端开始安装vue-cli全局脚手架 -g全局的意思 npm install vue-cli -g 4.安装vue-cli成功后,通过cd命令进入你想放置项目的文件夹 //react-demo 空文件夹 放项目的 cd vue-demo 5.在终

陈序员的博客 499

Vue开发学习记录---通过脚手架创建hello-world项目

通过可以了解到,是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,可以帮助你高效地开发用户界面。概念什么的就还是直接看文档来的比较直接一些,这里还是用一些demo来记录一下,初步学习Vue的成果。

sjqkg21的博客 528

一分钟搭建Vue脚手架

1.安装脚手架工具——vue-cli 打开cmd 安装 cdm输入: npm i vue-cli@2.9.6 -g vue-cli最新是3,vue-cli安装2点几 2.全局安装之后就可以使用命令 vue -V可以查看安装的版本 3.需要生成项目目录 CMD输入: vue init webpack <项目名称> 项目名称自取,脚手架会生成同名的目录 ...

paopaosama的博客 228

创建脚手架vue-cli

然后选脚手架的配置(例配置vue2的脚手架)(创建一个以vue-cli为名字的脚手架)这样一个脚手架就创建好了。

weixin_45096939的博客 197

创建vue项目

先安装脚手架 npm install vue-cli -g

weixin_46483435的博客 611

创建node10.16.0+vue2项目

1、安装node10.16.0版本。

@ 535
下一篇: Vue2 搜索框搜索表格内容 展示数据(ElementUI)
王二哥er
博客等级 码龄6年 14粉丝 5原创
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值