Vue安装脚手架 vue-cli

news2025/4/17 8:31:29

Vue 脚手架是 Vue 官方提供的标准化开发工具(开发平台)

在安装脚手架之前我们还需要安装 Node.JS  和  npm 

全局安装 vue-cli 【初次安装】:

首先打开命令行 输入 npm install -g @vue/cli 再按回车键 安装脚手架

安装命令行:

npm install - g @vue / cli

 出现 added xxx packages in xxs 表示安装成功

 同时也可以输入 vue -V 查看当前脚手架的版本号

 查看命令:

vue - v

 注:vue-cli 只需要安装一次即可 以后再创建 vue 项目时 就不需要再重新安装了。

1.创建vue项目

首先我们要准备好一个目录 用于存放 Vue 项目 然后在目录中打开命令行。

在命令行中输入 vue create 项目名 再按回车键 创建 Vue 项目 项目名可以自定义

 创建项目名称:

vue create

 注:Vue 项目名称不允许使用大写字母 否则会出现以下报错 另外也不允许用中文名称 文件路径尽量也是英文的。

报错内容:

Invalid project name: "vueTest"
Warning: name can no longer contain capital letters

之后会提示你选择安装 vue2 或 vue3 版本 也可以选择自定义创建项目

 babel 指的是:由于浏览器只能识别 ES5 的标准,对 ES6 、TS、JSX 都不识别,而 babel 就是用来将这些浏览器不识别的内容转为 ES5 的代码,使浏览器能够正常运行。

 eslint 指的是:语法效验工具,用于检查代码是否符合开发规范

如果现在选择安装 vue2 或 vue3 的版本 则直接开始搭建项目 并且生成的项目中只会安装 babel 和 eslint 

 显示以下内容表示安装成功:

 如果选择自定义创建项目,那么还需要选择一些配置 :

 备注:按空格键可以选择或取消 按 a 键选择所有 按 i 键反选 按回车键 进入下一步 

Vue CLI v5.0.8
? 请选择配置项: 手动选择配置项
? 检查您的项目所需要的配置项:按 空格键 可以选择或取消,按 a 键选择所有,按 i 键反选,按 回车键 进入下一步。
 ( ) Babel                                   是否安装 语法编译器,将 ES6 => ES5
 ( ) TypeScript                              是否支持 typescript
 ( ) Progressive Web App (PWA) Support       是否支持 PWA
 ( ) Router                                   是否安装 vue-router
 ( ) Vuex                                      是否安装 vuex
 ( ) CSS Pre-processors             是否安装 CSS 预处理器
 ( ) Linter / Formatter                  是否安装 代码风格检查、格式效验
 ( ) Unit Testing                           是否安装 单元测试
 ( ) E2E Testing                           是否安装 E2E 测试

:接下来会根据你选择的配置项提示一些信息 选择的配置项不同 提示的信息也不同。

 原创作者:吴小糖

 创作时间: 2023.4.18

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/433679.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

多层LCP技术的毫米波段超宽带槽天线设计

1、引言 无线宽带通信的迅猛发展需要能传输高比特率的新型宽带天线。毫米波段是短距离高比特率无线通信的重要波段。所以近年来,毫米波段小型高性能的超宽带天线吸引了大量的研究人员在这方面进行研究工作。 天线设计的另一个重要趋势是集成天线的射频前端电路。在…

Linux/Unix编写sh脚本,设置开机自动启动脚本在linux下

1编写.sh脚本的基本步骤: 创建一个新的文本文件,使用一个文本编辑器,比如vi或nano,来编写脚本。你需要保存文件为.sh扩展名,以便让系统知道这是一个shell脚本文件。 touch myprogram.sh #!/bin/sh# 进入C程序所在目…

基于JAVA的网络通讯系统设计与实现

一般来说,聊天工具大多数由客户端程序和服务器程序,外加服务器端用于存放客户数据的数据库组成,本系统采用客户机/服务器架构模式,通过Java提供的Socket类来连接客户机和服务器并使客户机和服务器之间相互通信,由于聊天是多点对多…

HTB-Cascade

HTB-Cascade 信息收集立足s.smith -> arksvc使用脚本获取CascAudit.exe加密的密码明文修改IL指令获取 arksvc -> administrator 信息收集 查看smbclient。 rpcclient空密码连接并收集信息。 收集到用户列表,此外没有有意思的信息。 CascGuest arksvc s.smi…

Qt/QML编程学习之心得:二进制兼容、私有实现及Q_D/Q_Q指针(三)

QML画好或说描述好界面之后,实现部分通过C++实现,Qt采用了私有实现的设计模式解决了二进制兼容的问题。 二进制兼容问题描述: 现在有一个Widget, 包含一个私有成员变量m_geometry ,编译 Widget 并且发布为MyWidgetLib 1.0 。该应用程序名字为TestAPP,基于 Qt 4.9。 cla…

【Linux网络服务】Linux网络设置

