【二】使用create-vue创建vue3的helloworld项目(推荐)

create-vue

官网:快速上手 | Vue.js

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

1、使用方式

npm create vue@latest

这个命令会安装和执行 create-vue,它是 Vue 提供的官方脚手架工具。

创建好项目的目录结构如下:

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

  cd vue-projectnpm installnpm run dev

你现在应该已经运行起来了你的第一个 Vue 项目!请注意,生成的项目中的示例组件使用的是组合式 API 和 <script setup>,而非选项式 API。访问界面如下:

2、部署

当你准备将应用发布到生产环境时,请运行:

npm run build

执行完成后,会在 Vue 项目下会生成一个 dist 目录,该目录一般包含 index.html 文件及 static 目录,static 目录包含了静态文件 js、css 以及图片目录 images(如果有图片的话)。

直接使用浏览器打开index.html文件会是空白页面,控制台报错。

Failed to load resource: net::ERR_FILE_NOT_FOUND

原因

其实是因为打包后的文件是需要在服务器中运行的,build生成的文件要放在服务器里面(可以用apache或者tomcat)

简单方案
  • 全局安装http-server
npm install http-server -g
  • 进入项目目录
cd dist
  • 运行http-server 

  • 打开 http://127.0.0.1:8080能正确访问到通过打包后dist部署的项目了。

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

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

相关文章

k8s的yaml文件中的kind类型都有哪些?(清单版本)

在操作kubenates的过程中&#xff0c;我们接触到的yaml文件中的kind类型有很多。他们代表了kubenate的不同类型的对象&#xff0c;了解了kind的类型&#xff0c;也就相当于了解了k8s都有哪些类型的对象。 类型清单及概要说明 序号类型简述1Pod一个Kubernetes中最基本的资源类型…

排序算法记录

