【一】使用vue-cli创建vue3的helloworld项目

不再推荐使用vue-cli命令创建vue3的项目,vue-cli 是 Vue 早期推出的一款脚手架,使用 webpack 创建 Vue 项目。后期推荐使用 create-vue,create-vue 是 Vue3 的专用脚手架,使用 vite 创建 Vue3 的项目(关注【二】使用create-vue创建vue3的helloworld项目)。

1、安装vue的环境

npm install -g @vue/cli

2、使用 vue create 命令创建项目。

vue create 命令创建项目语法格式如下:

vue create [options] <app-name>

创建一个由 vue-cli-service 提供支持的新项目:

options 选项可以是:

  • -p, --preset <presetName>: 忽略提示符并使用已保存的或远程的预设选项
  • -d, --default: 忽略提示符并使用默认预设选项
  • -i, --inlinePreset <json>: 忽略提示符并使用内联的 JSON 字符串预设选项
  • -m, --packageManager <command>: 在安装依赖时使用指定的 npm 客户端
  • -r, --registry <url>: 在安装依赖时使用指定的 npm registry
  • -g, --git [message]: 强制 / 跳过 git 初始化,并可选的指定初始化提交信息
  • -n, --no-git: 跳过 git 初始化
  • -f, --force: 覆写目标目录可能存在的配置
  • -c, --clone: 使用 git clone 获取远程预设选项
  • -x, --proxy: 使用指定的代理创建项目
  • -b, --bare: 创建项目时省略默认组件中的新手指导信息
  • -h, --help: 输出使用帮助信息

接下来我们创建 runoob-vue3-app 项目

vue create runoob-vue3-app

执行以上命令会出现安装选项界面:

按下回车键后就会进入安装,等候片刻即可完成安装。

安装完成后项目结构如下:

安装完成后,我们进入项目目录:

cd runoob-vue3-app2

3、启动应用:

npm run serve

然后打开 http://localhost:8080/,就可以看到应用界面了:

4、部署项目

设置vue.config.js配置文件

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,outputDir: 'dist', //输出文件目录assetsDir: 'static' //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
})

运行命令:

npm run build

当我们在项目的根目录中运行npm run build命令时,npm会查找package.json文件中的"scripts"字段,并执行对应的构建命令。这个构建命令可以是一个简单的命令,也可以是一个复杂的脚本。构建命令的具体内容可以根据项目的需求而定。一般来说,它会包括一系列的操作,如编译源代码、打包文件、压缩资源等,以生成项目的最终可部署版本。

运行npm build得到dist目录

执行完成后,会在 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/604783.shtml

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

相关文章

超维空间M1无人机使用说明书——41、ROS无人机使用yolo进行物体识别

引言&#xff1a;用于M1无人机使用的18.04系统&#xff0c;采用的opencv3.4.5版本&#xff0c;因此M1无人机只提供了基于yolov3和yolov4版本的darknet_ros功能包进行物体识别&#xff0c;识别效果足够满足日常的物体识别使用&#xff0c;如果需要更高版本的yolov7或者yolov8&am…

十八:爬虫-JS逆向(下)

一&#xff1a;AES与DES DES对称加密,是一种比较传统的加密方式,其加密运算、解密运算使用的是同样的密钥&#xff0c;信息的发送者。和信息的接收者在进行信息的传输与处理时&#xff0c;必须共同持有该密钥(称为对称密码),是一种对称加密算法。一般来说加密用的是encrypt()函…

thinkadmin安装步骤

一,先cmd运行安装命令 ### 创建项目( 需要在英文目录下面执行 ) composer create-project zoujingli/thinkadmin二,在confing中的database.php配置数据库 三,将仓库的data复制到app目录下 https://gitee.com/zoujingli/think-plugs-data 四,在cmd运行命令安装数据库 //…

第二百五十二回

文章目录 概念介绍实现方法示例代码 我们在上一章回中介绍了如何在页面中添加图片相关的内容&#xff0c;本章回中将介绍如何给组件添加阴影.闲话休提&#xff0c;让我们一起Talk Flutter吧。 概念介绍 我们在本章回中介绍的阴影类似影子&#xff0c;只是它不像影子那么明显&a…

PTA | 6-2 使用函数实现字符串部分复制

题目 本题要求编写函数&#xff0c;将输入字符串t中从第m个字符开始的全部字符复制到字符串s中。 函数接口定义&#xff1a; void strmcpy( char *t, int m, char *s );函数strmcpy将输入字符串char *t中从第m个字符开始的全部字符复制到字符串char *s中。若m超过输入字符串…

C++/OpenGL应用程序

图像应用程序大部分是 C 编写&#xff0c;OpenGL 调用实现与 3D 渲染相关任务将会使用一些扩展库: GLEW、GLM、GLFW、SOLL2 等。 GLFW 库包含 GLFWwindow 类&#xff0c;我们可以在其上进行 3D 场景绘制。OpenGL 也向我们提供了用于 GLSL 程序载入可编程着色阶段并对其进行编译…

YOLOv5改进 | 融合改进篇 | BiFPN+ RepViT(教你如何融合改进机制)