一、查看网络配置 1.1ifconfig 1.2ip a 1.3什么是mtu 最大传输单元MTU,是指网络能够传输的最大数据包大小,以字节为单位。MTU的大小决定了发送端一次能够发送报文的最大字节数。如果MTU超过了接收端所能够承受的最大值,或者是超过了发送路径…

异步爬虫的原理和解析

我们知道爬虫是 IO 密集型任务,比如如果我们使用 requests 库来爬取某个站点的话,发出一个请求之后,程序必须要等待网站返回响应之后才能接着运行,而在等待响应的过程中,整个爬虫程序是一直在等待的,实际上…

焦虑症会出现哪些问题 什么因素导致的焦虑症

当说起焦虑症,大多数人想到的就是植物神经紊乱,确实,这两种疾病是非常容易混淆的,甚至很多时候植物神经紊乱都会当做焦虑症进行治疗,虽然这种疾病大多效果不会太理想。 你们知道什么是焦虑症吗? 很多人当出…

Android ProtoLog动态开启相关wm logging源码分析补充

Android ProtoLog动态开启相关wm logging源码分析补充 针对上一节已经清楚了相关的代码中怎么可以打印到logcat中,其实本质上还就是protologtool这个工具对代码中的所有ProtoLog进行了相关的替换成了具体实现,最后会条件判断输出到Slog中 本文就重点来看…

【池化方法】多示例学习池化(MIL pooling)公式与代码

一般的池化方法包括最大池化、平均池化、自适应池化与随机池化,这几天意外看到了多示例学习池化,感觉挺有意思的,记录一下。   论文   代码 1. 多示例学习(Multiple instance learning,MIL) 经典深度学…

梯度下降算法原理详解及MATLAB程序代码(最简单)

模型就是线性规划及线性规划的对偶理论,单纯形法以及它的实际应用:整数规划及其解法(分支定界法、割平面法匈牙利算法Q),目标规划,非线性规划动态规划、决策分析等等。 其它的一些优化算法。比如说一维搜索里面的黄金分割法、加步…

PostMan笔记(二)发送请求

1. 发送请求功能介绍 Postman是一款流行的API开发工具,它可以让开发人员更方便地测试、调试和使用API。其中,发送请求功能是Postman最为重要和基础的功能之一。 在Postman中,发送请求功能主要包括以下几个步骤: 选择请求方法&am…

数据分析时,进行数据建模该如何筛选关键特征?

1.为什么要做关键特征筛选? 在数据量与日俱增的时代,我们收集到的数据越来越多,能运用到数据分析挖掘的数据也逐渐丰富起来,但同时,我们也面临着如何从庞大的数据中筛选出与我们业务息息相关的数据。(大背景…

Java的对象克隆

本节我们会讨论 Cloneable 接口,这个接口指示一个类提供了一个安全的 clone() 方法。 Object 类提供的 clone() 方法是 “浅拷贝”,并没有克隆对象中引用的其他对象,原对象和克隆的对象仍然会共享一些信息。深拷贝指的是:在对象中…

微服务---一篇学完SpringCloud

SpringCloud 1.认识微服务 随着互联网行业的发展,对服务的要求也越来越高,服务架构也从单体架构逐渐演变为现在流行的微服务架构。这些架构之间有怎样的差别呢? 1.0.学习目标 了解微服务架构的优缺点 1.1.单体架构 单体架构&#xff1a…

java企业级信息系统开发学习笔记06基于xml配置方式使用Spring MVC

文章目录 一、学习目标二、Spring MVC概述1、MVC架构2、Spirng MVC3、使用Spring MVC的两种方式 三、基于xml配置与注解的方式使用Spring MVC(一)创建Maven项目(二)添加相关依赖(三)给项目添加Web功能&…

SpringMVC表格提交中文乱码和配置logback

最佳解决方案还是使用Spring提供的过滤器&#xff0c;将其配置到WEB.XML文件中&#xff1a; <filter><filter-name>characterEncodingFilter</filter-name><filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class&g…

nginx部署VUE项目

前言 目前公司的前端代码基本都是部署在nginx下&#xff0c;特此来记录一下 开发环境&#xff1a;window10 nginx环境搭建&#xff08;参考下方文章&#xff09; window环境安装 mac环境安装 本地我将nginx放置于F盘 前端项目打包 一个nginx服务下可能会放置多个前端包&…

echarts 折线图

Echarts 常用各类图表模板配置 注意&#xff1a; 这里主要就是基于各类图表&#xff0c;更多的使用 Echarts 的各类配置项&#xff1b; 以下代码都可以复制到 Echarts 官网&#xff0c;直接预览&#xff1b; 图标模板目录Echarts 常用各类图表模板配置一、简洁折线图二、环形图…

结构体的存储

由于要想知道结构体的大小&#xff0c;了解结构体是如何存储在内存中的 我们需要先了解一个知识点&#xff1a; 结构体内存对齐 1. 第一个成员在与结构体变量偏移量为0的地址处 (偏移量是某个字节相较于起始存储空间的相差字节数 例如第一个字节的偏移量是0&#xff0c;第二个…