程序员经验分享-hwhale

vue3 使用vue cli创建一个vue3项目教程指南

2023-11-04

第一步

1 、使用vue --version 查看是否安装vue
如果没有安装，使用命令：npm install vue-cli -g 安装，安装成功之后会显示版本号

在这里插入图片描述

2 、创建项目：使用命令 vue create init-pwa-project创建项目,其中init-pwa-project为项目名，运行之后如下。

在这里插入图片描述
选择vue3创建：
在这里插入图片描述
安装成功提示：
在这里插入图片描述
在你的目录下就能看到已经创建成功的项目的文件夹
在这里插入图片描述

3、运行项目
  1. 进入init-pwa-project目录
  2. 运行命令npm run serve，得到如下运行结果
    在这里插入图片描述
4、网页效果

浏览器访问http://localhost:8081/或者相应的ip+端口
在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vue

html

前端

vuejs

npm

vue3 使用vue cli创建一个vue3项目教程指南 的相关文章

  • 我应该清理 Markdown 吗？

    对于我的帖子实体 我将 HTML 和 MARKDOWN 存储在数据库中 HTML 是从 MARKDOWN 转换而来 HTML 用于在页面上呈现 MARKDOWN 用于编辑功能 使用 WMD 我在存储到数据库之前清理 HTML 问题是 我也应

  • 如何在html5画布中向前和向后移动圆圈中的对象？

    我正在 html5 canvas 中开发一个小应用程序 我需要使用键盘按键以圆周运动移动对象 我可以使用键盘按键移动对象 但存在错误 该对象不会从同一位置向后或向前移动 任何人都可以帮助我完成此操作 请检查以下代码 任何形式的帮助将非常感激

  • 在 Bootstrap 按钮下拉列表标题/占位符文本中显示所选项目

    这个问题已经在 Stackoverflow 上被问过几次了 但是我仍然无法弄清楚它的真相 而且我的查询正在抛出更多的下拉菜单 所以我有两个下拉菜单和一个搜索 我想从下拉列表和 选定 中进行选择以替换下拉占位符文本 但我还需要记住 点击搜索后

  • 如何在CSS中嵌套多个计数器？

    我想用 CSS 嵌套两个不同的编号 以获得如下所示的自动编号 1 第 1 节 1 1 小节1 1 2 小节1 2 第 2 节 2 1 小节2 2 2 小节2 这是我实现这一目标的尝试

  • 使用 SourceMaps 进行 Gulp 过滤器

    我有一个类似的问题here https stackoverflow com questions 26040358 gulp different pipe collections within same task coffeescript a

  • vuejs 2.0.0 中选择的占位符

    我正在使用创建一个网络应用程序vuejs 2 0 https vuejs org guide forms html 我使用以下代码创建了简单的选择输入

  • 可编辑的 Div 插入位置

    我有一个可编辑的 div 我正在使用一个按钮将图像插入到该 div 中 现在 我只是在做 document getElementById elementid innerHTML 为了将图像添加到 div 的末尾 我想输入插入符号所在的图像

  • Bootstrap 4 行布局没有响应

    我正在使用 Bootstrap 4 在 MEAN 堆栈上为新闻文章布局创建一个 html 模板 但这应该不重要 对于这种总体布局的要求是 一篇 特色 文章位于其自己的列中 而其他 8 篇文章位于另一列中的两行中 当在较小的屏幕或移动设备上查

  • 文本区域下的额外填充

    我的文本区域下面有额外的填充 但我似乎找不到它的来源 我已将单独的代码放在此页面上 http jsfiddle net wfuks http jsfiddle net wfuks 我似乎找不到它的来源 它有类 field field bac

  • html 音频标签，持续时间总是无穷大

    我一直在研究使用 html 音频标签来播放一些音频文件 音频播放正常 但音频标签的持续时间属性始终返回无穷大 我尝试了接受的答案this https stackoverflow com questions 16849023 html5 au

  • npm 命令未在请求中发送授权令牌 - 无法进行身份验证

    当我发出 npm 命令时遇到此问题 我收到一条消息 指出它无法通过 npm 注册表 托管在 Azure DevOps 中 进行身份验证 我怀疑这可能是因为它没有生成授权标头并发送它连同请求 例如 当我发出这些命令时 npm ping or

  • 使用过渡添加子项时 div 的平滑增长

    尽管使用了以下代码 但其行为并不符合我的预期transition所以可能有些事情我不明白 理想情况下 单击该按钮会将一个子项添加到id2div 并制作id1分区增长smoothly因此 function id1 button click g

  • 使用时间序列数据和scaleBand指定D3条形图上的刻度

    我尝试为具有时间序列数据的 d3 v4 条形图指定多个刻度和多个刻度标签 如下图所示 基于本教程 https bl ocks org zigahertz 1ee4965ff76514517bb7ce6af21e5d44我有一个处理时间序列数

  • Django 未在 404 页面上应用应用程序中的 CSS 文件

    姜戈3 0 8 Python 3 7 x 我有一个包含一些应用程序的 Django 项目 我正在尝试为 400 403 404 500 错误制作一些 默认 错误页面 我已经这样做了 并显示了适当的模板 但没有任何样式或 JS 在 404 错

  • javascript获取网页中选定文本的段落

    突出显示文本后 我想获取所选文本所在的段落 var select window content document getSelection 请问有什么指点吗 这实际上很难做到 因为你必须考虑六种情况 所选内容不在一个段落内 简单 整个选择都

  • 如何使链接悬停时的背景图像模糊？

    当您用鼠标光标悬停链接时 我想让我的背景图像模糊 5 像素 有什么简单的方法可以实现这一点吗 我有点纠结于类和 id 在这里 pic background url http www metalinjection net wp content

  • Jquery 关注下一个带有类的元素

    我正在尝试创建一个函数 当按下 Enter 键时 会选择带有类的下一个输入 我已经设法 focus 同一行中的下一个元素 但是 如果我需要选择下一行的下一个输入 它将无法继续 下一行中的第一个 quantity 文本框需要获得焦点 控制台没

  • 如何检查我的 create-nuxt-app 版本并升级？

    背景 以前 运行yarn create nuxt app myApp 会安装Nuxt v2 4 0 但今天我注意到您降级到Nuxt v2 0 0 我没有改变开发环境 所以我无法理解这种行为 当我发现这个问题时 我做了一些搜索并在其他地方抱怨

  • HTML标题属性样式[重复]

    这个问题在这里已经有答案了 如何在不使用 javascript 或 CSS 的情况下更改以下标记中标题属性的样式 因为我将 HTML 插入到原本无法编辑的文档中的特定位置 span title This is information Thi

  • HTML：JavaScript：阻止表单提交并调用 Javascript 函数

    我想在按下表单中的提交按钮时进行 AJAX 调用 事实上我无法删除

