vue3.0学习笔记(一)——vue3简介与vite脚手架的使用

1. 为什么学vue3

Vue3现状:

  • vue-next 2020年09月18日,正式发布vue3.0版本。但是由于刚发布周边生态不支持,大多数开发者处于观望。
  • 现在主流组件库都已经发布了支持vue3.0的版本,其他生态也在不断地完善中,这是趋势。
    • element-plus 基于 Vue 3.0 的桌面端组件库
    • vant vant3.0版本,有赞前端团队开源移动端组件库
    • ant-design-vue Ant Design Vue 2.0版本,社区根据蚂蚁 ant design 开发

Vue3优点:

  • 最火框架,它是国内最火的前端框架之一,官方文档 中文文档
  • 性能提升,运行速度事vue2.x的1.5倍左右
  • 体积更小,按需编译体积比vue2.x要更小
  • 类型推断,更好的支持Ts(typescript)这个也是趋势
  • 高级给予,暴露了更底层的API和提供更先进的内置组件
  • 组合API (composition api) ,能够更好的组织逻辑,封装逻辑,复用逻辑

Vue3展望:

  • 这是趋势,越来越多的企业将来肯定会升级到Vue3.0
  • 大型项目,由于对Ts的友好越来越多大型项目可以用Vue3.0

2. vite基本使用

vite是什么:官方文档

  • 它是一个更加轻量(热更新速度快,打包构建速度快)的vue项目脚手架工具。
  • 相对于vue-cli它默认安装的插件非常少,随着开发过程依赖增多,需要自己额外配置。
  • 所以: 在单纯学习vue3语法会使用它,后面做项目的时候我们还是使用vue-cli

vite基本使用:

  • 创建项目 npm init vite-app 项目名称 或者 yarn create vite-app 项目名称

  • 切换到项目目录下 cd 项目名称
  • 安装依赖 npm i 或者 yarn
  • 启动项目 npm run dev 或者 yarn dev

总结: vite是什么?

  • 使用vite创建项目学习vue3语法,使用vue-cli创建项目正式开发。

3. 创建vue应用

基本步骤:

  • 在main.js中导入createApp函数
  • 定义App.vue组件,导入main.js
  • 使用createApp函数基于App.vue组件创建应用实例
  • 挂载至index.html的#app容器

总结: 如何创建vue应用实例?

  • 通过createApp创建应用实例--->扩展功能将来都是在app上进行。

4. 遇到的问题

4.1 Vue3+Vite项目启动报错警告

        vue3 项目启动时报错如下,这个警告不会影响到项目的运行。太复杂,主要是版本兼容的问题,暂时选择忽略。

原因:

  • 这个警告是由 Vue 在开发环境中的特定配置引起的,它提示你在 esm-bundler 版本的 Vue 中需要定义特定的编译时特性标志(compile-time feature flags)以获得更好的树状结构提示(better tree-shaking)。

解决方案:

① 查看 package.json 中你正在使用的打包工具。

  • 打开项目根目录下的 package.json 文件,查看其中的 dependenciesdevDependencies。这通常可以告诉你正在使用的打包工具。
    • 如果看到 vite,那么你使用的是 Vite。
    • 如果看到 webpack,那么你使用的是 Webpack。
    • 如果看到 rollup,那么你使用的是 Rollup。
  • 检查项目根目录下的文件: 
    • 如果你找到 vite.config.jsvite.config.ts 文件,那么你使用的是 Vite。
    • 如果你找到 webpack.config.js 文件,那么你使用的是 Webpack。
    • 如果你找到 rollup.config.js 文件,那么你使用的是 Rollup。
  • 检查启动和构建脚本

    • package.json 文件中,查看 scripts 部分。这可以告诉你项目是如何启动和构建的。

② 打包工具为 vite 时的解决方案。

步骤:

  • 在项目根目录下创建一个名为 vite.config.js 的文件(如果还没有的话)
  • 添加以下内容到 vite.config.js 文件中:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],define: {__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false,},
})
  • 安装 @vitejs/plugin-vue 插件,在项目根目录下运行以下命令:
npm install @vitejs/plugin-vue --save-dev
  • 若报错信息如下,则是 @vitejs/plugin-vue 的版本要求和当前使用的 Vite 版本不兼容。

  • 卸载当前的vite版本,安装最新版本的 Vite 和 @vitejs/plugin-vue。
npm uninstall vite
npm install vite @vitejs/plugin-vue --save-dev

4.2 Vue.js Devtools 版本问题

  • 问题:谷歌浏览器上,点击“Vue.js Devtools”,显示“Vue.js not detected”。
  • 原因:当前的调试工具版本与当前的 vue 版本不兼容。
  • 解决方案:下载新版本的调试工具。

