vue-cli4.x 엔터프라이즈급 프로젝트 작성 방법 단계
2592 단어 vue-cli4.x만들다엔터프라이즈급
$ npm install @vue/cli -g //
$ vue create vue-demo
$ vue ui이동단 Vant
# npm
$ npm i vant -S
# yarn
$ yarn add vantbabel-plugin-import는 babel 플러그인으로 컴파일하는 과정에서 import의 쓰기를 필요에 따라 도입하는 방식으로 자동으로 변환합니다
플러그인 설치
npm i babel-plugin-import -D
// .babelrc
// ：webpack 1 libraryDirectory
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}
// babel7 ， babel.config.js
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};
// Vant
//
import { Button } from 'vant';Rem 적합
Vant의 스타일은 기본적으로 px를 단위로 사용하며,rem 단위를 사용해야 한다면 다음 두 가지 도구를 추천합니다
postcss-pxtorem 는postcss 플러그인으로 단위를rem로 바꾸는 데 사용
lib-flexible rem 기준값 설정에 사용
단계
1.postcss-pxtorem 설치
$ npm install postcss-pxtorem --save-dev
$ npm i -S amfe-flexible || npm install --save lib-flexible
import 'lib-flexible';
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 8']
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
src/assets 폴더로 iconfont 다운로드
메인js에서 iconfont/iconfont를 인용합니다.css
import './assets/Iconfont/iconfont.css'
$ npm install css-loader --save-dev
<i class="iconfont iconsearch"></i>
npm install sass-loader --save-dev
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Python의 사전 객체를 만드는 몇 가지 방법첫 번째 방법: {} 사용 설명: {} 빈 사전 객체 만들기 두 번째 방법:fromkeys() 방법 사용하기 설명:fromkeys()는dict류의staticmethod(정적 방법) 세 번째 방식:dict의 구조 방법...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
