Vue2.脚手架

  1. 全局安装:npm i @vue/cli -g
  2. 检查是否成功安装:vue --version
  3. 新建项目:vue create 项目名

通过nodejs安装的时候,可以直接代理和仓库,~/.npmrc文件内容如下:

proxy=socks5://127.0.0.1:7897
registry=https://registry.npmmirror.com

socks5://127.0.0.1:7897设置代理,因为我的电脑是监听的本地端口7897
https://registry.npmmirror.com注册表,设置仓库位置,这个是淘宝的仓库。
工程化开发中,不再直接编写模板语法,而是通过App.vue提供结构渲染。

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = true

new Vue({
  render: h => h(App),
}).$mount('#app')

import Vue from 'vue'导入Vue核心包。
import App from './App.vue'导入App.vue根组件。
Vue.config.productionTip = true是否提示当前环境:生产/开发。
.$mount('#app')el:'#app',用于指定Vue所管理的容器。
render: h => h(App),基于App创建元素结构,完整写法为:

render:(createElement)=>{
  return createElement(App)
}

箭头函数只有一句话,可以省略return和花括号。

组件化开发

一个页面可以拆分成一个个组件,每个组件都有自己独立的结构、样式、行为。
根组件:整个应用最上层的组件,包裹所有普通小组件。
App.vue文件组成:

  • template:结构
  • script:js逻辑
  • style:样式

image.png

less

  1. style加上lang="less"
  2. 安装依赖包less

yarn add less less-loader -D

组件注册

一般都用局部注册,如果发现确实是通用组件,再抽离到全局。

  • 局部注册:只能在局部使用
  • 全局注册:所有组件内都能使用

局部注册

在vue组件中局部注册。
在使用的组件内导入:
components:{}
image.png

全局注册

在main.js中全局注册。
import导入语句写在最上面(代码规范)。
import AppHeader from './components/AppHeader.vue';

  • 结尾的.vue可加可不加。

Vue.component('AppFooter',AppFooter);
image.png

关于position

MDN文档:https://developer.mozilla.org/en-US/docs/Web/CSS/position
如果是header,适合用sticky。

