vue-cli4.x 엔터프라이즈급 프로젝트 작성 방법 단계

비계 설치(vue-cli)

$ npm install @vue/cli -g // 

항목 만들기

$ vue create vue-demo

프로젝트를 만들 때 사용할 수 있습니다.

$ vue ui

창설을 위한 두 가지 방식은 창설할 때 루트와 vuex를 직접 선택하여 프로젝트 창설을 진행합니다
이동단 Vant

#   npm  
$ npm i vant -S

#   yarn  
$ yarn add vant

제가 여기 다 쓰는 거예요. 필요에 따라 도입했어요.
babel-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 적합
Rem 적합
Vant의 스타일은 기본적으로 px를 단위로 사용하며,rem 단위를 사용해야 한다면 다음 두 가지 도구를 추천합니다
postcss-pxtorem 는postcss 플러그인으로 단위를rem로 바꾸는 데 사용
lib-flexible  rem 기준값 설정에 사용
단계
1.postcss-pxtorem 설치

$ npm install postcss-pxtorem --save-dev

2. lib-flexible 설치

$ npm i -S amfe-flexible || npm install --save lib-flexible

3. 메인에서js에 lib-flexible 도입

import 'lib-flexible';

4. 루트 디렉터리에postcss를 새로 만듭니다.config.js 파일, 파일에서 설정

module.exports = {
 plugins: {
  'autoprefixer': {
   browsers: ['Android >= 4.0', 'iOS >= 8']
  },
  'postcss-pxtorem': {
   rootValue: 37.5,
   propList: ['*']
  }
 }
}

vue-cli3에서 iconfont 사용하기
src/assets 폴더로 iconfont 다운로드
메인js에서 iconfont/iconfont를 인용합니다.css

import './assets/Iconfont/iconfont.css'

로컬 의존 중sass-loader가 있는지 확인하십시오. 설치가 필요하지 않으면

$ npm install css-loader --save-dev

파일에서 사용

<i class="iconfont iconsearch"></i>

sass 사용

npm install sass-loader --save-dev

이 vue-cli4에 관하여x기업급 프로젝트를 만드는 방법과 절차에 대한 글은 여기에 소개되어 있습니다.x기업급 프로젝트 내용을 만들려면 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 찾아보세요. 앞으로 많이 사랑해 주세요!