快速上手Vue开发:新一代Vue官方脚手架(create-vue)

news2024/9/21 11:09:10

文章目录

  • 一、简介
  • 二、创建一个 Vue 应用
    • 1、前提条件
    • 2、安装命令
    • 3、可选插件

一、简介

  create-vue 是 Vue3 的专用脚手架,使用 vite 创建 Vue3 的项目,也可以选择安装需要的各种插件,使用更简单。

二、创建一个 Vue 应用

官网地址:https://cn.vuejs.org/guide/quick-start.html

1、前提条件

  • 熟悉命令行
  • 已安装 16.0 或更高版本的 Node.js

2、安装命令

npm init vue@latest

  这一指令将会安装并执行 create-vue,它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示,如下。

3、可选插件

选项说明
✔ Project name: … 项目名称
✔ Add TypeScript? … No / YesTypeScript的支持
✔ Add JSX Support? … No / YesJSX的支持
✔ Add Vue Router for Single Page Application development? … No / Yes支持路由
✔ Add Pinia for state management? … No / Yes状态管理
✔ Add Vitest for Unit testing? … No / YesVitest测试框架
✔ Add Cypress for both Unit and End-to-End testing? … No / YesCypress E2E测试工具
✔ Add ESLint for code quality? … No / YesESLint代码格式化规范检查
✔ Add Prettier for code formatting? … No / YesPrettier代码格式化

  如果不确定是否要开启某个功能,你可以直接按下回车键选择 No。在项目被创建后,通过以下步骤安装依赖并启动开发服务器.

> cd <your-project-name>
> npm install
> npm run dev

你现在应该已经运行起来了你的第一个 Vue 项目!
在这里插入图片描述

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

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

相关文章

【云原生】Docker 详解(一):从虚拟机到容器

Docker 详解&#xff08;一&#xff09;&#xff1a;从虚拟机到容器 1.虚拟化 要解释清楚 Docker&#xff0c;首先要解释清楚 容器&#xff08;Container&#xff09;的概念。要解释容器的话&#xff0c;就需要从操作系统说起。操作系统太底层&#xff0c;细说的话一两本书都说…

.netcore grpc一元方法详解

一、grpc服务端搭建 打开visual studio--》新建项目--》创建ASP.NET Core gRPC服务。 这里我是用的.NET 6.0做为底层框架&#xff0c;使用该框架支持grpc的功能更全面。令注使用nuget包Grpc.AspNetCore这里我使用的是2.40.0版本。 // 创建dollar.proto文件syntax "prot…

【Linux的开胃小菜】Linux系统安装后初始化配置操作

我们刚接手一台刚安装好服务器系统之后&#xff0c;可以对系统进行一些基础优化&#xff1a; 常规设定&#xff1a; centos: 1.关闭 iptables 2.关闭 selinux 3.设定 ChronyUbuntu: 4. /etc/security/limits.conf 5. /etc/sysctl.conf1.首先使用国内阿里云的yum源&#xff08…

企业微信 企业内部开发 学习笔记

官方文档 文档 术语介绍 引入pom <dependency><groupId>com.github.binarywang</groupId><artifactId>wx-java-cp-spring-boot-starter</artifactId><version>4.5.3.B</version></dependency>核心代码 推送消息 final WxCp…

基于Crow的C++的WebSocket服务器

基于Crow的C的WebSocket服务器 一、WebSocket 1.1 什么是WebSocket WebSocket 是一种持久化的通讯协议。 很多网站为了实现推送技术&#xff0c;所用的技术都是轮询&#xff0c;这种解决方案是指由浏览器每隔一段时间向服务器发出 HTTP 请求&#xff0c;然后服务器返回最新的…

【BASH】回顾与知识点梳理(十七)

【BASH】回顾与知识点梳理 十七 十七. 什么是 Shell scripts17.1 干嘛学习 shell scripts自动化管理的重要依据追踪与管理系统的重要工作简单入侵检测功能连续指令单一化简易的数据处理跨平台支持与学习历程较短 17.2 第一支 script 的撰写与执行撰写第一支 script 17.3 撰写 s…

NACOS2.0本地单机版

问题 由于某些原因服务器上面的nacos临时不能使用了&#xff0c;需要开发每个人在本机搭个单机nacos进行调试开发。&#x1f611;一言难尽。 这里假设本机已经安装好Java8的环境了。 步骤 下载二进制包 直接跑到nacos的github项目页面下载就行了。 https://github.com/aliba…

Linux常用命令(一):创建文件目录

