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 = truenew 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.mzph.cn/news/619653.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Kafka的核心原理

Topic的分区和副本机制 分区有什么用呢? 作用: 1- 避免单台服务器容量的限制: 每台服务器的磁盘存储空间是有上限。Topic分成多个Partition分区,可以避免单个Partition的数据大小过大,导致服务器无法存储。利用多台服务器的存储能力&#…

Matlab数学建模算法之模拟退火算法(SA)详解

🔗 运行环境:Matlab 🚩 撰写作者:左手の明天 🥇 精选专栏:《python》 🔥 推荐专栏:《算法研究》 🔐#### 防伪水印——左手の明天 ####🔐 💗 大家…

WEB 3D技术 three.js 聚光灯

本文 我们来说说 点光源和聚光灯 点光源 就像一个电灯泡一样 想四周发散光 而聚光灯就像手电筒一样 像一个方向射过去 距离越远范围越大 光越弱 我们先来看一个聚光灯的效果 我们可以编写代码如下 import ./style.css import * as THREE from "three"; import { O…

【JavaScript】深度理解js的函数(function、Function)

简言 学了这么久的JavaScript,函数在JavaScript中最常用之一,如果你不会函数,你就不会JavaScript。 函数就是Function对象,一个函数是可以通过外部代码调用的一个“子程序”,它是头等(first-class&#xf…

linux 如何创建文件

我们在写一些教程的时候,经常会需要创建一些用于演示的文档,这些文档往往需要填充一些不特定的内容。那么如何快速的创建演示用的文档呢? docfaker.py docfaker.py是一个py脚本,用于创建一个简单的txt文档,docfaker.…

MySQL 从零开始:06 数据检索

文章目录 1、数据准备2、限制结果3、完全限定名4、排序检索 所谓数据检索,就是前面所讲的”增删改查“的”查“。 注:本文使用的“行”指数据表中的“记录”,“列”指数据表中的“字段”。 在第四节《表的增删改查》中已经介绍了 select 查询…

Hive命令行运行SQL将数据保存到本地如何去除日志信息

1.场景分析 先有需求需要查询hive数仓数据并将结果保存到本地,但是在操作过程中总会有日志信息和表头信息一起保存到本地,不符合业务需要,那如何才能解决该问题呢? 废话不多少,直接上代码介绍: 2.问题解决…

回归预测 | Matlab实现SSA-CNN-LSTM-Attention麻雀优化卷积长短期记忆神经网络注意力机制多变量回归预测(SE注意力机制)

回归预测 | Matlab实现SSA-CNN-LSTM-Attention麻雀优化卷积长短期记忆神经网络注意力机制多变量回归预测(SE注意力机制) 目录 回归预测 | Matlab实现SSA-CNN-LSTM-Attention麻雀优化卷积长短期记忆神经网络注意力机制多变量回归预测(SE注意力…

计算机网络NCEPU复习资料

目录 一.概述: 计算机网络组成: 计算机网络分类: 计算机网络体系结构: C/S架构与P2P架构区别: OSI开放式系统互连参考模型: OSI开放式系统互连参考模型 相关协议: 五层协议网…

Vue.js设计与实现阅读-3

Vue设计与实现阅读-3 1、声明式描述UI2、渲染器3、组件4、模板的工作原理5、Vue.js 是各个模块组成的有机整体 前言 前面一章我们了解了,开发体验是衡量一个框架的重要指标之一。提供友好的警告信息至关重要,但是越详细的警告信息,意味着框架…

5 微信小程序

功能开发 5 功能开发概要今日详细1.发布1.1 发布流程的问题1.2 组件:进度条1.3 修改data中的局部数据1.4 发布示例效果前端后端 1.5 闭包 2.获取前10条新闻(动态/心情,无需分页)3.复杂版4.文章详细页面 各位小伙伴想要博客相关资料…

【python入门】day26: 模拟高铁售票系统

界面 代码 #-*- coding:utf-8 -*- import prettytable as pt#---------导入漂亮表格 import os.path filename ticket.txt#更新座位状态 def update(row_num):#------更新购票状态with open(filename,w,encodingutf-8) as wfile:for i in range(row_num):lst1 [f{i1},有票,有…

Modbus协议学习第一篇之基础概念

什么是“协议” 大白话解释:协议是用来正确传递消息数据而设立的一种规则。传递消息的双方(两台计算机)在通信时遵循同一种协议,即可理解彼此传递的消息数据。 Modbus协议模型 Modbus协议模型较为简单,使用一种称为应用…

soc算法【周末总结】

1 实验一(SOC误差30%放电实验) 1.1 实验过程 1、对电池包进行充电,将昨天放空的电池包进行充电,充电至SOC40%左右; 2、电池包SOC为38%时,手动修改SOC值为70%,开始放电 3、SOC由70%缓慢降至4…

Windows下面基于pgsql15的备份和恢复

一、基础备份 1.创建一个文件用来存储备份数据 2.备份指令 $CurrentDate Get-Date -Format "yyyy-MM-dd" $OutputDirectory "D:\PgsqData\pg_base\$CurrentDate" $Command "./pg_basebackup -h 127.0.0.1 -U postgres -Ft -Pv -Xf -z -Z5 -D $O…

教育观察期刊投稿邮箱、投稿要求

《教育观察》创刊于2012年,是国家新闻出版总署批准的正规教育类学术期刊,本刊致力于在教育实践中以“观察”为方法,以“观察者”为主体,以“新观察”为旨趣,打造从教育实践中洞察教育未来的教育研究与交流的平台。主要…

关于Quartz远程调用服务方法失败如何解决,@Inner详细介绍

1.单独在要调用服务的controller写上相关方法(Inner(value true)要走aop,会检测是否有内部调用标识)具体见下述 2. 编写Feign远程调用的接口,注意加上RequestHeader(SecurityConstants.FROM) String from。因为inner(value true…

【LabVIEW FPGA入门】LabVIEW FPGA实现I2S解码器

该示例演示了如何使用 LabVIEW FPGA 解码 IS 信号。该代码可用于大多数支持高速数字输入的LabVIEW FPGA 目标(例如R 系列、CompactRIO)。IS 用于对系统和组件内的数字音频数据进行编码。例如,MP3 播放器或 DVD 播放器内部的数字音频通常使用 …

【从零开始学习Java重要集合】深入解读ThreadLocal类

目录 前言: ThreadLocal: ThreadLocal的内部结构: ThreadLocal的常用方法: 1.set方法: 2.get方法: 3.setInitialValue方法 remove方法(): ThreadLocalMap&…

MySQL数据库入门到大牛_高级_00_MySQL高级特性篇的内容简介

文章目录 一、整个MySQL的思维导图二、MySQL高级特性篇大纲1. MySQL架构篇2. 索引及调优篇3. 事务篇4. 日志与备份篇 一、整个MySQL的思维导图 下图为整个MySQL内容,01-05是基础篇,06-09是高级篇 二、MySQL高级特性篇大纲 MySQL高级特性分为4个篇章&…