vue spa starter

다중 단일 페이지 시스템

이 시스템은 vue-cli-service 빌드로 마이그레이션되었으며 즉시 사용할 수 있습니다.

제안

• 환경: >=node8 + 원사
• 편집기: vscode

시작

yarn # npm i
yarn run dev # 默认入口为src/pages/*/index.js

환경 구성

.env # 默认配置
.env.local # gitignore，会merge .env
.env.prod
.env.prod.local # gitignore，会merge .env.prod 

커밋린트

일반 사양 유형에 따르면

• feat: 새로운 기능(feature)
• 수정: 버그 수정
• 문서: 문서
• 스타일: 스타일 조정
• 리팩터링: 함수를 리팩터링
• 테스트: 테스트 추가
• 잡일: 빌드 프로세스 또는 보조 도구 변경
• perf: 성능 최적화
• revert: 커밋을 되돌립니다.

 # type: 提交类型  scope: 变动范围  type为必需，scope选填
# git commit -m '${type}(${scope}): some message'
git commit -m ' feat: 增加 xxx 功能'
git commit -m ' fix: 修复 xxx 功能'
git commit -m ' fix(UserController): [bug005]修复用户权限问题' 

에스린트

.eslintrc.js 에 의해 수정됨

• 0 비활성화
• 경고 1개
• 오류 2개

코드 사양

• https://github.com/airbnb/javascript
• .vue 파일 및 관련 폴더의 이름은 모두 소문자로 지정되며 - 로 구분됩니다. 예: button-group

메모

• js 폴리필은 html을 통해 cdn에 전역적으로 도입되었으며, 문제를 해결하기 위해 babel-polyfill 이나 transform-runtime 사용할 필요가 없습니다.
• ~/src/styles/element-theme.scss 를 통해 element-ui 테마를 사용자 정의하세요.
• 일반적인 스타일은 ~/src/styles/${THEME}/app.scss 에 작성됩니다.
• 기본 스타일 변수의 이름은 ~/src/styles/${THEME}/variables.scss 에 있습니다. 구성 요소 스타일은 정의된 변수를 통해 테마를 통합합니다.
• 아이콘 라이브러리는 https://www.iconfont.cn/ (현재 github/evanliu2968 계정에 있음)에 있습니다.
• https://serverfault.com/questions/506972/nginx-why-i-cant-put-proxy-set-header-inside-an-if-clause

프로젝트 강화

차트

• 전자 차트
• ~/src/components/common/vue-echarts

업로드

• components/common/file-upload ie10+ FormData 업로드, ie9 iframe 업로드

암호화된 전송

• https://blog.csdn.net/baidu_22254181/article/details/82594072
• 현재 AES 대칭 암호화가 사용됩니다 ~/src/libs/auth.js

웹팩

• Babel은 기본적으로 node_modules의 파일을 트랜스파일하지 않으며 ~vue.config.js/transpileDependencies 에서 선언해야 합니다.
• new webpack.ContextReplacementPlugin(/moment[\/]locale$/, /^./(zh-cn)$/) 다른 언어 패키지를 제거합니다(압축된 패키지는 300kb 이상).
• echarts 단일 차트를 도입하는 것은 너무 번거롭습니다(소스 코드 2M+, 압축 패키지 600kb). 매번 패키징하는 것을 피하기 위해 HTML에서 js를 사용합니다.

서버 환경

nginx 구성 주소: cd /etc/nginx/vhost 수정 후 nginx를 다시 시작하고 docker 명령을 사용하여 구성 파일을 다시 시작하고 다시 로드해야 합니다. docker exec nginx nginx -s reload 구성 파일 확인: docker exec nginx nginx -t

기타 프로세스 문서

• 환경 릴리스 process.md
• process.md를 실행하는 로컬 개발 환경