一、touch&#xff1a; 1、作用&#xff1a; 1). 改变已有文件的时间戳属性&#xff0c;修改文件时间戳时&#xff0c;用户必须的文件的属主&#xff0c;或者拥有写文件的权限 2). 创建新的空文件 2、语法&#xff1a; touch [option] 文件名 ,后面可跟多个文件名3、示例 …

企业权限管理(六)-订单详情

订单详情查询 跳转到订单详情页面orders-show.jsp <button type"button" class"btn bg-olive btn-xs" onclick"location.href${pageContext.request.contextPath}/orders/findById.do?id${orders.id}">详情</button>OrdersControl…

大数据Flink(五十九):Flink on Yarn的三种部署方式介绍以及注意

文章目录 Flink on Yarn的三种部署方式介绍以及注意 一、Pre-Job 模式部署作业

【Stable Diffusion】雨天、湿身

一、Models 1.1、Wet Clothes (Clothing Style) [LoHA] WECL SEE-THROUGH WET WET HAIR BIKINI OR SWIMSUIT UNDER CLOTHES NO BRA BRA VISIBLE THROUGH CLOTHES MISC SHIRTS MISC CLOTHES1.2、Rain 雨 Multiply Style rain style1.3、Wet T-Shirt LORA <lora:wetshirt:…

虹科方案 | 成都大运会进行时,保障大型活动无线电安全需要…

成都大运会 7月28日&#xff0c;备受关注的第31届世界大学生夏季运动会在成都正式开幕。据悉&#xff0c;这是全球首个5G加持的智慧大运会&#xff0c;也是众多成熟信息技术的综合“应用场”。使用基于5G三千兆、云网、8K超高清视频等技术&#xff0c;在比赛现场搭建多路8K摄像…

python的gui界面程序爬虫,python的gui界面怎么打开

大家好&#xff0c;小编来为大家解答以下问题&#xff0c;python的gui界面怎么打开&#xff0c;python的gui界面程序爬虫&#xff0c;今天让我们一起来看看吧&#xff01; Python支持多种图形界面的第三方库&#xff0c;包括&#xff1a; wxWidgets Qt GTK Tkinter&#xf…

PreScan 8.5.0 安装

PreScan 8.5.0 安装 prescan8.5安装教程&#xff08;详细&#xff09; Prescan8.5安装详细教程 主要参照第一篇博客进行安装&#xff0c;我将所有的东西都装到了E盘&#xff08;一共就两个盘&#xff09; 安装并用破解文件覆盖掉原文件后&#xff0c;需要配置环境变量 注意新建…

hhc.exe本地制作、手动生成chm电子书

准备几个文件 test.hhp&#xff08;配置文件&#xff09;test.hhc&#xff08;目录文件&#xff09;test.html&#xff08;点击节点右侧显示的内容&#xff09;hhc.exe去这里下载&#xff0c;链接在文章最后 test.hhp [OPTIONS] Compiled filetest.chm Contents filetest.hhc …

libuv 应用

找到了一份示例代码.根据实际情况做了修改 #include <arpa/inet.h> #include <stdbool.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <uv.h>#define DEFAULT_PORT 4080 #define DEFAULT_BACKLOG 128uv_loop_t…

MySQL单表查询操作(SELECT语句)

目录 步骤 1、创建表单 2、添加数据 3、显示所有职工的基本信息 4、查询所有职工所属部门的部门号&#xff0c;不显示重复的部门号 5、 求出所有职工的人数 6、 列出最高工资和最低工资 7、 列出职工的平均工资和总工资 8、 创建一个只有职工号、姓名和参加工作的新表&a…

Kafka3.0.0版本——Broker(服役新节点)示例

目录 一、服务器信息二、VMware克隆服务节点&#xff08;将虚拟机1克隆成虚拟机4 &#xff09;三、克隆后的&#xff08;192.168.136.30&#xff09;服务节点配置文件修改3.1、修改zookeeper服务配置文件3.2、修改kafka服务配置文件3.3、先启动zookeeper&#xff0c;再启动kafk…

Cesium中通过射线计算日照

Cesium中通过射线计算日照 前段时间接触到一个需求&#xff0c;需要实时的计算建筑的日照&#xff0c;通常优先通过shadow map来实现。通过shadow map可以直接获取某一时刻的光照信息&#xff0c;累积不同太阳光位置的shadow map即可得到物体表面的光照时长。 不过本人技术有限…

Pycharm如何打断点进行调试?

断点调试&#xff0c;是编写程序中一个很重要的步骤&#xff0c;有些简单的程序使用print语句就可看出问题&#xff0c;而比较复杂的程序&#xff0c;函数和变量较多的情况下&#xff0c;这时候就需要打断点了&#xff0c;更容易定位问题。 一、添加断点 在代码的行标前面&…