当前位置: 首页 > news >正文

vue3脚手架搭建

一.安装 vue3.0 脚手架

如果之前安装了2.0的脚手架,要先卸载掉,输入:

npm uninstall vue-cli -g

进行全局卸载

1.安装node.js(npm)

node.js:简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。 Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。与平时写的js语法基本一样,多了操作计算机资源的语法。这里我们需要使用到npm工具所以需要node.js。

官网下载(安装非常简单(无限下一步即可)),安装时node.js时会自动帮我们安装npm工具

https://nodejs.cn/download/

在cmd窗口中输入以下命令,验证安装是否成功:
在这里插入图片描述

2.设置淘宝镜像(不安装也可以,直接跳过)

//命令行永久更改使用指定镜像(淘宝)
npm config set registry https://registry.npm.taobao.org

3.初始化脚手架

npm install @vue/cli -g
在这里插入图片描述

注意:若执行命令npm install ~~ 出现如下报错
在这里插入图片描述
是由于权限的原因,右击Nodejs文件夹->属性->安全,点击编辑,将所有权限都✔即可。
在这里插入图片描述

4.创建vue3项目

  4.1vue create + 项目名称
> vue create vue3-demo   4.2模板选择,通过键盘上下键来选择,我们选择第三个 自定义
这三个选择分别是 vue2 / vue3默认模板 / Manually select features 手动选择(自定义)的意思在这里插入图片描述
   4.3选择我们需要的默认配置(通过空格键来选中)
在这里插入图片描述
  4.4 vue版本的选择,我们选择 vue3
在这里插入图片描述
  4.5其他配置
在这里插入图片描述

5.切换到你的目录

cd xxx

在这里插入图片描述

常用npm和yarn命名
在这里插入图片描述

6.安装依赖

npm install    #安装依赖

7.启动项目

npm run dev   #启动项目

在这里插入图片描述

二、目录结构

public

  • favicon.ico(页面图标)
  • index.html(html文件)

src (源代码)

  • components(组件)
  • APP.vue(根组件)
  • main.js(程序的入口)

1.解析

main.js(入口文件)