随机推荐

  • 关于GD32调试JLINK连接不上的问题

    最近有一个项目要用到GD32E230 然后经过了绘画原理图 PCB布线 焊接元件 再到最后一步的调试 发现用JLINK的SWD模式无论怎么也连不上 在和同事纠结了两天之后 发现了原来是PCB里面IC的封装画错了 以下把GD32和STM32官

  • 第九节：JS中的循环语句

    while语句 一般在循环体中来改变判断条件的值 如果不进行值得改变 循环条件一直满足 会造成死循环 语法 while 条件 要执行的代码块 例子 while i lt 10 text 数字是 i i do while 循环是 while

  • 功率MOSFET的正向导通等效电路

    转自 功率MOSFET的正向导通等效电路 电路设计论坛 电子技术论坛 广受欢迎的专业电子论坛 MOSFET 一 基础 Infinity lsc的博客 CSDN博客 MOSFET 二 米勒效应 Infinity lsc的博客 CSDN博客 米

  • 物联网之Linux网络编程三

    本篇主讲内容 1 广播和组播 2 UNIX域套接字 3 网络总结 广播 前面介绍的数据包发送方式只有一个接受方 称为单播 如果同时发给局域网中的所有主机 称为广播 只有用户数据报 使用UDP协议 套接字才能广播 广播地址 以192 168

  • 如何查看Oracle数据库的端口列表Portlist?

    如何查看Oracle数据库的端口列表Portlist 要在SQL PLUS工具中查看Oracle数据库的端口列表 可以执行以下步骤 在SQL PLUS中使用系统管理员帐户登录到Oracle数据库 运行以下命令 SELECT DISTINCT

  • 最大熵阈值分割算法原理及实现

    写在前面 前面介绍了OTSU算法 对于阈值分割法 不得不介绍另外一种较为突出的算法 最大熵阈值分割法 KSW熵算法 最大熵阈值分割法和OTSU算法类似 假设将图像分为背景和前景两个部分 熵代表信息量 图像信息量越大 熵就越大 最大熵算法就是

  • android FlatBuffers剖析

    概述 FlatBuffers是google最新针对游戏开发退出的高性能的跨平台序列化工具 目前已经支持C C Go Java JavaScript PHP and Python C和Ruby正在支持中 相对于json和Protocol Bu

  • Pytorch 分布式训练（DP/DDP）

    参考 需要看 0 实操教程 GPU多卡并行训练总结 以pytorch为例 1 PyTorch 源码解读之 DP DDP 模型并行和分布式训练解析 知乎 2 pytorch中分布式训练DP DDP原理 知乎 3 pytorch中多卡训练 yt

  • 共轭梯度法详细推导分析

    共轭梯度法是一种经典的优化算法 算法求解速度较快 虽然比梯度下降法复杂 但是比二阶方法简单 一 引入 1 优化模型建立 假定待优化的问题如下所示 min x f x 1 2 x T A x b T x min x f x frac 1 2

  • vs 查看 C++ #define 宏定义展开代码

    方法一 define 通常是代码的展开 如果是 复杂 的 define 如何直观的查看展开效果 在 vs 中 选中需要查看的 cpp 文件 右键属性 预处理器 预处理到文件 选择是 确定 右键 cpp 文件 编译 debug 目录中会有一个

  • 打印机驱动如何连接计算机,打印机与电脑第一次连接驱动怎么操作

    打印机作为我们办公的设备之一 在使用过程中需要与电脑完成连接 才能进行使用 很多小伙伴不知道打印机与电脑第一次连接驱动怎么操作 于是就在小编后台给小编留言 那么今天小编就来叫教教大家打印机与电脑第一次连接驱动的方法 下面就让我们一起来看看吧

  • Tomcat性能调优方案

    Tomcat性能调优方案 一 操作系统调优 对于操作系统优化来说 是尽可能的增大可使用的内存容量 提高CPU的频率 保证文件系统的读写速率等 经过压力测试验证 在并发连接很多的情况下 CPU的处理能力越强 系统运行速度越快 适用场景 任何项

  • Python3-excel文档操作（二）：利用openpyxl库处理excel表格：在excel表格中插入图片

    1 简介 excel表中可以插入图片 使用openpyxl库可以实现这个功能 2 代码 coding utf 8 import os import sys import time import openpyxl from openpyxl

  • 在React中使用Swiper做触摸内容滑动

    在React中使用Swiper做触摸内容滑动 缘由 在实现一个触摸内容滑动的功能的时候 想reactJS该怎么处理呢 然后被提点用Swiper可以 一想确实可以 用了网上的一些用在react里面的Swiper 但是并不怎么靠谱和好用 最后看

  • 【改进灰狼优化算法】改进收敛因子和比例权重的灰狼优化算法【期刊论文完美复现】（Matlab代码实现）

    个人主页 研学社的博客 欢迎来到本博客 博主优势 博客内容尽量做到思维缜密 逻辑清晰 为了方便读者 座右铭 行百里者 半于九十 本文目录如下 目录 1 概述 2 运行结果 3 文献来源 4 Matlab代码实现 1 概述 文献来源

  • KBEngine简单RPG-Demo源码解析

    一 环境搭建 1 确保已经下载过KBEngine服务端引擎 如果没有下载请先下载 下载服务端源码 KBEngine https github com kbengine kbengine releases latest 编译 KBEngine

  • DRG/DIP改革激活医疗数据智能400亿新增市场｜ 爱分析洞见

    1 政策力度强 加速全覆盖 2021年底 国家医疗保障局印发 DRG DIP支付方式改革三年行动计划 这x标志着医保支付改革正式进入高速发展阶段 也意味着基于DRG DIP医保支付方式改革推动的医院信息化建设的大幕徐徐拉开 三年行动计划 以

  • curl命令错误码汇总

    状态码 状态原因 解释 0 正常访问 1 错误的协议 未支持的协议 此版cURL 不支持这一协议 2 初始化代码失败 初始化失败 3 URL格式不正确 URL 格式错误 语法不正确 4 请求协议错误 5 无法解析代理 无法解析代理 无法解析

  • QProgressBar、QProgressDialog

    QProgressBar 一 描述 进度条控件 用于向用户指示操作的进度 并向他们保证应用程序仍在运行 如果最小值和最大值都设置为 0 则条形图显示忙碌指示符 而不是步数百分比 二 类型成员 1 enum QProgressBar Dire

  • vue3 使用vue cli创建一个vue3项目教程指南

    第一步 1 使用vue version 查看是否安装vue 如果没有安装 使用命令 npm install vue cli g 安装 安装成功之后会显示版本号 2 创建项目 使用命令 vue create init pwa project创

热门标签