冒泡排序 public class BubbleSorting20230704 {public static void main(String[] args) {int[] numbers new int[]{2,3,1,5,4};for(int i0;i<numbers.length;i){for (int j0;j<numbers.length-1-i;j){if(numbers[j]>numbers[j1]){int temp numbers[j];numbers[j]…

【MATLAB源码-第105期】基于matlab的4PAM调制解调仿真,输出误码率和误符号曲线并且和理论值对比。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 4PAM&#xff08;4-Pulse Amplitude Modulation&#xff0c;4脉冲幅度调制&#xff09;是一种数字调制技术&#xff0c;它通过改变载波信号的幅度来表示数据。在4PAM中&#xff0c;载波的幅度可以采用四种不同的水平&#xf…

天翼云搭建AIGC开发环境综合教程

一、英伟达环境安装主要流程 1、下载安装对应系统版本nVidia驱动程序安装验证 2、CUDA开发套件安装验证 3、深度学习框架安装验证MiniConda3PyTorch 4、容器化CUDA环境安装验证 5、cuDNN深度学习优化驱动安装CNN训练验证 6、制作天翼云主机私有镜像 7、分享镜像给其他用…

File-一个IO流中至关重要的类

File类 概述&#xff1a;文件和目录路径名的抽象表示&#xff0c;File 对象就代表一个路径 对与File而言&#xff0c;其封装的并不是一个真正存在的文件&#xff0c;仅仅是一个路径名而已。它可以是存在的&#xff0c;也可以是不存在的。将来要通过具体的操作把这个路径的内容…

k8s的yaml文件中的kind类型都有哪些?(详述版Part1/2)

目录 综述 分块详述 1、Pod 2、Deployment 3、Service 4、DaemonSet 5、ReplicaSet 6、ServiceAccount 7、PodDisruptionBudget 8、PersistentVolumeClaim 9、PersistentVolume 10、Job 11、CronJob 12、StatefulSet 综述 通过yaml文件中的kind可以大致了解kube…

DevicData-D-XXXXXXXX勒索病毒的最新威胁:如何恢复您的数据?

尊敬的读者&#xff1a; 在网络犯罪的阴影下&#xff0c;勒索病毒成为数字时代的重要威胁之一。DevicData-D-XXXXXXXX 勒索病毒作为其中的一种变体&#xff0c;以其高度隐蔽性和破坏性而备受关注。本文将深入介绍 DevicData-D-XXXXXXXX 勒索病毒的特征、数据恢复方法以及预防策…

xxljob分布式调度平台

分布式调度平台 XXL-JOB 极简入门 https://segmentfault.com/a/1190000041674725xxl-job-core 模块&#xff1a;XXL-JOB 核心。后续我们在编写执行器时&#xff0c;会引入该模块。 xxl-job-admin 模块&#xff1a;调度中心。 xxl-job-executor-samples 模块&#xff1a;提供了…

Python print()函数高级用法和 len()函数详解:获取字符串长度或字节数

Python print()函数高级用法 我们使用 print() 函数时&#xff0c;都只输出了一个变量&#xff0c;但实际上 print() 函数完全可以同时输出多个变量&#xff0c;而且它具有更多丰富的功能。 print() 函数的详细语法格式如下&#xff1a; print (value,...,sep,end\n,filesys.s…

Python高级用法:上下文

上下文 上下文的实现一般可以通过装饰器或者上下文管理器实现&#xff0c;装饰器确保函数可以运行在正确的上下文中&#xff0c;或者在函数前后运行一些代码。 上下文装饰器 当一个数据项需要在多个线程之间共享时&#xff0c;就要用一个锁来保护它避免多次访问。这个锁可以…

如何使用 Jmeter 进行压力测试?

准备测试计划&#xff1a;在 JMeter 中创建一个新的测试计划&#xff08;Test Plan&#xff09;。添加线程组&#xff1a;在测试计划中添加一个线程组&#xff08;Thread Group&#xff09;&#xff0c;用于模拟并发用户。右键点击测试计划 -> 添加 -> Threads (Users) -…

Turn.js 实现翻书效果

接到了任务&#xff0c;要把孩子画的画放到网页上去&#xff0c;翻页效果还要逼真一点。搜索到了turn.js这个前端翻页组件&#xff0c;效果不错。先上图看效果。 网页实际效果&#xff1a;星月夜诗集 turn.js的官网地址&#xff1a;Turn.js: The page flip effect in HTML5 …

机械臂 关节电机选型计算

电机的关键参数 电机的三个关键参数&#xff1a;额定功率&#xff0c;额定扭矩&#xff0c;额定转速。这个大家都比较清楚&#xff0c;对应关系公式&#xff0c;可以直接搜索出来。这里还需要特别声明一点&#xff0c;就是电机的转速-扭矩曲线。这里的前提是对应不同的额定电压…

XDOJ173.购票系统

标题 购票系统 类别 综合 时间限制 1S 内存限制 256Kb 问题描述 请实现一个铁路购票系统的简单座位分配算法&#xff0c;来处理一节车厢的座位分配。 假设一节车厢有20排、每一排5个座位。为方便起见&#xff0c;我们用1到100来给所有的座位编号&a…

华为OD机试真题-机器人仓库搬砖-2023年OD统一考试(C卷)

题目描述: 机器人搬砖,一共有N堆砖存放在N个不同的仓库中,第i堆砖中有bricks[i]块砖头,要求在8小时内搬完。机器人每小时能搬砖的数量取决于有多少能量格,机器人一个小时中只能在一个仓库中搬砖,机器人的能量格每小时补充一次且能量格只在这一个小时有效,为使得机器人损…

高校电力能耗监测精细化管理系统,提升能源利用效率的利器

电力是高校不可离开的重要能源&#xff0c;为学校相关管理人员提供在线用能查询统计等服务。通过对学校照明用电、空调用电等数据的采集、监控、分析&#xff0c;为学校电能管理制定合理的能源政策提供参考。同时&#xff0c;也可以培养学生的节能意识&#xff0c;学校后勤电力…

[MySQL]视图索引以及连接查询案列

目录 1.视图 1.1视图是什么 1.2视图的作用 1.3操作 1.3.1创建视图 1.3.2视图的修改 1.3.3删除视图 1.3.4查看视图 2.索引 2.1什么是索引 2.2为什么要使用索引 2.3索引的优缺点 2.3.1优点 2.3.2缺点 2.4索引的分类 3.连接查询案列 4.思维导图 1.视图 1.1视图是什么 视图…

【AI视野·今日Robot 机器人论文速览 第六十九期】Wed, 3 Jan 2024

AI视野今日CS.Robotics 机器人学论文速览 Wed, 3 Jan 2024 Totally 5 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Robotics Papers NID-SLAM: Neural Implicit Representation-based RGB-D SLAM in dynamic environments Authors Ziheng Xu, Jianwei Niu, Qingf…

计算机原理 (2) CPU的诞生 输入 输出 PC指针

文章目录 计算机的前世今生计算机的三个根本性基础1. 计算机是执行输入、运算、输出的机器&#xff1b;2.程序是指令和数据的集合&#xff1b;3.计算机的处理方式有时与人们的思维习惯不同 二、结论三、参考资料交个朋友 计算机的前世今生 上一篇文章最终结束的时候谈到希望给…

Filter Options in Select Field

Filter Options in Select Field 假设有两个下拉字段State和City。邦有两个值卡纳塔克邦和马哈拉施特拉邦&#xff0c;城市有四个值&#xff0c;班加罗尔&#xff0c;迈索尔&#xff0c;孟买和浦那。如果希望根据State中选择的值过滤City中的选项&#xff0c;可以编写如下所示的…