【vue3】构建项目、项目中的示例组件使用的是组合式 API 和 ＜script setup＞

已于 2024-01-23 11:11:30 修改
阅读量64 收藏
点赞数
分类专栏： vue框架 文章标签： vue.js 前端 vue
于 2023-03-16 13:14:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67986791/article/details/129584173
版权

npm init vue@latest 指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。

将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示

生成的项目中的示例组件使用的是组合式 API 和 <script setup>

当准备将应用发布到生产环境时，请运行：npm run build

任尔东西南北风_A
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中通过<script></script>引入的Vue.js文件
04-28
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。 格式就是： <script src="./js/vue%20(1).js" type="text/javascript" charset="UTF-8"></script> src里面的内容根据自己的下载的Vue.js的...
vue3 组合式API ＜script setup＞中子组件之间传值逻辑
欢迎大家一起攻克bug
07-10 330
使用API选项时，我们可以通过this.$refs.name获取指定的元素或组件，但在组合API中不行。注意：使用 provide 进行数据传输时，尽量使用 readonly 封装数据，避免子组件修改父组件传递的数据。注意：默认情况下，setup 组件是关闭的，通过模板 ref 获取组件的公共实例。在 Vue 3.x 的 EventBus，我们可以看到它的 API 和旧版是非常接近的，只是去掉了。在父组件中，只需要监听子组件的自定义事件，然后执行相应的添加逻辑即可。在需要暴露交流事件的组件里，通过。
vue3 组合式API composition 简单使用
jyn15159的博客
03-12 2265
composition api 组合式API 官网文档 通过创建 Vue 组件，可以将界面中重复的部分连同其功能一起提取为可重用的代码段。 使用 (data、computed、methods、watch) 组件选项来组织逻辑通常都很有效。然而，当组件开始变得更大时，逻辑关注点的列表也会增长。尤其对于那些一开始没有编写这些组件的人来说，这会导致组件难以阅读和理解。 这种碎片化使得理解和维护复杂组件变得困难。选项的分离掩盖了潜在的逻辑问题。此外，在处理单个逻辑关注点时，必须不断地“跳转”相关代码的选项块。 如
Vue3 中使用组合式API替换mixins，实现代码复用并解决隐患
拿回忆下酒
02-02 3901
Vue3 中使用组合式API替换mixins，达到代码复用并解决隐患
Vue3 - ＜script setup＞ 单文件组件语法糖的使用教程示例 （SFC）
王佳斌
11-12 1775
vue3官方文档，Vue3.0的新语法糖-script setup，VUE3的 单文件组件 `script setup` 理解与实际上手案例，vue3中的单文件组件script setup详解，vue3中单文件组件``实例详解，Vue3之单文件组件(SFC)，初识vue3 之单文件组件 script setup，...script setup 语法——单文件组件，Vue3 script-setup 使用指南，vue3 script-setup语法糖，Vue3拒绝写return,用
详解VUE项目中安装和使用vant组件
10-17
主要介绍了VUE安装和使用vant组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
详解vue项目中调用百度地图API使用方法
10-17
主要介绍了vue项目中调用百度地图API使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-web-component：使用Vue CLI 3构建的示例Web组件
02-06
@quannt在vuejs中内置的示例Web组件 该小部件是使用并使用编译成一个Web组件。 最终的构建文件位于dist文件夹下。 您可以从localhost提供index.html来查看运行中的小部件。 构建设置 # install dependencies $ ...
vue 项目中使用Loading组件的示例代码
10-18
主要介绍了vue 项目中使用Loading组件的示例代码，使用 loding 过渡数据的加载时间
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 667
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue中的事件
weixin_43390711的博客
05-16 162
需要使用emit方法，emit(‘事件名’,参数)自定义事件名的规范（script中用小驼峰，模板中用短横线）1、组合api中2、setup语法糖中(非TS)3、setup语法糖中（使用TS）}>()
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1108
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
Vue.js的发展史（一）
2301_79683791的博客
05-15 755
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
基于Vue和uni-app的增强型多选框Checkbox组件开发
chenchuang0128的博客
05-16 350
该组件通过数据驱动、支持页面正反向传值等特性，提高了组件的灵活性和可重用性。未来，我们可以继续探索组件的更多可能性和应用场景，如支持条件筛选、异步加载数据等，以满足更复杂的前端需求。该组件不仅提供了基本的复选功能，还通过数据驱动、支持页面正反向传值等特性，进一步增强了组件的灵活性和可重用性。页面正反向传值：组件应该能够支持页面正反向传值，即能够将组件的状态传递给父组件，同时也能够接收父组件传递的数据。数据驱动：组件应该能够通过数据驱动，即组件的状态和行为应该由数据决定，而不是通过直接操作DOM元素来实现。
Vue3实战笔记（23）—路由Vue-Router 实战指南（关于路由命名那点事儿）
山花的博客
05-15 1040
除了 path 之外，你还可以为任何路由提供 name。在 Vue Router 中，命名路由是一种通过指定名称来标识路由的方式，而不是使用路径。这为路由的跳转提供了一种更直观和易于维护的方式。命名路由特别有用，尤其是在链接到路由时，不必硬编码 URL，也不必在路由对象中查找路径字符串。},在这个例子中，我们给路径为 /user/:username的路由命名为 user。User在这两种情况下，路由将导航到路径 /user/erina。
vue+elementui省市联动选择
atregret的博客
05-17 188
看上面官方文档，最清晰。
基于Vue3 + js-tool-big-box工具库实现3个随机数字的小游戏动画，快来挑战你的非凡手气！
xingyu_qie的专栏
05-17 836
基于Vue3 + js-tool-big-box的3个随机数字
四天学会JS高阶（学好vue的关键）——深入面向对象（理论+实战）（第三天）
最新发布
爱游戏爱学习的博客
05-20 563
深入对象 原型对象
vue3的<script setup></script>中provide/inject怎么用？
05-24
在 Vue 3 中，`<script setup>` 是一个新特性，它可以更简单地编写组件选项和组合式 API，并且可以提高性能。在 `<script setup>` 中使用 `provide/inject` 可以像在传统的 `setup()` 中使用一样，提供和注入依赖项。 下面是一个示例： ```vue <template> <div>{{ count }}</div> </template> <script setup> import { provide, inject, ref } from 'vue' const COUNT_KEY = Symbol() // 提供 count const provideCount = () => { const count = ref(0) provide(COUNT_KEY, count) } // 注入 count const useCount = () => { const count = inject(COUNT_KEY) return count } provideCount() </script> ``` 在上面的例子中，我们首先定义了一个 `COUNT_KEY`，它是一个唯一的 Symbol，用于提供和注入依赖项。然后我们定义了 `provideCount()` 函数，它提供了一个 `count` 响应式对象，并将其提供给其他组件。最后，我们使用 `useCount()` 函数在组件中注入 `count`。 注意，我们应该在 `<script setup>` 中立即调用 `provideCount()` 函数以提供 `count`，否则在注入 `count` 时会出现问题。 最后，我们可以在组件中使用 `useCount()` 函数来获取 `count`，并将其渲染到模板中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值