Vue-cli webpack 모바일 터미널을 사용하여 자동으로 rem을 빌드하는 방법
- php中世界最好的语言원래의
- 2018-05-26 15:41:001549검색
这次给大家带来如何使用Vue-cli webpack移动端自动化构建rem，使用Vue-cli webpack移动端自动化构建rem的注意事项有哪些，下面就是实战案例，一起来看一下。
많은 친구들이 모바일 프로젝트를 자동으로 rem으로 변환하길 원한다고 생각하는데, 이는 프런트 엔드 추세에 맞춰 손글씨나 편집기 플러그인으로 변경하는 것이 매우 불편하고 오류가 발생하기 쉽습니다. 이 방법을 통해 다음과 같은 문제가 발견되었습니다.
1 이전 비디오 튜토리얼을 따라한 결과 node npm webpack px2rem의 다양한 플러그인 버전이 다르고 쓸모가 없다는 것을 발견했습니다.
2 온라인 튜토리얼이 부족하고 불완전합니다. 그것을 알아내는 데 오랜 시간이 걸렸습니다. vscode의 cssrem을 수동으로 설정하는 것에 대해 생각해 보았지만 여전히 확신이 없어서 결국 자동화하기를 희망하면서 다음과 같은 방법을 생각해 냈습니다. rem은 모두의 모바일 터미널 구축에 도움이 됩니다
1 vue-cli 설치에 대해 자세히 설명하지 않겠습니다. 모두가 알아야 합니다.
2 px2rem-loader 설치 및 구성(여기서는 postcss를 사용하지 않았고 시도했습니다) 많은 문제가 있었지만 이것을 사용하기로 결정했습니다.
1단계: npm install px2rem-loader
2부: webpack.base.conf.js 아래에 객체를 추가합니다. 여기서는 sass를 사용합니다. 다음 규칙을 따르시면 이해하실 수 있을 거라 믿습니다
module.exports={
module: {
rules: [
{
test: /\.(css|less|scss)(\?.*)?$/,
loader: 'style-loader!css-loader!sass-loader!less-loader!postcss-loader'
}
]
}
}
3단계: webpack.dev.conf.js 아래 플러그인에 무언가를 추가하세요. 모든 사람은 remUnit 속성에 주의를 기울여야 합니다. Apple 5의 경우에는 40px입니다. 여기서는 40으로 설정하고 80으로 설정하는 사람도 있습니다. I 여기의 40은 hotcss에 사용하기 위한 것입니다. 아래에서 설명하겠습니다
plugins: [
new webpack.LoaderOptionsPlugin({
// webpack 2.0之后， 此配置不能直接写在自定义配置项中， 必须写在此处
vue: {
postcss: [require('postcss-px2rem')({ remUnit: 40, propWhiteList: [] })]
}
}
]
4부: 많은 사람들이 이것을 모르고 있습니다. 이 단계에서는 utils.js에서 const cssLoader를 찾아 ?importLoaders=1
const cssLoader = {
loader: 'css-loader?importLoaders=1',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}를 추가합니다. 지금까지 설치가 완료되었습니다.
입력 글꼴 크기:40px
출력 글꼴 크기:1rem(iPhone에서) )
3 우리는 기기마다 픽셀 비율이 다르다는 것을 모두 알고 있으므로 hotcss를 사용합니다. 기기의 픽셀 비율 링크를 조정합니다
src/assets/js/에 넣습니다. 어떤 이름이든 직접 정의할 수 있습니다. 여기서는 hotcss.js를 viewport.js로 변경했습니다.
module.exports = {
entry: {
app: './src/main.js',
rem: './src/assets/js/viewport.js'
}
}이제 끝났습니다이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. PHP 중국어 웹사이트의 다른 관련 기사도 주목해 보세요! 추천 도서:
JS를 사용하여 숫자 유형 배열의 최대 요소를 찾는 방법
vuex 프로젝트 구조 디렉터리 및 구성을 올바르게 사용하는 방법
위 내용은 Vue-cli webpack 모바일 터미널을 사용하여 자동으로 rem을 빌드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!