vue3基础+进阶(一、Vue3项目创建并相比vue2熟悉项目结构)

news2024/10/6 10:42:42

目录

第一章、认识create-vue

1.1 简介

1.2 使用create-vue创建项目

1.2.1 创建步骤以及注意事项

1.2.2 注意事项

1.2.3 熟悉项目,与vue2区分


第一章、认识create-vue

1.1 简介

create-vue是Vue官网新的脚手架工具,底层切换到了vite(下一代前端工具链),为开发提供急速响应。

1.2 使用create-vue创建项目

1.2.1 创建步骤以及注意事项

  • node版本:16.0.0以上,检查版本

 (为大家提供node版本管理的具体实操)

nvm安装并配置环境变量使用nvm安装、切换nodejs_nvm配置环境变量_❆VE❆的博客-CSDN博客

  • 使用命令创建:npm init vue@latest
npm init vue@latest

(这里注意,提示需要下载对应的版本,选择y下载即可) 

  • 了解并配置选项(首次创建vue3项目按照以下配置做即可)

  • 当创建完成后,会弹一个注意事项:(如果没有,忽略即可)

这里我们更新版本即可,使用命令:npm install -g npm@9.8.0

npm install -g npm@9.8.0

 检查版本:

  •  确认以上没有问题之后:

 进入项目、初始化项目、run项目

  • 跑项目后,点击路径

当出现下面这个页面,表示创建成功:

1.2.2 注意事项

  • 前提条件:安装至少比16.0高的node版本
  • 创建Vue应用:npm init vue@latest

1.2.3 熟悉项目,与vue2区分

  • package.json:项目包文件——本地项目的命令以及依赖:核心依赖变成Vue3.x以及vite的底层做驱动

  • vite.config.js:项目配置文件——基于vite的配置

  •  main.js:入口文件——createApp函数创建应用实例

  • App.vue:根组件——SFC单文件组件顺序script - template - style发生变化以及模板template不再要求唯一根元素;script支持setup组合式api

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

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

相关文章

苍穹外卖-【day03】-【公共字段自动填充】-【新增】-【分页】-【删除】-【修改】

苍穹外卖-day03 课程内容 公共字段自动填充新增菜品菜品分页查询删除菜品修改菜品 **功能实现:**菜品管理 菜品管理效果图: 1. 公共字段自动填充 1.1 问题分析 在上一章节我们已经完成了后台系统的员工管理功能和菜品分类功能的开发,在…

SeLa:Self Labeling Via Simultaneous Clustering and Representation Learning

方法论 有监督的分类任务实现 给定一个将数据I映射至特征向量 x ∈ R D x ∈ R^D x∈RD 的深度神经网络 Φ Φ Φ ,即 x Φ ( I ) x Φ ( I ) xΦ(I)。使用有N个样本 I 1 , … , I N I_1 , … , I_N I1​,…,IN​, 且具有标签 y 1 , … , y N ∈ { 1 , … , K }…

线性DP———最长公共子序列问题(LCS)

LCS问题 求两序列具有相同元素的最长子序列&#xff0c;我们可以用到动态规划的方法来解决问题 我们用 来表示序列 与序列 能组成的LCS的长度&#xff0c;的状态转移方程如下&#xff1a; 使用两层for循环就可以解决此问题&#xff0c;时间复杂度为,可以处理n<7000左右…

pycharm里debug时torch数组显示不全

pycharm里查看torch数组全部值 一、在Pycharm运行torch数组时&#xff0c;通常只能看到数组的一部分二、解决办法1、debug后&#xff0c;鼠标右键想要查看完整的数组&#xff0c;选择Evaluate Expression2、输入np.array(x0.data)&#xff0c;x0为想要查看的数组名&#xff0c;…

C#中的抽象类(abstract)

C#中的抽象类&#xff08;abstract&#xff09;。 1&#xff1a;抽象方法只作声明&#xff0c;而不包含实现&#xff0c;可以看成是没有实现体的虚方法 2&#xff1a;抽象类不能被实例化 3&#xff1a;抽象类可以但不是必须有抽象属性和抽象方法&#xff0c;但是一旦有了抽象方…

HTML5学习简记(更新中~)

HTML定义 HTML是一种超文本标记语言&#xff0c;超文本即我们在网页中看到的链接&#xff0c;标记指的是语言中的标签 标签 标签一般成对出现&#xff0c;结束标签比开始标签多一个/ 此外标签一般分为单标签与双标签 HTML基本骨架 其中,HTML标签代表整个网页&#xff0c;hea…

ubuntu迁移anaconda到另外的目录,完美解决问题

背景&#xff1a;anaconda放在/home/下&#xff0c;但是太大了&#xff0c;需要迁移到/data/&#xff0c;找了很多资料&#xff0c;都没解决问题。 一、你可以先做一下尝试&#xff1a; ①拷贝anaconda到你想要的新目录 cp -r /home/anaconda3 /data/ ②将原来的anaconda备…

我国开设大数据相关专业的大学有哪些?