一、本文介绍 本文给大家带来的改进机制是融合改进,最近有好几个读者和我反应单独的机制都能够涨点,一融合起来就掉点,这是大家不了解其中的原理(这也是为什么我每一个机制都给大家讲解一下原理,大家要明白其中的每个单独的机制涨点原理然后才能够更好的融合,有一些结构是…

【微服务】springcloud集成skywalking实现全链路追踪

目录 一、前言 二、环境准备 2.1 软件环境 2.2 微服务模块 2.3 环境搭建 2.3.1 下载安装包 2.3.2 解压并启动服务 2.3.3 访问web界面 三、搭建springcloud微服务 3.1 顶层公共依赖 3.2 用户服务模块 3.2.1 准备测试使用数据库 3.2.2 添加依赖 3.2.3 添加配置文件 …

how2heap-2.23-11-poison_null_byte

什么是poison_null_byte 当然不止这一种&#xff0c;下面最简单的形式 #include <malloc.h> int main() {char * a malloc(0x200);char * b malloc(0x200);size_t real_size malloc_usable_size(a);a[real_size] 0;return 0; }影响&#xff1a; chunk a&#xff0…

OpenVINS学习6——VioManagerHelper.cpp,VioManagerOptions.h学习与注释

前言 VioManager类里还有VioManagerHelper.cpp,VioManagerOptions.h这两个文件&#xff0c;也包含了一些函数&#xff0c;这次接着看这个 。 整体分析 void VioManager::initialize_with_gt(Eigen::Matrix<double, 17, 1> imustate) 给一个状态&#xff0c;然后初始化…

【C语言】段错误、内存溢出、内存泄漏(区别)、堆溢出、栈溢出

目录 段错误内存溢出内存泄漏栈溢出堆溢出栈溢出和堆溢出区别 段错误 什么时候会发生段错误&#xff1f; 段错误通常发生在访问非法内存地址的时候&#xff0c;即使用了野指针&#xff08;指向一个已删除的对象或者未申请访问受限内存区域的指针&#xff09;或这试图修改字符串…

【Matplotlib】基础设置之图像处理05

图像基础 导入相应的包&#xff1a; import matplotlib.pyplot as plt import matplotlib.image as mpimg import numpy as np %matplotlib inline导入图像 我们首先导入上面的图像&#xff0c;注意 matplotlib 默认只支持 PNG 格式的图像&#xff0c;我们可以使用 mpimg.im…

MySQL深入——9

如何正确的显示随机信息&#xff1f; 我们来模拟在英语单词app当中随机出现三个英语单词的情况&#xff0c;我们首先创建一张表words&#xff0c;然后给这个表当中插入10000条信息进行量化。 select word from words order by rand() limit 3&#xff1b; order by rand&…

基础数据结构第七期 Trie树

前言 Trie树大家能够掌握即可&#xff0c;其实用到的地方并不多&#xff0c;本文将为大家介绍一下。 一、Trie树的基本内容 1、根节点不包含字符&#xff0c;除根结点之外每一个结点都只包含一个字符&#xff1b; 2、字典树用边表示字母表示 3、从根节点到某一结点&#xff…

游戏服务器整体架构思考

1.启动层 不管是单体架构还是微服务架构&#xff0c;其实服务器本身都是要启动的。 不管是用grpc实现远程调用&#xff0c;还是dubbo&#xff0c;还是说就一个简单的tcp监听&#xff0c;都是要启动的。 启动的时候&#xff0c;肯定要整合下controller接入层&#xff0c;不管是叫…

React07-路由管理器react-router

react-router 是一个流行的用于 React 应用程序路由的库。它使我们能够轻松定义应用程序的路由&#xff0c;并将它们映射到特定的组件&#xff0c;这样可以很容易地创建复杂的单页面应用&#xff0c;并管理应用程序的不同视图。 react-router 是基于 React 构建的&#xff0c;…

通过盲对抗性扰动实时击败基于DNN的流量分析系统

文章信息 论文题目&#xff1a;Defeating DNN-Based Traffic Analysis Systems in Real-Time With Blind Adversarial Perturbations 期刊&#xff08;会议&#xff09;&#xff1a;30th USENIX Security Symposium 时间&#xff1a;2021 级别&#xff1a;CCF A 文章链接&…

C# 的SequenceEqual

SequenceEqual 是 LINQ 扩展方法之一&#xff0c;用于比较两个序列&#xff08;如数组、列表等&#xff09;的元素是否相等。 该方法的详细定义如下&#xff1a; public static bool SequenceEqual<TSource>(this IEnumerable<TSource> first, IEnumerable<TS…

Spring之代理模式

1、概念 1.1 介绍 二十三种设计模式中的一种&#xff0c;属于结构型模式。它的作用就是通过提供一个代理类&#xff0c;让我们在调用目标方法的时候&#xff0c;不再是直接对目标方法进行调用&#xff0c;而是通过代理类间接调用。让不属于目标方法核心逻辑的代码从目标方法中…

H266/VVC率失真优化与速率控制概述

率失真优化技术 率失真优化&#xff1a; 视频编码的主要目的是在保证一定视频质量的条件下尽量降低视频的编码比特率&#xff0c;或者在一定编码比特率限制条件下尽量地减小编码失真。在固定的编码框架下&#xff0c;为了应对不同的视频内容&#xff0c;往往有多种候选的编码方…