vue-cli를 사용하여 모바일 적응을 구성하는 방법은 무엇입니까?

이 글은 주로 vue-cli를 기반으로 모바일 화면 적응을 구성하는 방법에 대한 자세한 설명을 소개합니다. 이제는 공유하여 참고용으로 제공합니다

모바일 화면 적응에 관한 글을 전에 쓴 적이 있습니다: 모바일 화면 적응에 대한 솔루션 , 오늘은 vue-cli 구성에 따른 모바일 화면 적응 문제에 대해 이야기해 보겠습니다.

레시피는 여전히 동일합니다. Taobao의 lib-flexible + rem

유연한 구성

lib-flexible 설치

명령줄에서 다음 설치를 실행하세요.

npm i lib-flexible --save

Introduce lib-flexible

프로젝트 항목 파일 main.js에 lib-flexible

// main.js
import 'lib-flexible'

을 도입하고 메타 태그를 추가합니다

rem

In에 프로젝트 루트 디렉터리의 index.html에 다음과 같은 Meta

<meta name="viewport" content="width=device-width, initial-scale=1.0">

px를 추가합니다. 실제 개발에서는 디자인을 전달합니다. 초안에서 얻은 값 단위는 px이므로 px를 rem으로 변환한 후 스타일에 작성해야 합니다.

px를 rem으로 변환 웹팩 로더가 있는 px2rem 도구를 사용합니다: px2rem-loader

Install px2rem-loader

명령줄에서 다음 설치를 실행하세요:

npm i px2rem-loade --save-dev

Configure px2rem-loade

vue-cli에 의해 생성된 webpack 구성에서 vue-loader 및 기타 스타일 파일 로더의 옵션은 최종적으로 build/utils.js의 메소드에 의해 생성됩니다.

cssLoader 뒤에 px2remLoader만 추가하면 됩니다. px2rem-loader의 remUnit 옵션은 1rem = lib-flexible 솔루션과 결합하여 px2remLoader의 options.remUnit을 디자인 너비의 1로 설정한다는 의미입니다. draft./10, 여기서는 디자인 초안의 너비가 750px이라고 가정합니다.

// utils.js
var cssLoader = {
 loader: 'css-loader',
 options: {
  minimize: process.env.NODE_ENV === 'production',
  sourceMap: options.sourceMap
 }
}
var px2remLoader = {
 loader: 'px2rem-loader',
 options: {
  remUnit: 75
 }
}
// ...

그리고 로더 배열에 넣어야 합니다

// utils.js
function generateLoaders(loader, loaderOptions) {
 var loaders = [cssLoader, px2remLoader]
 // ...

구성을 수정한 후 다시 시작해야 합니다. 그런 다음 컴포넌트에 직접 유닛을 작성하고 디자인 초안만큼 작성할 수 있습니다. 더 편안합니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

vue에서 데이터 변경을 자동으로 감지하도록 watch를 구현하는 방법

Parcel을 사용하여 패키징하는 방법

Vue가 패키징 도구를 구성하는 방법에 대한 자세한 설명

변경 사항에 대한 자세한 답변 vue는 구성요소에 영향을 미칠까요?

JavaScript를 사용하여 복권 시스템을 구현하는 방법

위 내용은 vue-cli를 사용하여 모바일 적응을 구성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!