CV自文档:
The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.
This value always creates a new stacking context. Note that a sticky element “sticks” to its nearest ancestor that has a “scrolling mechanism” (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn’t the nearest actually scrolling ancestor.
A stickily positioned element is an element whose computed position value is sticky. It’s treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as “stuck” until meeting the opposite edge of its containing block.

该元素根据文档的正常流程定位,然后根据顶部、右侧、底部和左侧的值,相对于其最近的滚动祖先和包含块(最近的块级祖先)进行偏移,包括与表格相关的元素。偏移不会影响任何其他元素的位置。
该值始终会创建一个新的堆叠上下文。请注意,粘性元素会 "粘附 "到离它最近的、具有 “滚动机制”(在溢出为隐藏、滚动、自动或叠加时创建)的祖先上,即使该祖先不是离它最近的、实际滚动的祖先。
粘性定位元素是一种计算位置值为粘性的元素。它被视为相对定位元素,直到其包含块在其流根(或其滚动的容器)内越过指定阈值(如将顶部设置为自动以外的值),此时它被视为 "粘住 "元素,直到遇到其包含块的对边。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

QT周五作业

题目&#xff1a;实现简单水果的价格重量计算 点击一次水果重量1 自动计算总价 代码&#xff1a; widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QListWidgetItem> QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAME…

未来科技五年人工智能行业产业发展趋势最新竞争力

人工智能&#xff08;Artificial Intelligence&#xff0c;AI&#xff09;是近年来快速发展的热门领域&#xff0c;被广泛应用于各个行业。随着技术的不断创新和突破&#xff0c;人工智能行业的竞争力也在不断提升。本文将分析未来科技五年人工智能行业产业发展趋势&#xff0c…

“一键倒放,创意无限!让视频剪辑成为艺术“

你是否厌倦了常规的视频播放方式&#xff0c;想要寻找一种全新的、与众不同的方式来呈现你的视频内容&#xff1f;现在&#xff0c;我们为你带来一个革命性的工具&#xff0c;让你轻松实现视频批量倒放&#xff0c;激发无限创意&#xff01; 第一步。首先&#xff0c;我们要打…

基于SpringBoot的康复中心管理系统 JAVA简易版

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 普通用户模块2.2 护工模块2.3 管理员模块 三、系统展示四、核心代码4.1 查询康复护理4.2 新增康复训练4.3 查询房间4.4 查询来访4.5 新增用药 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的康复中…

第十七周周报

文章目录 摘要目标检测锚框交并比NMS 非极大值抑制输出 文献阅读&#xff1a;SMPL: A Skinned Multi-Person Linear ModelIntroductionRelated WorkModel FormulationTraining评估动态SMPL讨论结论 总结 摘要 本周看了三维人体重建的领域&#xff0c;看了一篇SMPL的文章&#…

Windows2012部署项目

目录 1.jdk的安装 2.Tomact安装 3.MySQL安装 4.项目部署 ​5.思维导图 1.jdk的安装 将jdk从主机复制到虚拟机里面&#xff0c;然后双击进行安装 安装完JDK之后&#xff0c;在系统的高级系统设置中点击环境变量&#xff0c;进行增加系统变量 变量名 : JAVA_HOME 变量值 : …

【深入挖掘Java技术】「源码原理体系」盲点问题解析之HashMap工作原理全揭秘(下)

盲点问题解析之HashMap工作原理全揭秘 承接上文创建HashMap对象参考容量&#xff08;capacity&#xff09;Hashmap内部有一个机制扩容阈值&#xff08;threshold&#xff09;负载因子&#xff08;loadFactor&#xff09; HashMap存储元素的过程HashMap的put方法JDK8的扩容机制N…

一键批量翻译,文件夹名称翻译器

文件夹名称往往是我们初步了解文件内容的重要窗口。有时&#xff0c;为了更好地与国际合作伙伴交流或是管理个人文件&#xff0c;我们需要对文件夹名称进行翻译。传统的逐一修改方法既费时又费力&#xff0c;还要借助翻译工具。现在有了【文件批量改名高手】&#xff0c;上面的…

OpenAI ChatGPT-4开发笔记2024-06:最简Embedding

Embedding embedding直译是&#xff1a;嵌入。和实际意思有些差距。其实就是把文本转换为向量表示的过程。用“向量化”更直接&#xff0c;但这又和tensor有点儿混。它是变成向量的一个过程。 embedding 的应用领域&#xff1a; 文本分类&#xff1a; 将文本嵌入转换为向量后…

js逆向第20例:猿人学第19题乌拉乌拉乌拉

文章目录 一、前言二、定位关键参数1、JA3/TLS指纹怎么查看2、加密值长度对比三、代码实现四、参考文献一、前言 任务十九:抓取这5页的数字,计算加和并提交结果 此题在以前用python写逆向代码是存在缺陷的,直到今年有个大佬开源了curl_cffi库,并且支持 JA3/TLS 和 http2 指…

提交代码,SVN被锁定,提示:svn is already locked解决方案

今天遇到一个问题&#xff0c;svn 在提交代码的时候出现了svn is already locked&#xff0c;解决方案如下图 点击clean up 点击ok即可 来看官方对clean up的解释&#xff1a;它的作用就是查找工作拷贝中的所有遗留的日志文件&#xff0c;删除进程中工作拷贝的锁。 参考&…

也谈人工智能——AI科普入门

文章目录 1. 科普入门人工智能的定义人工智能的类型 - 弱 AI 与强 AI人工智能、深度学习与机器学习人工智能的应用和使用场景语音识别计算机视觉客户服务建议引擎数据分析网络安全 行业应用人工智能发展史![img](https://img-blog.csdnimg.cn/img_convert/66aeaaeac6870f432fc4…

网络安全B模块(笔记详解)- MYSQL信息收集

MYSQL信息收集 1.通过渗透机场景Kali中的渗透测试工具对服务器场景MySQL03进行服务信息扫描渗透测试(使用工具Nmap,使用必须要使用的参数),并将该操作显示结果中数据库版本信息作为Flag提交; Flag:MySQL 5.5.12 2.通过渗透机场景Kali中的渗透测试工具对服务器场景MySQL0…

【RV1126 学习】SDK/ U-Boot/kernel/rootfs 编译学习

文章目录 RV1126芯片介绍rv1126 模块代码目录相关说明 SDK 包下的脚本使用build.sh 脚本使用envsetup.sh 脚本使用mkfirmware.sh 脚本使用rkflash.sh 脚本使用 U-Boot 编译和配置uboot 的配置修改编译操作 kernel 的修改编译rootfs 编译和配置buildroot 配置busybox 配置 固件打…

AI教我学编程之C#变量及实例演示

前言 在AI教我学编程之AI自刀 这篇文章中&#xff0c;我们知道了变量的基础类型&#xff0c;那么变量在C#中有什么作用呢&#xff1f;我们一起来看看吧&#xff01; 目录 重点先知 变量 变量类型 实例演示 变量声明 实例演示 提出疑问 初始化变量 自动初始化 多变量声明 实…

MySQL 从零开始:05 MySQL 数据类型

文章目录 1、数值类型1.1 整形数值1.2 浮点型数值1.3 布尔值 2、日期和时间类型3、字符串类型3.1 CHAR 和 VARCHAR3.2 BINARY 和 VARBINARY3.3 BLOB 和 TEXT3.4 ENUM 类型3.5 SET 类型 4、空间数据类型5、JSON 数据类型5、JSON 数据类型 前面的讲解中已经接触到了表的创建&…

0基础学习VR全景平台篇第137篇:720VR全景,DJI无人机遥控器调参

上课&#xff01;全体起立~ 大家好&#xff0c;欢迎观看蛙色官方系列全景摄影课程&#xff01; 这节课以御2为例 介绍的是无人机调参 步骤一&#xff1a;下载DJI Go 4并注册账号 步骤二&#xff1a;拿下遥杆并装好&#xff0c;展开遥控天线。将无人机与遥控器相连&#xff…

【开源】基于JAVA语言的固始鹅块销售系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 鹅块类型模块2.3 固始鹅块模块2.4 鹅块订单模块2.5 评论管理模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 鹅块类型表3.2.2 鹅块表3.2.3 鹅块订单表3.2.4 鹅块评论表 四、系统展示五、核心代码5.…

Camunda Event Based Gateway

一&#xff1a;bpmn 二&#xff1a;java 如果没有收到信号&#xff0c;超过等待时间&#xff0c;流程进入总经理审批&#xff0c;如果在等待时间内收到信号&#xff0c;流程进入副总经理审批。 示例1&#xff1a;发送信号事件&#xff0c;流程进入副总经理审批。 repository…

【Python机器学习】决策树集成——梯度提升回归树

理论知识&#xff1a; 梯度提升回归树通过合并多个决策树来构建一个更为强大的模型。虽然名字里有“回归”&#xff0c;但这个模型既能用于回归&#xff0c;也能用于分类。与随机森林方法不同&#xff0c;梯度提升采用连续的方式构造树&#xff0c;每棵树都试图纠正前一…
最新文章