自学内容网 自学内容网
自学内容网 > 正文

vue3.0学习笔记（一）——

🕗 发布于 2024-07-22 04:39 学习  笔记  前端  

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 文件，查看其中的 dependencies 和 devDependencies。这通常可以告诉你正在使用的打包工具。
    • 如果看到 vite，那么你使用的是 Vite。
    • 如果看到 webpack，那么你使用的是 Webpack。
    • 如果看到 rollup，那么你使用的是 Rollup。
  • 检查项目根目录下的文件： 
    • 如果你找到 vite.config.js 或 vite.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项目中。

6. 组合API-setup函数

使用细节：

  • setup 是一个新的组件选项，作为组件中使用组合API的起点。
  • 从组件生命周期来看，它的执行在组件实例创建之前vue2.x的beforeCreate执行。
  • 这就意味着在setup函数中 this 还不是组件实例，this 此时是 undefined
  • 在模版中需要使用的数据和函数，需要在 setup 返回（return）。


原文地址：https://blog.csdn.net/weixin_56370772/article/details/140593758

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024