当前位置: 首页 > news >正文

Vue2向Vue3过度核心技术工程化开发和脚手架

目录

    • 1 工程化开发和脚手架
      • 1.1 开发Vue的两种方式
      • 1.2.脚手架Vue CLI
    • 2 项目目录介绍和运行流程
      • 2.1 项目目录介绍
      • 2.2 运行流程
    • 3 组件化开发
    • 4 根组件 App.vue
      • 4.1 根组件介绍
      • 4.2 组件是由三部分构成
      • 4.3 总结
    • 5 普通组件的注册使用-局部注册
      • 5.1 特点:
      • 5.2 步骤:
      • 5.3 使用方式:
      • 5.4 注意:
      • 5.5 语法:
      • 5.6 练习
      • 5.7 总结
    • 6 普通组件的注册使用-全局注册
      • 6.1 特点:
      • 6.2 步骤
      • 6.3 使用方式
      • 6.4 注意
      • 6.5 语法
      • 6.6 练习
      • 6.7 总结


1 工程化开发和脚手架

在这里插入图片描述

1.1 开发Vue的两种方式

  • 核心包传统开发模式:基于html / css / js 文件,直接引入核心包,开发 Vue。
  • 工程化开发模式:基于构建工具(例如:webpack)的环境中开发Vue。

在这里插入图片描述

工程化开发模式优点:

提高编码效率,比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识别的ES3/ES5/CSS等

工程化开发模式问题:

  • webpack配置不简单
  • 雷同的基础配置
  • 缺乏统一的标准

为了解决以上问题,所以我们需要一个工具,生成标准化的配置

1.2.脚手架Vue CLI

基本介绍:

Vue CLI 是Vue官方提供的一个全局命令工具

可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】

好处:

  1. 开箱即用,零配置
  2. 内置babel等工具
  3. 标准化的webpack配置

使用步骤:

  1. 全局安装(只需安装一次即可) yarn global add @vue/cli 或者 npm i @vue/cli -g
  2. 查看vue/cli版本: vue --version
  3. 创建项目架子:vue create project-name(项目名不能使用中文)
  4. 启动项目:yarn serve 或者 npm run serve(命令不固定,找package.json)

2 项目目录介绍和运行流程

2.1 项目目录介绍

在这里插入图片描述

虽然脚手架中的文件有很多,目前咱们只需人事三个文件即可

  1. main.js 入口文件
  2. App.vue App根组件
  3. index.html 模板文件

2.2 运行流程

在这里插入图片描述

3 组件化开发

​ 组件化:一个页面可以拆分成一个个组件,每个组件有着自己独立的结构、样式、行为。

​ 好处:便于维护,利于复用 → 提升开发效率。

​ 组件分类:普通组件、根组件。

​ 比如:下面这个页面,可以把所有的代码都写在一个页面中,但是这样显得代码比较混乱,难易维护。咱们可以按模块进行组件划分

在这里插入图片描述

总结:

组件化的好处是什么?

组件的分类?

4 根组件 App.vue

4.1 根组件介绍

整个应用最上层的组件,包裹所有普通小组件

在这里插入图片描述

4.2 组件是由三部分构成

  • 语法高亮插件

在这里插入图片描述

  • 三部分构成

    • template:结构 (有且只能一个根元素)
    • script: js逻辑
    • style: 样式 (可支持less,需要装包)
  • 让组件支持less

    (1) style标签,lang=“less” 开启less功能

    (2) 装包: yarn add less less-loader -D 或者npm i less less-loader -D

4.3 总结

App组件包含哪三部分?

5 普通组件的注册使用-局部注册

5.1 特点:

只能在注册的组件内使用

5.2 步骤:

  1. 创建.vue文件(三个组成部分)
  2. 在使用的组件内先导入再注册,最后使用

5.3 使用方式:

当成html标签使用即可 <组件名></组件名>

5.4 注意:

组件名规范 —> 大驼峰命名法, 如 HmHeader

5.5 语法:

在这里插入图片描述

// 导入需要注册的组件
import 组件对象 from '.vue文件路径'
import HmHeader from './components/HmHeader'export default {  // 局部注册components: {'组件名': 组件对象,HmHeader:HmHeaer,HmHeader}
}

5.6 练习

在App组件中,完成以下练习。在App.vue中使用组件的方式完成下面布局

在这里插入图片描述

<template><div class="hm-header">我是hm-header</div>
</template><script>
export default {}
</script><style>
.hm-header {height: 100px;line-height: 100px;text-align: center;font-size: 30px;background-color: #8064a2;color: white;
}
</style>
<template><div class="hm-main">我是hm-main</div>
</template><script>
export default {}
</script><style>
.hm-main {height: 400px;line-height: 400px;text-align: center;font-size: 30px;background-color: #f79646;color: white;margin: 20px 0;
}
</style>
<template><div class="hm-footer">我是hm-footer</div>
</template><script>
export default {}
</script><style>
.hm-footer {height: 100px;line-height: 100px;text-align: center;font-size: 30px;background-color: #4f81bd;color: white;
}
</style>

