Vue工程化开发和脚手架Vue CLI

devtools/2024/10/25 18:28:47/

目录

一、介绍

二、使用步骤

1. 全局安装(一次)

2.查看Vue版本

3.创建项目架子(项目名不能使用中文)

4.启动项目


一、介绍

Vue CLI是Vue官方提供的一个全局命令工具。可以帮助我们快速创建一个开发的Vue项目的标准化基础架子。(集成了webpack配置)

好处:

  1. 开箱即用,零配置
  2. 内置babel等工具
  3. 标准化

二、使用步骤

1. 全局安装(一次)

这个步骤只需要执行一次,如果之后要创建多个项目,就不需要执行这个了

以管理员身份打开命令行

有两种安装方式(自行选择其一即可)

  • yarn方式:yarn global add @vue/cli 
  • npm方式:npm i @vue/cli -g

如图

 

2.查看Vue版本

安装完成后,输入 vue --version,即可查看Vue版本,如图

3.创建项目架子(项目名不能使用中文)

打开你想让项目存放的目录,在空白处右击鼠标,选择”在终端打开“,如图

在命令行中输入 vue create project-name(项目名,不能用中文),如图

然后按enter回车,会弹出三个选项,选择第二个,并回车,如图

耐心等待后,创建成功

4.启动项目

进入我们刚刚创建的项目

输入npm run serve启动项目

项目启动成功:


http://www.ppmy.cn/devtools/33353.html

相关文章

美团面试(一面)

前言 给位小伙伴好,这里呢,分享一下最近一次美团的面试的面经,自己把面试的大多数内容通过博客的形式记录了下来,希望对各位有所帮助哦~ 一、项目篇 1、**对于自己的点餐小程序数据库表是怎么设计的 2、对于多个人下订单的问题…

二维码如何转短链接?提取二维码链接的简单方法

二维码的用途现在越来越多,通过生成二维码的方式来展示内容,可以快速提升用户获取内容的便捷性。但是在使用二维码的时候,经常会遇到不方便扫码获取内容的情况,那么可以通过访问二维码链接来查看内容,那么怎么获取二维…

机器学习的指标评价

之前在学校的小发明制作中,在终期答辩的时候,虽然整个项目的流程都答的很流畅。 在老师提问的过程中,当老师问我recall,precision,accuracy等指标是如何计算的,又能够表示模型的哪方面指标做得好。我听到这个问题的时候&#xff…

Amazon EKS创建EFS存储卷

1、创建Amazon EFS CSI 驱动程序 亚马逊相关文档 在 Select trusted entity(选择受信任的实体)页面上操作 在 Add permissions(添加权限)页面上筛选AmazonEFSCSIDriverPolicy操作 记得将AmazonEBSVolumePolicy添加到我们创建的…

【C++】模板初阶:泛型编程的起点

💞💞 前言 hello hello~ ,这里是大耳朵土土垚~💖💖 ,欢迎大家点赞🥳🥳关注💥💥收藏🌹🌹🌹 💥个人主页&#x…

VBA 拆分Excel中的各sheet为文件

一. 方式1 xlOpenXMLWorkbook:.xlsx格式的文件xlWorkbookDefault:当前Excel的格式(当前Excel是什么格式,被拆分出的sheet页所生成的文件就是什么格式)"\":可以使用Application.PathSeparator代替 Sub 拆分工作表() 初…

EPAI手绘建模APP图层、相机、灯光

④ 图层列表 1) 添加图层。 2) 列表显示场景中所有图层。初始时,默认有一个激活的图层。场景中所有模型都会添加到这个图层。 3) 第一次点击图层名称旁边的可见按钮,图层中所有模型都不可见,再次点击,图层中所有模型可见。 4)…

MapReduce笔记

实现分布式的作用: 通过并行处理提高能力通过复制机制进行容错处理与传感器等物理设备的分布相匹配通过隔离实现安全 难点: 许多并行的部件,他们之间有复杂的相互作用必须应对处理部分故障难以实现性能潜力 容错 1000多台服务器、庞大的网络…