집 > 기사 > 웹 프론트엔드 > vue-cli를 사용하여 모바일 적응을 구성하는 방법은 무엇입니까?

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

亚连원래의: 2018-06-12 11:31:002405검색

이 글은 주로 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 &#39;lib-flexible&#39;

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

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: &#39;css-loader&#39;,
 options: {
  minimize: process.env.NODE_ENV === &#39;production&#39;,
  sourceMap: options.sourceMap
 }
}
var px2remLoader = {
 loader: &#39;px2rem-loader&#39;,
 options: {
  remUnit: 75
 }
}
// ...

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

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

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

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

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

관련 기사