社会对大数据相关专业的人才有着巨大的需求&#xff0c;据预测&#xff0c;到2030年&#xff0c;大数据及相关产业规模达到上万亿元&#xff0c;大数据产业将成为重要的经济增长点。数据是企业最宝贵的资源&#xff0c;大数据分析技术在提升企业经营管理、提高销售业绩、降低管…

微服务组件Sentinel

什么是Sentinel Sentinel 是一种用于流量控制、熔断降级和系统负载保护的开源框架。它由阿里巴巴集团开发并开源&#xff0c;旨在帮助开发人员构建可靠和稳定的分布式系统。 Sentinel 提供了以下主要功能&#xff1a; 流量控制&#xff1a;Sentinel 可以通过限制请求的速率或…

怎么学习Java I/O相关的知识和技术? - 易智编译EaseEditing

要学习Java I/O&#xff08;输入输出&#xff09;相关的知识和技术&#xff0c;可以按照以下步骤进行&#xff1a; 理解Java I/O基础知识&#xff1a; 首先&#xff0c;了解Java I/O的基本概念和术语&#xff0c;包括输入流和输出流、字节流和字符流、文件读写等。掌握Java中…

1.12 springboot 整合log4j打印日志

1.除去springboot自带的日志 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter</artifactId><exclusions><!-- 除去springboot自带的日志 --><exclusion><groupId>org.sprin…

vxe 行编辑自动加载行级别的下级下拉框数据

效果&#xff1a;进入编辑的时候自动根据ID带出下级下拉框 实现思路&#xff1a;行编辑进入之前&#xff0c;调用加载下拉框的方法 activeRowMethod({ row, rowIndex }) {this.getSpecsList(row.wlid);return ret; }, :edit-config"{trigger: click,mode: row,autoClear…

LT8619B 是一款HDMI转TTL或者2 PORT LVDS的芯片。

LT8619B 1. 概述 LT8619B是龙迅基于清除边缘技术的高性能HDMI接收芯片&#xff0c;符合HDMI 1.4&#xff08;高清多媒体接口&#xff09;规范。RGB 输出端口可支持 RGB888/RGB666/RGB565 格式&#xff0c;输出分辨率最高可支持 4Kx2K 分辨率。凭借可编程标量&#xff0c;LT86…

Python爬虫之Scrapy框架系列(23)——分布式爬虫scrapy_redis浅实战【XXTop250部分爬取】

目录&#xff1a; 1.实战讲解&#xff08;XXTop250完整信息的爬取&#xff09;&#xff1a;1.1 使用之前做的完整的XXTOP250项目&#xff0c;但是设置为只爬取一页&#xff08;共25个电影&#xff09;,便于观察1.2 配置settings文件中使用scrapy_redis的必要配置&#xff0c;并…

git -- SSL certificate problem

SSL certificate problem 1.问题描述 新建一个仓库&#xff0c;在向里面上传文件时&#xff0c;出现SSL证书问题 2.解决方法 这个问题是由于没有配置信任的服务器HTTPS验证。默认&#xff0c;cURL被设为不信任任何CAs&#xff0c;就是说&#xff0c;它不信任任何服务器验证。…

概率论的学习和整理--番外12:一个经典dubo模型的概率计算等

目录 1 经典模型知识科普 1.1 知识来源 1.2 下面是摘取的部分规则 2 这个经典dubo的概率和期望 2.1 网上计算的概率&#xff0c;期望全是负&#xff0c;赌徒悲剧 2.2 为什么会这样呢 3 假设把下注庄家不抽水&#xff0c;获得100%收益而不是95&#xff0c;多少次后可以赢…

Java对日志文件进行加密

最近碰到了一个新的需求&#xff0c;生产环境中Java程序部署的服务器会定期清理数据&#xff0c;需要将保存在程序所在服务器上的日志文件挂载到网盘上&#xff0c;但又不想让用户看到日志文件中的信息&#xff0c;因此需要对日志文件中的内容进行加密。 这里&#xff0c;并不是…

详细介绍MATLAB中的图论算法

MATLAB是一种功能强大的编程语言和环境,提供了许多用于图论算法的工具和函数。图论是研究图及其属性和关系的数学分支,广泛应用于计算机科学、网络分析、社交网络分析等领域。在MATLAB中,我们可以使用图论算法来解决各种问题,如最短路径问题、最小生成树问题、最大流问题等…

华为无线ac+ap旁挂二层组网常用配置案例

AC控制器理解配置步骤&#xff1a; capwap source interface Vlanif 100 //源IP回包地址 wlan ssid-profile name test //新建个模版名称为test ssid test //wifi名称 wlan security-profile name test //建立安全模版也叫test security wpa-wpa2 psk pass-phrase admin123 a…

Python 算法基础篇:冒泡排序和选择排序

Python 算法基础篇&#xff1a;冒泡排序和选择排序 引言 1. 冒泡排序算法概述2. 冒泡排序算法实现实例1&#xff1a;冒泡排序 3. 选择排序算法概述4. 选择排序算法实现实例2&#xff1a;选择排序 5. 冒泡排序与选择排序的对比总结 引言 冒泡排序和选择排序是两种常用的排序算法…