// main.js会创建根实例
import { createApp } from ‘vue’//引入vue 解构出 createApp方法
import App from ‘./App.vue’
createApp(App).mount(‘#app’)//APP是根组件并挂载到index.html

APP.vue(根组件)

<template><!-- 根组件 --><img alt="Vue logo" src="./assets/logo.png"> <!-- 图片 --><HelloWorld msg="Welcome to Your Vue.js App"/><!-- 组件 -->
</template><script>
import HelloWorld from './components/HelloWorld.vue'// 引入组件
// 导出
export default {name: 'App',components: {HelloWorld}
}
</script>

HelloWorld.vue(组件)

<template><div class="hello"><!-- 父子主键的传递消息 --><h1>{{ msg }}</h1><!-- ... --></div>
</template>
<script>
export default {name: 'HelloWorld',props: {msg: String}
}
</script>

2.打包

将vue文件通过node.js编译为html css js文件(会帮我们压缩)

打包结果出现在(dist)只有一个index.html(单页应用)

npm buid

相关文章:

vue3脚手架搭建

一.安装 vue3.0 脚手架 如果之前安装了2.0的脚手架&#xff0c;要先卸载掉&#xff0c;输入&#xff1a; npm uninstall vue-cli -g 进行全局卸载 1.安装node.js&#xff08;npm&#xff09; node.js&#xff1a;简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是…...

MongoDB 未授权访问漏洞

简介 MongoDB是一个基于分布式文件存储的数据库&#xff0c;是一个介于关系数据库和非关系数据库之间的产品&#xff0c;它的特点是高性能、易部署、易使用&#xff0c;存储数据非常方便&#xff0c;默认情况下是没有认证的这就导致不熟悉它的研发人员部署后没有做访问控制导致…...

花5分钟学习机器学习基础知识

一、什么是机器学习 机器学习的目的是让机器学习,而不是执行预设的算法。 机器学习适用于难以制定规则的问题,如垃圾邮件识别、图像识别。 机器学习模拟人类学习过程:从样本中学习归纳总结,形成模型,然后应用模型完成任务。 机器学习需要大量样本数据和计算能力支持。当前数…...

Qt学习:使用OpenGL绘制3D图形

文章目录 前言一、Qt下使用OpenGL绘制图形介绍二、示例完整代码总结 前言 文章中引用的内容均来自这本书中的原文&#xff1a;【Qt Creator快速入门_霍亚飞编著】&#xff0c;本文的示例也是在书中代码的基础上进行编写的&#xff08;其中部分代码使用原文编译不过&#xff0c…...

在chrom浏览器安装Vue.js devtools插件,遇到恶意扩展程序字样,附百度网盘下载链接

遇到的问题 拖拽下载好的 Vue.js devtools 插件到谷歌扩展程序&#xff0c; 百度网盘下载地址 链接&#xff1a;https://pan.baidu.com/s/1FeK6pwc2UzRUUlMFN3rW5w?pwdw361 提取码&#xff1a;w361 提示&#xff1a; 解决办法 将Vue.js devtools 插件的后缀从.crx改为.zi…...

WSL2的安装与配置(创建Anaconda虚拟环境、更新软件包、安装PyTorch、VSCode)

1. WSL2 安装 以管理员身份打开 PowerShell&#xff08;“开始”菜单 >“PowerShell” >单击右键 >“以管理员身份运行”&#xff09;&#xff0c;然后输入以下命令&#xff1a; dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /a…...

【鸿蒙软件开发】ArkTS常见组件之单选框Radio和切换按钮Toggle

文章目录 前言一、Radio单选框1.1 创建单选框1.2 添加Radio事件1.3 场景示例二、切换按钮Toggle2.1 创建切换按钮2.2 创建有子组件的Toggle2.3 自定义样式selectedColor属性switchPointColor属性 2.4 添加事件2.5 示例代码 总结 前言 Radio是单选框组件&#xff0c;通常用于提…...

今年阿里云双十一服务器优惠价格讨论_看看大家怎么说?

2023阿里云双十一云服务器大概会降到什么区间&#xff1f;阿里云服务器网认为会在当前的优惠价格基础上&#xff0c;降价10%左右&#xff0c;可以在阿里云CLUB中心领券&#xff1a;aliyun.club 云服务器专用满减优惠券。阿里云服务器网从各个渠道了解到大家对今年阿里云双十一服…...

LC-1402. 做菜顺序(记忆化搜索 ==> 动态规划、贪心)

1402. 做菜顺序 困难 一个厨师收集了他 n 道菜的满意程度 satisfaction &#xff0c;这个厨师做出每道菜的时间都是 1 单位时间。 一道菜的 「 like-time 系数 」定义为烹饪这道菜结束的时间&#xff08;包含之前每道菜所花费的时间&#xff09;乘以这道菜的满意程度&#x…...

泰森多边形

泰森多边形 93 泰森多边形又叫沃洛诺伊图&#xff08;Voronoi diagram&#xff09;&#xff0c;得名于Georgy Voronoi&#xff0c;是一组由连接两邻点线段的垂直平分线组成的连续多边形。一个泰森多边形内的任一点到构成该多边形的控制点的距离小于到其他多边形控制点的距离。…...

YOLOV8 进行docker环境配置

修改docker文件 原docekerfile中ADD https://ultralytics.com/assets/Arial.ttf https://ultralytics.com/assets/Arial.Unicode.ttf /root/.config/Ultralytics/下载很慢&#xff0c;可以在外部下载好&#xff0c;放入docker文件夹中&#xff0c;再将源代码改为ADD Arial.ttf…...

sealos一键部署K8S环境(sealos3.0时代教程过时了,目前已经4.0了,请移步使用Sealos一键安装K8S)

1 安装Sealos(4.0版本) sealos部署k8s贼方便&#xff0c;只需要一条init命令即可&#xff0c;3分钟部署完&#xff08;下载安装包的时间不算&#xff09;。 官方教程&#xff1a;https://www.sealyun.com/instructions/1st #主机名&#xff1a; hostnamectl set-hostname mas…...

【C++】stackqueue

适配器是一种设计模式 &#xff0c; 该种模式是将一个类的接口转换成客户希望的另外一个接口 。 虽然 stack 和 queue 中也可以存放元素&#xff0c;但在 STL 中并没有将其划分在容器的行列&#xff0c;而是将其称为 容器适配 器 &#xff0c;这是因为 stack 和队列只是对其他容…...

Hive篇面试题+详解

Hive篇面试题 1.什么是Hive&#xff1f;它的主要功能是什么&#xff1f; Hive是一个基于Hadoop的数据仓库工具&#xff0c;它提供了一个类SQL的查询语言&#xff08;HiveQL&#xff09;来查询和分析存储在Hadoop集群中的大规模数据。Hive的主要功能是将结构化数据映射到Hadoop…...

Mysql批量插入更新如何拆分大事务?

拆分大事务 一、解决方案二、遇到问题之前在运行Mysql任务的时候报错:binlog(1610646347 bytes) write threshold exceeded,原因是Mysql任务提交的是个大事务,超出binlog设定阈值,使得系统自动终止事务 一、解决方案 使用limit分页拆分大事务 CREATE PROCEDURE `split_tran…...

【计算机网络原理】初始网络基础

文章目录 1. 网络发展史1.1 单机时代1.2 网络互连局域网 LAN广域网 WAN 2. 网络通信基础2.1 IP 地址2.2 端口号2.3 协议2.4 五元组2.5 协议分层2.5.1 OSI七层模型2.5.2 TCP/IP五层模型 2.6 封装和分用2.6.1 数据封装(发送方情况)2.6.2 数据分用(接收方情况) 总结 1. 网络发展史…...

【sqlserver】配置管理器打不开

问题描述 无法连接到 WMI 提供程序。您没有权限或者该服务器无法访问。请注意&#xff0c;您只能使用SQL Server 配置管理器来管理 SQL Server 2005 和更高版本的服务 器。无效类[0x80041010] 解决方式: 命令提示符-右键-以管理员身份运行&#xff0c;再把以下代码执行一遍&…...

磁盘清理 | 已经卸载的软件还出现在应用和功能里怎么办?

一句话总结解决方法&#xff1a; 安装Geek Uninstaller,删除卸载残留。 问题描述&#xff1a; 最近磁盘满了&#xff0c;需要删除一些平时不常用的软件&#xff0c;但是发现一个问题。就是已经删除的软件&#xff0c;仍然会出现在“应用与功能”中。并且显示卸载图标为灰色&am…...

C++之异常

目录 一、C语言传统的处理错误的方式 二、C的异常 1、概念 2、关键字 3、基本格式 三、异常的抛出和捕获 1、异常的抛出和匹配原则 2、 在函数调用链中异常栈展开匹配原则 四、异常抛派生类&#xff0c;基类捕获 五、异常的重新抛出 六、异常安全 七、异常的优缺点…...

动态天气预报:Living Weather HD for Mac

Living Weather HD能够为Mac用户提供及时、准确、个性化的天气信息&#xff0c;并提供了丰富的定制选项&#xff0c;使用户能够更加方便地查看天气状况。 具有以下特点&#xff1a; 显示世界各地的准确天气预报和当地时间。自动探测出用户所在的首个地点&#xff0c;并通过搜…...

告别混乱!在uni-app中优雅管理推送消息与角标:一个封装好的Push工具类详解

告别混乱&#xff01;在uni-app中优雅管理推送消息与角标&#xff1a;一个封装好的Push工具类详解 在移动应用开发中&#xff0c;推送消息和角标管理是提升用户体验的关键功能&#xff0c;但往往也是最容易陷入混乱的领域。当应用规模扩大、业务逻辑复杂时&#xff0c;零散的推…...

Dify日志审计配置必须在2024年底前完成升级!等保2.0 8.2.3条款强制要求的5项新增字段(user_agent、session_id、api_version)如何精准注入?

第一章&#xff1a;Dify 2026日志审计配置升级的合规性紧迫性随着《网络安全法》《数据安全法》《个人信息保护法》及最新发布的《生成式人工智能服务安全基本要求&#xff08;GB/T 43871—2024&#xff09;》全面实施&#xff0c;日志审计能力已成为AI应用平台强制性合规基线。…...

Windows组策略不生效?别慌!手把手教你用注册表精准定位与修复(附常用键值对照表)

Windows组策略疑难排查实战指南&#xff1a;从注册表到问题解决 在Windows系统管理中&#xff0c;组策略是管理员最强大的工具之一&#xff0c;但也是最容易让人头疼的功能。当精心配置的策略未能按预期生效时&#xff0c;很多管理员会陷入反复检查组策略编辑器却找不到原因的困…...

RWKV-7 (1.5B World) 部署教程:NVIDIA Container Toolkit配置指南

RWKV-7 (1.5B World) 部署教程&#xff1a;NVIDIA Container Toolkit配置指南 1. 项目概述 RWKV-7 (1.5B World) 是一款基于轻量级大模型开发的单卡GPU专属对话工具&#xff0c;专为RWKV架构优化设计。这款工具完美适配RWKV架构的原生特性&#xff0c;支持全球多语言对话、流…...

如何快速使用Devices.css创建精美的设备展示:面向初学者的完整指南

如何快速使用Devices.css创建精美的设备展示&#xff1a;面向初学者的完整指南 【免费下载链接】devices.css Pure CSS phones and tablets 项目地址: https://gitcode.com/gh_mirrors/de/devices.css Devices.css是一个基于纯CSS实现的开源项目&#xff0c;它提供了多种…...

ARM架构CNTHPS_TVAL_EL2寄存器详解与应用

1. ARM架构中的CNTHPS_TVAL_EL2寄存器解析在ARMv8-A架构的虚拟化和安全扩展中&#xff0c;定时器管理是一个关键子系统。CNTHPS_TVAL_EL2&#xff08;Counter-timer Secure Physical Timer TimerValue Register&#xff09;作为安全物理定时器的核心寄存器&#xff0c;为EL2特权…...

Material Icon Library多主题适配:实现白天/黑夜模式的图标切换

Material Icon Library多主题适配&#xff1a;实现白天/黑夜模式的图标切换 【免费下载链接】material-icon-lib Library containing over 2000 material vector icons that can be easily used as Drawable or as a standalone View. 项目地址: https://gitcode.com/gh_mirr…...

保姆级教程:用Python串口和GBK编码玩转SYN6288 TTS模块(附完整代码)

Python全平台串口控制SYN6288语音合成模块实战指南 第一次听到SYN6288发出清晰的中文语音时&#xff0c;那种"机器开口说话"的奇妙感至今难忘。作为一款性价比极高的中文TTS模块&#xff0c;SYN6288通过简单的串口指令就能实现高质量的语音合成&#xff0c;特别适合智…...

别再让LaTeX表格乱跑了!用[h]和[htbp]参数精准控制表格位置(附Overleaf实战)

LaTeX表格浮动控制完全指南&#xff1a;从基础参数到高级布局技巧 第一次在LaTeX中插入表格时&#xff0c;很多人都会遇到这样的困惑&#xff1a;明明代码中表格写在某段文字之后&#xff0c;编译后却跑到了页面顶部。这种"表格乱跑"的现象其实是LaTeX浮动体机制在起…...

CSS如何实现列表项序号自定义_利用--before与content实现

当list-style-type无法满足自定义序号需求时&#xff0c;应改用::beforecontent配合CSS计数器&#xff1b;需设置counter-reset、counter-increment&#xff0c;并在content中引用counter()&#xff0c;支持前缀、图标、嵌套及无障碍阅读。list-style-type 不能满足自定义序号时…...