衡山 22/11/20 vue3

最新推荐文章于 2024-09-02 17:34:07 发布
最新推荐文章于 2024-09-02 17:34:07 发布
阅读量53 收藏
点赞数
分类专栏： # 衡山 文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ninoninoni/article/details/127951537
版权
本文档详细介绍了如何在Vue项目中采用TypeScript进行开发，包括设置脚手架、配置国内镜像、初始化目录结构、解析main.ts和App.vue，以及组件的导入和使用。特别强调了在index.html中的声明和组件在父组件中的引入方式，为开发者提供了一份全面的Vue+TypeScript实践教程。
摘要由CSDN通过智能技术生成

目录

刘老师

在这里插入图片描述
选择vue
选择typescript
在这里插入图片描述
如果加载不出来，是因为国外源头太慢了
npm config set registry https://registry.npm.taobao.org
需要配置国内环境

脚手架目录在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
先进行目录的初始化
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
node_modules 存放各种依赖
src源代码
gitignore忽略
index。htm挂载文件（*。vue=）
package。json定义项目中需要依赖的包
main.ts入口文件

顺序

1.导入app。vue
2.

main。ts 导入内容样式， 挂载 mount-app

在这里插入图片描述

APP。vue 三剑客，展示template内容/导入

在这里插入图片描述
在这里插入图片描述

index。html app声明处

在这里插入图片描述

组件 compontens 网页内容

创建vue
刚新建好的vue
在这里插入图片描述

组件

在这里插入图片描述
自习查看新建组件的父组件，方便导入路径
在这里插入图片描述

新建了First。vue，就要在app。vue里面引入
上下两部分引入，上面导入import，下面导入first内容

first导入分两种形式：单簇和双簇，两个都演示一下
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在使用时导入按钮 全局加载
在这里插入图片描述