5.7 总结

  • A组件内部注册的局部组件能在B组件使用吗
  • 局部注册组件的步骤是什么
  • 使用组件时 应该按照什么命名法

6 普通组件的注册使用-全局注册

6.1 特点:

全局注册的组件,在项目的任何组件中都能使用

6.2 步骤

  1. 创建.vue组件(三个组成部分)
  2. main.js中进行全局注册

6.3 使用方式

当成HTML标签直接使用

<组件名></组件名>

6.4 注意

组件名规范 —> 大驼峰命名法, 如 HmHeader

6.5 语法

Vue.component(‘组件名’, 组件对象)

例:

// 导入需要全局注册的组件
import HmButton from './components/HmButton'
Vue.component('HmButton', HmButton)

6.6 练习

在以下3个局部组件中是展示一个通用按钮

在这里插入图片描述

<template><button class="hm-button">通用按钮</button>
</template><script>
export default {}
</script><style>
.hm-button {height: 50px;line-height: 50px;padding: 0 20px;background-color: #3bae56;border-radius: 5px;color: white;border: none;vertical-align: middle;cursor: pointer;
}
</style>

6.7 总结

1.全局注册组件应该在哪个文件中注册以及语法是什么?

2.全局组件在项目中的任何一个组件中可不可以使用?

相关文章:

Vue2向Vue3过度核心技术工程化开发和脚手架

目录 1 工程化开发和脚手架1.1 开发Vue的两种方式1.2.脚手架Vue CLI 2 项目目录介绍和运行流程2.1 项目目录介绍2.2 运行流程 3 组件化开发4 根组件 App.vue4.1 根组件介绍4.2 组件是由三部分构成4.3 总结 5 普通组件的注册使用-局部注册5.1 特点&#xff1a;5.2 步骤&#xff…...

Expected all tensors to be on the same device, but found at least two devices

Expected all tensors to be on the same device, but found at least two devices, 原因是计算的过程中&#xff0c;两个不同类型的变量在一起进行运算&#xff0c;即一个变量存储在gpu中&#xff0c;一个变量存储在cpu中&#xff0c;两个变量的存储位置冲突&#xff0c;导致无…...

Mysql备份命令Mysqldump导入、导出以及压缩成zip、gz格式

1、导出 命令&#xff1a;mysqldump -u用户名 -p数据库密码 数据库名 > 文件名 如果用户名需要密码&#xff0c;则需要在此命令执行后输入一次密码核对&#xff1b;如果数据库用户名不需要密码&#xff0c;则不要加“-p”参数&#xff0c;导入的时候相同。注意输入的用户名…...

App卡帧与BlockCanary

作者&#xff1a;图个喜庆 一&#xff0c;前言 app卡帧一直是性能优化的一个重要方面&#xff0c;虽然现在手机硬件性能越来越高&#xff0c;明显的卡帧现象越来越少&#xff0c;但是了解卡帧相关的知识还是非常有必要的。 本文分两部分从app卡帧的原理出发&#xff0c;讨论屏…...

bpmnjs Properties-panel拓展(ExtensionElements拓展篇)

接上文bpmnjs Properties-panel拓展&#xff08;属性设置篇&#xff09;&#xff0c;继续记录下第三个拓展需求的实现。 需求简述 在ExclusiveGateway标签的extensionElements标签中增加子标签<activiti:executionListener>子标签&#xff0c;可增加复数子标签。子标签…...

虚拟机的使用

首先需要安装VMware软件&#xff0c;这是虚拟机&#xff0c;在里面可以实现在windows的笔记本上运行包括&#xff0c;windows11和linux系统的开发和研究。 VMware是一种虚拟化技术&#xff0c;可以让你在一台物理计算机上运行多个操作系统和应用程序&#xff0c;而不需要重启或…...

CSS Flex布局

前言 Flex布局&#xff08;弹性盒子布局&#xff09; 是一种用于在容器中进行灵活和自适应布局的CSS布局模型。通过使用Flex布局&#xff0c;可以更方便地实现各种不同尺寸和比例的布局&#xff0c;使元素在容器内自动调整空间分配。 Flex-组成 Flex布局由以下几个主要组成部分…...

Virtual

虚拟接口可以用作编写操作系统和驱动程序独立测试的一种方式。任何连接到同一通道(来自同一Python进程)的VirtualBus实例都将相互接收消息。 如果消息应跨进程或主机边界发送,请考虑使用多播IP接口,并参考虚拟接口对不同虚拟接口进行比较和一般性讨论。 Example import …...

6、监测数据采集物联网应用开发步骤(5.2)