不可取方案:打开 chrome 浏览器的管理扩展程序,进入 Chrome 应用商店直接下载。(需要翻墙,一般进不去

国内 Vue.js devtools 安装教程

  • 浏览器直接搜索极简插件,点击极简插件官网。搜索工具,点击推荐下载。

  • 解压安装包(.crx 后缀),拖动解压后的安装包到 chrome 浏览器的管理扩展程序页面进行安装。

5. 选项API和组合API

        理解什么是选项API写法,什么是组合API写法。

① 什么是选项API写法:Options ApI

  • 在vue2.x项目中使用的就是 选项API 写法
    • 代码风格:data选项写数据,methods选项写函数...,一个功能逻辑的代码分散。
  • 优点:易于学习和使用,写代码的位置已经约定好
  • 缺点:代码组织性差,相似的逻辑代码不便于复用,逻辑复杂代码多了不好阅读。
  • 补充:虽然提供mixins用来封装逻辑,但是出现数据函数覆盖的概率很大,不好维护。

② 什么是组合API写法:Compositon API

  • 在vue3.0项目中将会使用 组合API 写法
    • 代码风格:一个功能逻辑的代码组织在一起(包含数据,函数...)
  • 优点:功能逻辑复杂繁多情况下,各个功能逻辑代码组织再一起,便于阅读和维护
  • 缺点:需要有良好的代码组织能力和拆分逻辑能力,PS:大家没问题。
  • 补充:为了能让大家较好的过渡到vue3.0的版本来,也支持vue2.x选项API写法

总结:

  • 知道选项API和组合API的写法区别,建议大家使用组合API在vue3.0项目中。

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

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

相关文章

梯度下降算法在逻辑回归中的应用

逻辑回归简介 sigmoid函数: g ( z ) 1 1 e − z g(z) \frac{1}{1e^{-z}} g(z)1e−z1​ 逻辑回归假设函数: y ^ h θ ( x ) g ( θ T x ) 1 1 e − θ T x \hat{y} h_{\theta}(x) g(\theta^Tx) \frac{1}{1e^{-\theta^Tx}} y^​hθ​(x)g(θTx)…

我的世界!

每位冒险家在《我的世界》中的出生点都各不相同, 有的出生在桦木森林,有的出生在草原, 还有的出生在临近海洋的沙滩。 这些环境叫做生物群系,也常被称为生态系统。 在《我的世界》中的不同生物群系具有不同的地域特色—— 不…

Redis的五种数据类型与命令

目录 引言 一 Redis的特性 二 Redis的安装 三 Redis的优点 四 Redis的五种数据类型与命令 五 Redis的配置文件 引言 Redis是什么? Remote Dictionary Service(远程字典服务器) Redis 是一个开源的(BSD许可)的,C语言编写的,高性能的数…

羊大师:夏夜贪凉,但为啥肚子还要‘保暖计划’?

在这个夏夜,当空调与风扇齐飞,冰镇西瓜与凉面共舞之时,你是否也曾有过这样的疑惑:明明热得汗流浃背,为啥老一辈总念叨着“睡觉再热也要给肚子盖被子”?这背后,藏着的可不仅仅是老一辈的固执&…

centos7手动编译安装redis-6.2.1.tar.gz

本章教程,主要通过手动编译安装的方式,进行安装redis-6.2.1版本,如果需要安装其它版本的,可以在这里找到对应版本进行下载,安装步骤基本上差不多。 下载地址:https://download.redis.io/releases/ 一、下载安装包 wget https://download.redis.io/releases/redis-6.2.1.…

SSM学习9:SpringBoot简介、创建项目、配置文件、多环节配置

简介 SpringBoot式用来简化Spring应用的初始搭建以及开发过程的一个框架 项目搭建 File -> New -> Project 选中pom.xml文件,设置为maven项目 项目启动成功 可以访问BasicController中的路径 配置文件 在resources目录下 application.properties 默…

powershell自定义命令别名

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、查看命令别名二、常见的别名三、自定义别名1.GUI编辑2.命令行编辑 总结 前言 有时候在windows上使用powershell时候常常苦于别名问题,像我这样…

昇思25天学习打卡营第25天|基于MindSpore的GPT2文本摘要

基于MindSpore的GPT2文本摘要 Tips:安装依赖库 pip install -i https://pypi.mirrors.ustc.edu.cn/simple mindspore2.2.14 pip install mindnlp下载数据集: from mindnlp.utils import http_get# download dataset url https://download.mindspore.…

Android AutoSize屏幕适配:适配不同屏幕大小的尺寸,让我们无需去建立多个尺寸资源文件

目录 AutoSize是什么 AutoSize如何使用 一、AndroidautoSize是什么 在开发产品的时候,我们会遇到各种各样尺寸的屏幕,如果只使用一种尺寸去定义控件、文字的大小,那么到时候改起来就头皮发麻。以前使用dime的各种类库,文件太多…

敏捷CSM证书国家认可嘛?有什么价值?

CSM证书,全称为Certified Scrum Master,是由Scrum Alliance(敏捷联盟)颁发的一项国际公认的敏捷管理领域认证。该证书不仅在全球范围内受到广泛认可,也在国内得到了业界的广泛关注和重视。 CSM证书的背景 CSM证书是基…

从原理到实践:开发视频美颜SDK与主播美颜工具详解

本篇文章,笔者将深入探讨视频美颜SDK的开发原理和实践应用,重点介绍如何打造一款功能强大的主播美颜工具。 一、视频美颜的基本原理 视频美颜的核心在于图像处理技术,主要包括面部识别、图像增强和特效处理。 1.面部识别 常见的面部识别算…

Codeforces Round 874 (Div. 3)(A~D题)

A. Musical Puzzle 思路: 用最少的长度为2的字符串按一定规则拼出s。规则是&#xff1a;前一个字符串的尾与后一个字符串的首相同。统计s中长度为2的不同字符串数量。 代码: #include<bits/stdc.h> #include <unordered_map> using namespace std; #define N 20…

昇思25天学习打卡营第20天|CV-ResNet50图像分类

打卡 目录 打卡 图像分类 ResNet网络介绍 数据集准备与加载 可视化部分数据集 残差网络构建 Building Block 结构 代码实现 Bottleneck结构 代码实现 构建ResNet50网络 代码定义 模型训练与评估 可视化模型预测 重点&#xff1a;通过网络层数加深&#xff0c;感知…

如何让微课视频更生动?试试这些实时美颜录屏软件!

在数字化教学的浪潮中&#xff0c;真人出镜的微课变得越来越受欢迎。除了清晰的讲解声&#xff0c;老师们偶尔需要亲自出镜&#xff0c;结合生动有趣的动画元素或实地拍摄&#xff0c;让知识传递更加直观和有趣。但问题来了&#xff0c;如何在录制微课时&#xff0c;让摄像头下…

Spring Boot 引入 Guava Retry 实现重试机制

为什么要用重试机制 在如今的系统开发中&#xff0c;为了保证接口调用的稳定性和数据的一致性常常会引入许多第三方的库。就拿缓存和数据库一致性这个问题来说&#xff0c;就有很多的实现方案&#xff0c;如先更新数据库再删除缓存、先更新缓存再更新数据库&#xff0c;又或者…

C++ | Leetcode C++题解之第278题第一个错误的版本

题目&#xff1a; 题解&#xff1a; class Solution { public:int firstBadVersion(int n) {int left 1, right n;while (left < right) { // 循环直至区间左右端点相同int mid left (right - left) / 2; // 防止计算时溢出if (isBadVersion(mid)) {right mid; // 答案…

错误解决 error CS0117: ‘Buffer‘ does not contain a definition for ‘BlockCopy‘

Unity 2022.3.9f1 导入 Runtime OBJ Importer 后出现&#xff1a; error CS0117: ‘Buffer’ does not contain a definition for ‘BlockCopy’ 解决办法&#xff1a; 源代码&#xff1a; int DDS_HEADER_SIZE 128; byte[] dxtBytes new byte[ddsBytes.Length - DDS_HEAD…

MediatR 使用记录-发布订阅运行机制测试

注意&#xff1a;mediatR发布-订阅&#xff0c;订阅方是多个的时候是串行的&#xff0c;一个执行完才执行下一个 // 发送部分代码Console.WriteLine($"{DateTime.Now}-发送开始-");mediator.Publish<TestEvent>(new TestEvent("nancy"));Console.Wr…

HarmonyOS NEXT零基础入门到实战-第四部分

自定义组件: 概念: 由框架直接提供的称为 系统组件&#xff0c; 由开发者定义的称为 自定义组件。 源代码&#xff1a; Component struct MyCom { build() { Column() { Text(我是一个自定义组件) } } } Component struct MyHeader { build() { Row(…

Charles的使用配置(二)

Charles基础设置 抓包端口&#xff1a;Proxy->Proxy settings,全部选 设置系统的代理服务器 Charles电脑证书配置 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/304c604776bc45d59463c621c5a097e6.png Charles端设置SSL的端口 Proxy->ssl Proxying…