京屿大人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3+vite 通过js引入的src，在打包后为什么不能显示
肖肖肖丽珠的博客
09-02 139
页面有个图片我是动态设置的。但是打包之后一直没有找到。我本来使用的绝对定位发现不行，改成了相对的也不行，最后改成下面的这种就可以啦。
【基础】Three.js加载纹理贴图、加载外部gltf格式文件
stay hungry, stay foolish
09-02 1046
.gltf（JSON文件）: 描述模型的主要结构，包括几何体、材质、动画、场景等。.bin（二进制文件）: 存储顶点数据、法线、UV坐标等二进制数据。纹理（.png, .jpg）: 存储模型使用的纹理贴图。。
跨页面进行数据通讯
最新发布
榴莲不好吃的专栏
09-02 355
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
Vue双向绑定
m0_56131422的博客
09-01 553
简单来说，双向绑定就是数据改变影响视图，视图改变也会影响数据。Vue 的双向绑定主要通过v-model。
Vue的状态管理——Vuex3&4&Pinia
警警的博客
08-30 2309
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 1264
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
vue3+vant4父组件点击提交并校验子组件form表单
liuzaixi的博客
08-30 389
方法进行表单验证，如果验证通过则执行提交逻辑。获取子组件的引用，在父组件的点击事件中调用子组件的。这样父组件就可以通过。调用子组件的验证方法了。
vue part 5
E___V___E的博客
08-29 883
生命周期：1 .又名：生命周期回调函数、生命周期函数、生命周期钩广。2 .是什么：Vue在关键时刻用我们调用的一些特殊名称的函数。3•生命周期函数的名字不可史改，但函数的具体内容是程序员根据需求编写的.4 .生命周期函数中的this指向是vm或组件实例对象。
Nuxt3入门：样式的注入、定义和使用（第3节）
沐爸的博客
08-31 1143
在 Nuxt3 中，如何在本地或全局注入本地样式表？如何注入本地字体？如何分发NPM的样式表？单文件组件的动态样式、作用域样式、CSS模块、预处理器如何使用？
echarts组件——饼图
weixin_42255789的博客
08-28 313
饼图
Vue3搭建pinia环境
weixin_73060959的博客
08-28 928
在Vue 3中，Pinia 是 Vuex 的后续状态管理库，旨在提供 Vuex 5 中相似的功能，但具有更简洁的API、更好的TypeScript支持和模块热重载（HMR）等特性。
SpringBoot SSM vue在线作业考试系统
yinjl123456的博客
08-30 1064
使用技术: SpringBoot或SSM + Mybaits + Mysql + vue(前端)后台管理 登录注册 个人中心 教师信息管理 学生信息管理 学院信息管理 专业信息管理。班级信息管理 作业信息管理 作业提交管理 通知公告管理 试卷管理 试题管理。系统管理 管理员管理 考试管理。
Chapter 07 watch侦听器
2302_80253507的博客
08-30 1411
在 Vue 中，`watch` 侦听器是一个非常实用的工具，用于处理自定义数据的变化。本文详细讲解了 `watch` 侦听器的基本用法、深度侦听和常见应用场景。
ECharts实现雷达图详解
威哥爱编程，一个坚持研究技术的80后老鸟，擅长后端、AI 大模型、鸿蒙等技术体系，愿与你在技术路上一起成长！
09-02 1221
创建一个函数来获取新数据并更新雷达图。我们可以使用 AJAX 请求从服务器获取数据，或者使用任何其他方法来获取数据。// 假设这是获取数据的函数，可以是AJAX请求或其他方式// 这里使用setTimeout模拟数据更新name: '动态数据'// 更新雷达图数据series: [{name: '系列1',}]});// 递归调用以实现定期更新}, 2000);// 每2秒更新一次数据// 初始调用数据更新函数O了，完美展示一下效果。
页面中存在多个iframe，根据src查找iframe，js将里面的某个class隐藏
qq_37161741的博客
08-30 249
【代码】页面中存在多个iframe，根据src查找iframe，js将里面的某个class隐藏。
甘肃旅游网站研究与实现(阿龙原创设计，全网最新，旅游网站，甘肃旅游，全国旅游）✅
程序员阿龙的博客
08-29 1385
博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W+粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台的优质作者。通过长期分享和实战指导，我致力于帮助更多学生完成毕业项目和技术提升。 技术范围： 我熟悉的技术领域涵盖SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等方
React学习day03-components插件安装（仅基于火狐浏览器）、受控表单绑定、在React中获取dom、组件通信（组件间的数据传递）
2301_76648183的博客
08-28 973
根据嵌套关系的不同，有不同的通信方法已知：当把内容嵌套在子组件的标签中，父组件会自动再命名为children的props属性值接收该内容已知：已知：已知：
基于SpringBoot的在线考试系统【包含运行步骤】
小透明的博客
08-30 847
开发一个功能完善的在线考试系统是一个复杂但充满挑战的任务。随着技术的不断进步，我们相信在线考试系统将在提升教育质量和效率方面发挥更大的作用。如若大家想了解更多相关知识，请关注我，一名有故事的程序猿！！创作不易，都是自己一步一步去找并且总结的项目，麻烦大家给个关注和赞如有任何疑问或建议，请随时留言交流。
在线任务分发系统开发架构分析
qq_64301466的博客
08-29 516
在线任务分发系统是一个集任务发布、分配、执行、监控及反馈于一体的综合平台，它通过互联网技术实现任务的高效流转与管理。该系统旨在提高任务处理的效率和质量，降低沟通成本，并为任务发布者和接包者提供一个公平、透明的交易环境。在线任务分发系统的架构分析是一个综合性的过程，涉及多个技术层面和功能模块的设计。编辑：qawsed2466。
Already included file name 'd:/code/learnvue/vue_test/src/components/School.vue' differs from file name 'd:/code/learnvue/vue_test/src/components/school.vue' only in casing. The file is in the program because: Imported via './components/School.vue' from file 'd:/code/learnvue/vue_test/src/App.vue' Root file specified for compilation Root file specified for compilation
07-08
这个问题是由于文件名的大小写不一致所引起的。错误信息显示，文件名为'd:/code/learnvue/vue_test/src/components/School.vue'与'd:/code/learnvue/vue_test/src/components/school.vue'的大小写不同。 在这个程序中，文件被包含进来的原因有三个： 1. 从'd:/code/learnvue/vue_test/src/App.vue'文件中通过'./components/School.vue'导入。 2. 作为编译的根文件。 3. 作为编译的根文件。 解决这个问题的方法是，将文件名的大小写调整为一致。你可以通过将文件名改为全小写或者全大写来解决这个问题。确保在代码中引用文件时，大小写也要匹配。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值