Vite 프로젝트를 화면에 어떻게 적용하나요? 공유할 수 있는 두 가지 옵션
Vite 프로젝트를 화면에 어떻게 적용하나요? 다음 기사에서는 Vite 프로젝트의 화면 적용을 위한 두 가지 솔루션을 공유할 것입니다. 매우 자세하게 설명되어 있습니다.
최근 프로젝트 팀의 학생인 샤오메이는 어려운 문제에 직면한 것 같아 항상 우울해 보입니다.
우리는 모두 프로젝트 팀이고 서로 돕고 문제를 함께 해결해야 한다는 의도로 Xiaomei에게 메시지를 보냈습니다.
나: "요즘 별로 행복하지 않은 것 같은데, 문제가 생겼나요?"
Xiaomei: "최근 vue3 프로젝트의 화면 적응에 대한 정보를 확인했는데 온라인 정보가 다음과 같습니다. 모두 vue2+webpack과 관련되어 있습니다. Vite 프로젝트에 적응하는 방법을 모르시나요? o(╥﹏╥)o”. [관련 추천: vuejs 동영상 튜토리얼]
나: "알았어, 형에게 맡겨, 내가 해결하도록 도와줄게!"
Xiaomei: "❤( ´・ᴗ・` )❤"
I 기사가 좋다고 생각하거나 자신의 발전에 도움이 될 수 있으니 좋아요와 수집을 환영합니다! ❤❤❤
rem 기반 적응 솔루션
rem이란?
rem은 일상적인 개발 과정에서 루트 요소(html/body)의 글꼴을 계산하기 편리한 10px로 설정하는 경우가 많습니다. 시간, 하위 요소의 1rem은 10px에 해당합니다).
적용 가능한 시나리오
고정된 화면 비율이 없는 웹 애플리케이션, 대부분의 비즈니스 시나리오에 적합
실제 전투 프로젝트
1. 설치 종속성
npm i postcss-pxtorem autoprefixer amfe-flexible --save-dev
postcss-pxtorem은 다음을 위한 플러그인입니다. Rem 단위로 픽셀 단위를 생성하는 데 사용되는 PostCSS
autoprefixer 브라우저 접두사 처리 플러그인
amfe-flexible 확장 가능한 레이아웃 솔루션은 원래lib-flexible
을 대체하고 다음과 호환되는뷰포트를 사용합니다. 현재 많은 브라우저
lib-flexible
选用了当前众多浏览器兼容的viewport
2、项目根目录创建 postcss.config.js
文件
module.exports = { plugins: { autoprefixer: { overrideBrowserslist: [ "Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 8", "last 10 versions", // 所有主流浏览器最近10版本用 ], grid: true, }, "postcss-pxtorem": { rootValue: 192, // 设计稿宽度的1/ 10 例如设计稿按照 1920设计 此处就为192 propList: ["*", "!border"], // 除 border 外所有px 转 rem selectorBlackList: [".el-"], // 过滤掉.el-开头的class,不进行rem转换 }, }, };
3、main.ts/js
文件中导入依赖
import "amfe-flexible/index.js";
4、项目重启
基于scale的适配方案
在CSS3中,我们可以使用transform属性的scale()方法来实现元素的缩放效果。缩放,指的是“缩小”和“放大”的意思。
- transform: scaleX(x); / 沿x轴方向缩放/
- transform: scaleY(y); / 沿y轴方向缩放/
- transform: scale(); / 同时沿x轴和y轴缩放/
适用场景
固定宽高比的Web应用,如大屏或者固定窗口业务应用
项目实战
1、新建resize.ts/js
文件
import { ref } from "vue"; export default function windowResize() { // * 指向最外层容器 const screenRef = ref(); // * 定时函数 const timer = ref(0); // * 默认缩放值 const scale = { width: "1", height: "1", }; // * 设计稿尺寸(px) const baseWidth = 1920; const baseHeight = 1080; // * 需保持的比例(默认1.77778) const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5)); const calcRate = () => { // 当前宽高比 const currentRate = parseFloat( (window.innerWidth / window.innerHeight).toFixed(5) ); if (screenRef.value) { if (currentRate > baseProportion) { // 表示更宽 scale.width = ( (window.innerHeight * baseProportion) / baseWidth ).toFixed(5); scale.height = (window.innerHeight / baseHeight).toFixed(5); screenRef.value.style.transform = `scale(${scale.width}, ${scale.height})`; } else { // 表示更高 scale.height = ( window.innerWidth / baseProportion / baseHeight ).toFixed(5); scale.width = (window.innerWidth / baseWidth).toFixed(5); screenRef.value.style.transform = `scale(${scale.width}, ${scale.height})`; } } }; const resize = () => { clearTimeout(timer.value); timer.value = window.setTimeout(() => { calcRate(); }, 200); }; // 改变窗口大小重新绘制 const windowDraw = () => { window.addEventListener("resize", resize); }; // 改变窗口大小重新绘制 const unWindowDraw = () => { window.removeEventListener("resize", resize); }; return { screenRef, calcRate, windowDraw, unWindowDraw, }; }
2、相关界面引入resize.ts/js
<template> <div> <div> <span>基于scale的适配方案</span> <img src="/static/imghw/default1.png" data-src="https://img2.baidu.com/it/u=1297807229,3828610143&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" class="lazy" alt="Vite 프로젝트를 화면에 어떻게 적용하나요? 공유할 수 있는 두 가지 옵션" > </div> </div> </template> <script> import windowResize from '../../utils/resize'; import {onMounted, onUnmounted} from 'vue'; const { screenRef, calcRate, windowDraw, unWindowDraw } = windowResize() onMounted(() => { // 监听浏览器窗口尺寸变化 windowDraw() calcRate() }) onUnmounted(() => { unWindowDraw(); }) </script> <style> .screen-container { height: 100%; background-color: lightcyan; display: flex; justify-content: center; align-items: center; .screen-content { width: 1920px; height: 1080px; background-color: #fff; display: flex; justify-content: center; align-items: center; flex-direction: column; .screen-title { font-size: 32px; } .screen-img { margin-top: 20px; } } } </style>
写在最后
推荐两个作者参与的开源项目,如果项目有帮助到你,欢迎star!
一个简单的基于Vue3、TS、Vite、qiankun技术栈的后台管理项目
:www.xkxk.tech
一个基于Vue3、Vite的炫酷大屏项目
2. 프로젝트 루트 디렉토리에 postcss.config.js
파일을 생성하세요
rrreee3.
main.ts/js
에서 종속성을 가져옵니다. > filerrreee
🎜Scale 기반 적응 솔루션🎜🎜🎜CSS3에서는 변환 속성의 scale() 메소드를 사용하여 스케일링을 달성할 수 있습니다. 요소의 효과. 줌(Zoom)은 '줌 아웃', '줌 인'의 의미를 가리킨다. 🎜
- transform: scaleX(x); / x축 방향으로 크기 조정/
- transform: scaleY(y) / y축 방향으로 크기 조정/
- transform : scale(); / x축과 y축을 동시에 크기 조정/
🎜적용 가능한 시나리오🎜🎜🎜웹 애플리케이션 대형 화면 또는 고정 창 비즈니스 애플리케이션과 같은 고정된 종횡비🎜🎜
🎜🎜실제 전투 프로젝트🎜🎜🎜1. 새로운 resize.ts/js
파일을 생성하세요🎜 🎜
🎜rrreee🎜2 . 관련 인터페이스 소개 resize.ts /js
🎜🎜
🎜rrreee마지막에 작성🎜🎜두 작가가 참여한 오픈소스 프로젝트를 추천합니다. 프로젝트가 도움이 되셨다면, 스타에 오신 것을 환영합니다! 🎜🎜Vue3, TS, Vite 및 qiankun 기술 스택을 기반으로 하는 간단한 백엔드 관리 프로젝트
: www.xkxk.tech🎜🎜🎜A 기반 Vue3, Vite의 멋진 대형 화면 프로젝트
: 🎜screen.xkxk.tech🎜🎜🎜(학습 영상 공유: 🎜웹 프론트엔드 개발🎜, 🎜기본 프로그래밍 영상🎜)🎜

🎜실제 전투 프로젝트🎜🎜🎜1. 새로운 resize.ts/js
파일을 생성하세요🎜 🎜
🎜rrreee🎜2 . 관련 인터페이스 소개 resize.ts /js
🎜🎜
🎜rrreee마지막에 작성🎜🎜두 작가가 참여한 오픈소스 프로젝트를 추천합니다. 프로젝트가 도움이 되셨다면, 스타에 오신 것을 환영합니다! 🎜🎜Vue3, TS, Vite 및 qiankun 기술 스택을 기반으로 하는 간단한 백엔드 관리 프로젝트
: www.xkxk.tech🎜🎜🎜A 기반 Vue3, Vite의 멋진 대형 화면 프로젝트
: 🎜screen.xkxk.tech🎜🎜🎜(학습 영상 공유: 🎜웹 프론트엔드 개발🎜, 🎜기본 프로그래밍 영상🎜)🎜
백엔드 관리 프로젝트
: www.xkxk.tech🎜🎜🎜A 기반 Vue3, Vite의 멋진 대형 화면 프로젝트
: 🎜screen.xkxk.tech🎜🎜🎜(학습 영상 공유: 🎜웹 프론트엔드 개발🎜, 🎜기본 프로그래밍 영상🎜)🎜
위 내용은 Vite 프로젝트를 화면에 어떻게 적용하나요? 공유할 수 있는 두 가지 옵션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

vue.js에서 bootstrap 사용은 5 단계로 나뉩니다 : Bootstrap 설치. main.js.의 부트 스트랩 가져 오기 부트 스트랩 구성 요소를 템플릿에서 직접 사용하십시오. 선택 사항 : 사용자 정의 스타일. 선택 사항 : 플러그인을 사용하십시오.

HTML 템플릿의 버튼을 메소드에 바인딩하여 VUE 버튼에 함수를 추가 할 수 있습니다. 메소드를 정의하고 VUE 인스턴스에서 기능 로직을 작성하십시오.

vue.js의 시계 옵션을 사용하면 개발자가 특정 데이터의 변경 사항을들을 수 있습니다. 데이터가 변경되면 콜백 기능을 트리거하여 업데이트보기 또는 기타 작업을 수행합니다. 구성 옵션에는 즉시 콜백을 실행할지 여부와 DEEP를 지정하는 즉시 포함되며, 이는 객체 또는 어레이에 대한 변경 사항을 재귀 적으로 듣는 지 여부를 지정합니다.

vue.js는 이전 페이지로 돌아갈 수있는 네 가지 방법이 있습니다. $ router.go (-1) $ router.back () 사용 & lt; router-link to = & quot;/quot; Component Window.history.back () 및 메소드 선택은 장면에 따라 다릅니다.

VUE 멀티 페이지 개발은 vue.js 프레임 워크를 사용하여 응용 프로그램을 구축하는 방법입니다. 여기서 응용 프로그램은 별도의 페이지로 나뉩니다. 코드 유지 보수 : 응용 프로그램을 여러 페이지로 분할하면 코드를보다 쉽게 관리하고 유지 관리 할 수 있습니다. 모듈 식 : 각 페이지는 쉬운 재사용 및 교체를 위해 별도의 모듈로 사용할 수 있습니다. 간단한 라우팅 : 페이지 간의 탐색은 간단한 라우팅 구성을 통해 관리 할 수 있습니다. SEO 최적화 : 각 페이지에는 자체 URL이있어 SEO가 도움이됩니다.

NetflixusesAcustomFrameworkCalled "Gibbon"BuiltonReact, NotreactorVuedirectly.1) TeamExperience : 2) ProjectComplexity : vueforsimplerProjects, 3) CustomizationNeeds : reactoffersmoreflex.4)

vue.js에서 JS 파일을 참조하는 세 가지 방법이 있습니다. & lt; script & gt; 꼬리표;; mounted () 라이프 사이클 후크를 사용한 동적 가져 오기; Vuex State Management Library를 통해 수입.

vue.js가 트래버스 어레이 및 객체에 대한 세 가지 일반적인 방법이 있습니다. V- 결합 지시문은 V-FOR와 함께 사용하여 각 요소의 속성 값을 동적으로 설정할 수 있습니다. .MAP 메소드는 배열 요소를 새 배열로 변환 할 수 있습니다.
