vue element ui scaffold webpack4
1.0.0
webpack5로 업그레이드되었습니다 . webpack4를 사용해야 하는 경우 git checkout webpack4 로 분기를 전환할 수 있습니다.
**vue3 + element-ui + webpack5 버전: 전환 가능한 브랜치: git checkout vue3 **
이 프로젝트는 Vue에서 element-plus를 사용하고 webpack5를 기반으로 구축된 다중 페이지, 다중 환경 스캐폴딩 프로젝트입니다.
프로젝트 효과 미리보기 1 프로젝트 효과 미리보기 2
git clone https://github.com/hzsrc/vue-element-ui-scaffold-webpack4.git
# git checkout vue3
cd vue-element-ui-scaffold-webpack4
npm install
빌드 속도가 빨라지고 패키지 파일 크기가 작아집니다.
html 페이지 파일을 자동으로 출력하는 두 가지 방법(html-webpack-plugin으로 구현):
개발 중에 src/iconfont/svgs 디렉토리의 svg 파일을 수정하거나 추가 또는 삭제하여 글꼴 아이콘(ttf, woff2, woff, eot, svg 지원)을 자동으로 생성하고 CSS 스타일과 html 미리보기를 동시에 지원합니다. 즉각적으로 효과를 보실 수 있습니다. npm run build-font를 사용하여 이러한 파일을 수동으로 생성할 수도 있습니다. 글꼴 아이콘, CSS 및 아이콘 미리 보기를 생성하고 수정하기 위해 icomoon.io 또는 iconfont.cn으로 수동으로 이동할 필요가 없습니다. webpack-iconfont-plugin-nodejs를 기반으로 구현되었습니다.
프로젝트는 백엔드 인터페이스의 데이터 시뮬레이션으로 동적 모커를 사용할 수 있습니다. 시뮬레이션 데이터는 mock 폴더에 위치하며, 이해하기 쉽고 편리하며 유연한 js 파일을 이용하여 구현됩니다.
활성화 방법: 1. npm run dev는 기본적으로 모의 서비스를 동시에 시작합니다. 2. 혼자 실행: npm run mock.
구성 파일: 1. config/serverMap.js의 인터페이스 서비스 주소는 다음과 같습니다. base: '"//localhost:8085"' 2. mock/mock-config.js 파일은 모의의 다양한 매개변수를 구성합니다.
CSS 주문형 로딩 소스는 미리 컴파일된 CSS 파일이 아닌 element-plus의 scss 파일을 직접 가리킵니다. Join-file-content-plugin 플러그인을 통해 컴파일 타임에 src/assets/css/element-theme/theme-changed.scss 파일을 element-plus 테마 변수 파일 theme-chalk/src/common/var.scss에 추가합니다. . 요소+scss 파일을 CSS 파일로 미리 컴파일하지 않고도 scss 변수를 수정한 후 즉시 효과를 볼 수 있습니다. 동시에, element-plus의 scss 변수는 프로젝트의 어느 곳에서나 참조될 수 있습니다.
webpack 구축 시 webpack-theme-color-replacer 플러그인을 사용하여 CSS에서 테마 색상이 포함된 스타일 규칙을 추출하고 css/theme-colors.css 파일을 생성합니다. 그런 다음 웹페이지가 실행되면 이 CSS 파일을 다운로드하고 해당 파일의 색상을 사용자 정의 테마 색상으로 동적으로 바꿉니다. 컬러 관련 CSS만 추출하기 때문에 엘리먼트플러스 CSS 전체를 다운로드하는 것보다 속도가 훨씬 빠릅니다. 그리고 요소 플러스 스타일뿐만 아니라 프로젝트에서 직접 작성한 스타일의 테마 색상도 교체할 수 있습니다.
코드를 게시하면 소스 코드 매핑 파일이 통합 소스 코드 매핑 폴더에 생성되고 테스트 환경에 자동으로 매핑됩니다. 코드 보안을 위해 프로덕션 환경에서는 자동 매핑을 수행하지 않습니다. 디버깅이 필요한 경우 Chrome은 URL을 통한 소스 코드 수동 매핑을 지원합니다. 보안 요구사항에 따라 본 소스코드 매핑 폴더명은 개발자만 아는 폴더명입니다. 또는 동적 암호화 알고리즘을 사용하여 이 폴더 이름을 생성하세요. 또는 로그인 확인이 필요한 웹사이트 디렉토리에 이러한 소스 코드 매핑 파일을 배치하세요. 필요에 따라 config/index.js 파일의 getSourceMapPath 함수에서 디렉터리 이름을 수정하세요. 이러한 방식으로 버그가 발생하고 온라인 디버깅이 필요한 경우 소스 코드 매핑을 신속하고 수동으로 추가하여 디버깅을 용이하게 하고 소스 코드 유출을 방지할 수 있습니다.
반응형 레이아웃을 구현하려면 vw+rem의 간단한 솔루션을 사용하세요. postcss-pxtorem 플러그인을 사용하면 CSS의 단위를 px에서 rem으로 자동 변환할 수 있습니다. 개발 중에는 px가 여전히 CSS 길이 단위로 사용됩니다. 1rem = 100px, 디버깅 중에 변환하기 쉽습니다. PC 및 모바일 단말에 공통(element-plus를 모바일 단말용 다른 UI 프레임워크로 교체하는 것이 가장 좋습니다).
IE10 이상, Chrome, Firefox, Safari, QQ, 360, 2345 및 기타 브라우저와 호환됩니다. 모바일 버전으로 변경해야 하는 경우 .browsersrc를 모바일 버전으로 수정하세요.
npm run dev
로컬 개발 및 디버깅. config/serverMap.js에서 개발자가 구성한 백엔드 인터페이스 서비스 주소를 사용하세요.
npm run build-test
테스트 환경 배포에 사용됩니다. js에는 소스 코드 매핑이 있고 CSS에는 소스 코드 매핑이 없습니다. config/serverMap.js에서 테스트로 구성한 인터페이스 서비스 주소를 사용합니다.
npm run build
프로덕션 환경 배포용. config/serverMap.js에서 prod로 구성된 인터페이스 서비스 주소를 사용합니다.
npm run build-demo
구성은 프로덕션 환경과 동일하며 인터페이스 서비스 주소만 다릅니다. config/serverMap.js의 데모에서 구성한 인터페이스 서비스 주소를 사용합니다.
npm run build-dev
개발 환경 서버에 게시하고 배포하는 데 사용되며, 디버깅을 위해 서버에 게시해야 하는 상황에 적합합니다. config/serverMap.js에서 개발자가 구성한 인터페이스 서비스 주소를 사용하세요.
npm run build-preview
정적 모의 데이터가 활성화되고 백엔드 서비스가 필요하지 않으며 모의 데이터는 Ajax 호출을 시뮬레이션하는 데 사용됩니다(해당 API 인터페이스가 모의 데이터를 작성한 경우). npm run build --preview && npm run play-dist 와 동일합니다.
npm run play-dist
dist 디렉터리를 루트 디렉터리로 사용하여 게시 후 dist 디렉터리의 실행 결과를 보려면 로컬 정적 http 서비스를 시작합니다.
npm run mock
백엔드 인터페이스 서비스가 완료되지 않은 경우 백엔드 인터페이스 데이터를 시뮬레이션하여 프런트엔드 기능을 디버깅하는 데 사용할 수 있습니다.
npm run proxy80
기존 포트(포트 80xx)를 포트 80 또는 포트 443으로 프록시하면 액세스 중에 포트를 숨길 수 있고 https 액세스도 달성할 수 있습니다. 시스템 호스트와 결합하고 127.0.0.1을 지정된 도메인 이름으로 구성하면 도메인 이름을 직접 사용하여 로컬 디버깅 페이지에 액세스할 수 있습니다. 이는 도메인 이름 액세스를 사용해야 하는 일부 시나리오(예: WeChat 디버깅, 자세한 내용은 https://www.cnblogs.com/hz -blog/p/wechat-local-debug-domain.html을 참조하세요.