监测数据采集物联网应用开发步骤(5.1) 包含4个类数据库连接&#xff08;com.zxy.db_Self.ConnectionPool_Self.py&#xff09;、数据库操作类&#xff08;com.zxy.db_Self.Db_Common_Self.py&#xff09;、数据库管理类&#xff08;com.zxy.db_Self.DBManager_Self.py&#xf…...

解释 Git 的基本概念和使用方式

该文为AI自动生成&#xff0c;InsCode AI 创作助手 Git 是一种版本控制工具&#xff0c;用于跟踪代码或文件的更改历史记录。以下是 Git 的基本概念和使用方式&#xff1a; 仓库 (Repository)&#xff1a;仓库是一个存储项目代码和历史记录的地方&#xff0c;可以在本地或远程…...

不同ubuntu系统下的不同ros系统可以互相通讯吗

可以的,不同版本的Ubuntu系统和ROS版本的机器仍然可以实现ROS节点之间的通信。 主要的原因有:1. ROS节点间通信是通过ROS master实现的。不同机器上的ROS节点都可以连接到同一个ROS master,从而实现通信。 2. ROS消息系统可以兼容不同的ROS版本。即使节点使用的ROS版本不同,也…...

数学建模-模型详解(2)

微分模型 当谈到微分模型时&#xff0c;通常指的是使用微分方程来描述某个系统的动态行为。微分方程是描述变量之间变化率的数学方程。微分模型可以用于解决各种实际问题&#xff0c;例如物理学、工程学、生物学等领域。 微分模型可以分为两类&#xff1a;常微分方程和偏微分…...

IT运维:使用数据分析平台监控DELL服务器

概述 在企业日常运维中&#xff0c;我们有着大量的服务器设备&#xff0c;设备故障一般可以通过常用的监控软件实现自动告警&#xff0c;但如果在管理运维中我们要做的不仅仅是发现故障&#xff0c;处理硬件故障&#xff0c;我们还需要进一步的了解&#xff0c;今年一共出现了多…...

Spring Cloud Alibaba-Sentinel规则

1 流控规则 流量控制&#xff0c;其原理是监控应用流量的QPS(每秒查询率) 或并发线程数等指标&#xff0c;当达到指定的阈值时 对流量进行控制&#xff0c;以避免被瞬时的流量高峰冲垮&#xff0c;从而保障应用的高可用性。 第1步: 点击簇点链路&#xff0c;我们就可以看到访…...

go http-proxy

我们这里主要讲使用HTTP&#xff0f;1.1协议中的CONNECT方法建立起来的隧道连接&#xff0c;实现的HTTP Proxy。这种代理的好处就是不用知道客户端请求的数据&#xff0c;只需要原封不动的转发就可以了&#xff0c;对于处理HTTPS的请求就非常方便了&#xff0c;不用解析他的内容…...

用变压器实现德-英语言翻译【01/8】:嵌入层

一、说明 本文是“用变压器实现德-英语言翻译”系列的第一篇文章。它引入了小规模的嵌入来建立感知系统。接下来是嵌入层的变压器使用。下面简要概述了每种方法&#xff0c;然后是德语到英语的翻译。 二、技术背景 嵌入层的目标是使模型能够详细了解单词、标记或其他输入之间的…...

【vue3.0中ref与reactive的区别及使用】

什么是ref与reactive ref与reactive都是Vue3.0中新增的API&#xff0c;用于响应式数据的处理。 1. ref ref是一个函数&#xff0c;可以用于将一个普通的数据类型转换成响应式数据。ref返回一个包含value属性的对象&#xff0c;通过修改value属性的值&#xff0c;可以触发组件…...

计算机竞赛 基于情感分析的网络舆情热点分析系统

文章目录 0 前言1 课题背景2 数据处理3 文本情感分析3.1 情感分析-词库搭建3.2 文本情感分析实现3.3 建立情感倾向性分析模型 4 数据可视化工具4.1 django框架介绍4.2 ECharts 5 Django使用echarts进行可视化展示5.1 修改setting.py连接mysql数据库5.2 导入数据5.3 使用echarts…...

C++ 动态分配内存|动态数组

int** arr new int* [n]; for (int i 0; i < n; i) {arr[i] new int[2]; } 以上代码是用C动态分配了一个二维数组arr&#xff0c;其中arr是一个指向int指针的指针&#xff0c;n是一个整数。代码的目的是创建一个包含n个大小为2的整数数组的二维数组。 首先&#xff0c;…...

React Diff算法原理

文章目录 前言Diff算法原理 前言 &#x1f449;点此&#xff08;想要了解Diff算法&#xff09; Diff算法原理 React Diff算法是React用于更新虚拟DOM树的一种算法。它通过比较新旧虚拟DOM树的差异&#xff0c;然后只对有差异的部分进行更新&#xff0c;从而提高性能。 Reac…...

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...