Vue.js 프로젝트 템 플 릿 구축 도문 강좌

머리말
올해(2017 년)초부 터 우리 팀 은'Vue.js'개발 모 바 일 제품 을 도입 하기 시작 했다.팀 의 리더 로 서 나의 첫 번 째 임 무 는 전체적인 구 조 를 설계 하 는 것 이다.좋 은 구 조 는 반드시 풍부 한 개발 경험 을 갖 춘 후에 야 세 워 질 수 있다.비록 나 는 다년간 의 전단 개발 경험 이 있 지만'Vue.js'로 말하자면 여전히 신출내기 이다.다행히'Vue.js'는 부대 도구 인'Vue-CLI'가 있 는데 비교적 성숙 한 프로젝트 템 플 릿 을 제공 하여 어느 정도 에 시작 하 는 어려움 을 낮 추 었 다.그러나 많은 구체 적 인 문 제 는 스스로 생각 하고 해결 해 야 한다.
항목 구분
우리 회사 의 H5 제품 은 대부분 휴대 전화 클 라 이언 트 에 포 함 된 페이지 이다.모든 항목 의 기능 은 비교적 독립 적 이 고 규모 가 크 지 않다.이렇게 되면 이런 작은 프로젝트 들 을 각자 정 치 를 할 수도 있 고 큰 프로젝트 에 집중 해서 관리 할 수도 있다.각자 의 장단 점 은 다음 과 같다.

프로젝트 템 플 릿 은 우리 팀 이 처음에'Vue.js'를 사용 한 것 을 고려 하여 적당 한 구 조 를 점차적으로 모색 해 야 한다.큰 프로젝트 를 만 들 면 구조 가 조정 되면 근골 이 상 할 수 있다.그래서 최종 선택 은 여러 개의 작은 항목 으로 나 누 는 것 이다.
여러 개의 작은 프로젝트 로 나 뉘 었 지만 이런 작은 프로젝트 들 도 일치 하 는 구조 와 공공 코드 를 유지 해 야 한다.말하자면 업무 상황 에 따라 자신의 프로젝트 모델 을 구축 하고 모든 구체 적 인 프로젝트 는 이 모델 을 바탕 으로 개발 해 야 한다.다음은 우리 팀 의 프로젝트 템 플 릿 구축 과정 을 소개 한다.
초기 화
프로젝트 템 플 릿 자체 도 하나의 항목 이기 때문에'Vue-CLI'를 통 해 초기 화 합 니 다(프로젝트 이름 은'webapp-public').

vue init webpack webapp-public

여기 서 선택 한 것 은'웹 팩'템 플 릿 입 니 다.기능 이 비교적 완비 되 어 있 기 때 문 입 니 다.초기 화 과정 에서 주의:
단일 페이지 응용 을 지원 하기 위해"Vue-Router"를 설치 합 니 다.
인 코딩 규범 을 통일 하기 위해'ESLint'를 설치 합 니 다.
SASS
"SASS"를 설치 하 는 지원 은 간단 합 니 다.명령 행 을 통 해 의존 도 를 설치 하 십시오.

npm install node-sass --save-devnpm install sass-loader --save-dev

설치 후 스타일 탭 의'lang'속성 을'scss'로 지정 하면 이 언어 로 스타일 코드 를 작성 할 수 있 습 니 다.

<style lang="scss" scoped></style><style src="style.scss" lang="scss"></style>

REM 레이아웃
현재 모 바 일 페이지 는 서로 다른 사이즈 의 휴대 전화 화면 에 적응 하기 위해 대부분 스타일 코드 에서 remi 를 사이즈 단위 로 사용 하고 있다.그러나 디자이너 가 준 디자인 원 고 는 px 단위 이다.이것 은 px 를 remi 로 변환 해 야 합 니 다.이 변환 은 머 릿 속 에서 도 돌아 갈 수 있 고 도 구 를 통 해 도 돌아 갈 수 있 습 니 다.예 를 들 어'PostCSS'의 플러그 인'postcss-px2rem'입 니 다.
프로젝트 를 초기 화 할 때'PostCSS'가 설치 되 어 있 기 때문에'postcs-px2rem'를 직접 설치 하면 됩 니 다.

npm install postcss-px2rem --save-dev

설치 후 프로젝트 루트 디 렉 터 리 의'postcssrc.js'를 수정 하고'postcss-px2rem'설정 을 추가 합 니 다.

"plugins": { 
 "autoprefixer": {}, 
 "postcss-px2rem": { "remUnit": 100 }
}

'px 값/remUnit'은 변 환 된 remi 값 으로 자신의 필요 에 따라'remUnit'의 값 을 수정 할 수 있 습 니 다.
그러나 일부 특수 한 px 값 은 remi 값 으로 변환 할 필요 가 없습니다.이 때 특수 주석 을 통 해'postcss-px2rem'를 금지 할 수 있 습 니 다.예 를 들 면:

/*   dpr     */
.g-dpr-1 .g-border-1px { 
 border-width: 1px !important; /*no*/
 }
 .g-dpr-2 .g-border-1px { 
 border-width: 0.5px !important; /*no*/
 }

Vuex
단일 페이지 애플 리 케 이 션 개발 에서 상 태 를 관리 하 는'Vuex'도 필수 다.설치 도 매우 간단 하 다.

npm install vuex --save

그러나 실제로 사용 할 때 일부 저 버 전 시스템 의 브 라 우 저 에서 이러한 이상 이 발생 할 수 있 습 니 다.
Error: [vuex] vuex requires a Promise polyfill in this browser.
브 라 우 저가'Promise'를 지원 하지 않 기 때문에'poly fill'이 필요 합 니 다.우 리 는 직접"babel-poly fill"을 사용 할 수 있 습 니 다.

npm install babel-polyfill --save

"babel-poly fill"은 전역 역할 영역 에 ES6 에 추 가 된 대상 과 방법 을 추가 합 니 다.프로젝트 의 다른 코드 는 명시 적 으로 도입(import 또는 require)할 필요 가 없습니다.이것 은"Webpack"이 프로젝트 의 의존 으로 인식 되 지 않 음 을 의미 합 니 다.그래서'/build/webpack.base.conf.js'를 수정 하고 포장 입구 에'babel-poly fill'을 추가 해 야 합 니 다.

entry: { 
 app: ['babel-polyfill', './src/main.js']
}

또한'Vue-CLI'를 사용 하여 프로젝트 를 초기 화 할 때 기본적으로'babel-plugin-transform-runtime'이 설치 되 어 있 으 며,그 역할 은'babel-poly fill'과 중복 되 기 때문에 전 자 를 제거 할 수 있 습 니 다.루트 디 렉 터 리 의".babelrc"를 수정 하고 이 줄 을 제거 합 니 다:

"plugins": ["transform-runtime"]

그리고 의존 도 를 삭제 하면 됩 니 다:

npm uninstall babel-plugin-transform-runtime --save-dev

접근 경로
모든 작은 항목 이 서버(테스트,사전 발표,생산 환경의 서버)에서 실 행 될 때 1 급 하위 디 렉 터 리 를 통 해 구분 된다.

이것 은 프로젝트 의 모든 경로 에 디 렉 터 리 를 추가 해 야 한 다 는 것 을 의미한다.예 를 들 어 원래 의 접근 경 로 는'http://localhost:8080/home',지금 바로'로 바 꿔 야 해 요.http://localhost:8080/project-a/home」）。절대 이것 이 매우 간단 한 일이 라 고 생각 하지 마라,실제로 고 쳐 야 할 부분 은 매우 많다.
우선"Vue-Router"의 기본 경로 설정 을 변경 해 야 합 니 다.

new Router({ 
 base: '/project-a/', //    
 mode: 'history', 
 routes: [
 { path: '/', component: Home }
]
});

기본 경 로 를 설정 한 후 루트 와 관련 된 모든 경 로 는 루트 디 렉 터 리 가 아 닌 상대 적 인 기본 경로 입 니 다.
그 다음 에 개발 서버 의 자원 발표 경로(/config/index.js):

dev: { assetsPublicPath: '/project-a/' }

'/build/dev-server.js'의 두 곳 을 수정 해 야 합 니 다.그렇지 않 으 면 방문 할 때 404:

require('connect-history-api-fallback')({ 
 //    "/index.html"，          ，         
 index: '/project-a/index.html'
 })
//               
var uri = 'http://localhost:' + port + '/project-a/'

마지막 으로 웹 팩 열 업데이트 검사 경 로 를 수정 해 야 합 니 다.먼저"/build/dev-server.js"를 수정 합 니 다.

require('webpack-hot-middleware')(compiler, { 
 log: false, 
 path: '/project-a/__webpack_hmr'
 })

그리고'/build/dev-client.js'를 수정 합 니 다.

require('webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true&noInfo=true&reload=true')

참고 로 위의 이 매개 변 수 는 소스 코드 로 디 버 깅 한 결과 이 고 홈 페이지 문 서 는 상세 하 게 설명 되 지 않 았 습 니 다.
모두 고치 면 디 렉 터 리 와 관련 된 코드 가 5 곳 인 데 구체 적 인 항목 을 사용 할 때 5 번 을 고 쳐 야 하지 않 겠 습 니까?매우 번거롭다.이런 상황 에서 이 부분의 논 리 를 하나의 공공 함수 로 써 서 호출 하 는 것 이 가장 좋 은 선택 이다.새 파일"/src/add-dirname.js":

const DIR_NAME = '/project-a/';
module.exports = function(path) { 
 return (DIR_NAME + path).replace(/\/{2,}/g, '/');
};

그리고 아까 1 급 하위 디 렉 터 리 추가 와 관련 된 코드 를 모두 이 함수 로 변경 하여 실현 합 니 다.

이렇게 되면 1 급 하위 디 렉 터 리 를 수정 하려 면 상수'DIR'만 수정 해 야 합 니 다.NAME 의 값 이면 됩 니 다.
공통 코드
우리 의 공공 코드 는 세 가지 로 나 뉜 다.
유 니 버 설 라 이브 러 리:팀 원 들 이 작성 한 유 니 버 설 라 이브 러 리,npm 를 통 해 설치 할 수 없 는 유 니 버 설 라 이브 러 리 등 업무 와 무관 합 니 다.
비 즈 니스 논리 라 이브 러 리:업무 와 관련 이 있 지만 표현 층 과 무관 한 공공 코드;
비 즈 니스 구성 요소 라 이브 러 리:표현 층 구성 요소.
그것들 은 모두"/src/public"에 있 습 니 다.

모든 공공 코드 의 폴 더 에 구체 적 인 라 이브 러 리 나 구성 요소 의 디 렉 터 리 구 조 는 다음 과 같 습 니 다.
/src/public/components/img-box
img-box.vue
1.1
여기 서 특별히 언급 해 야 할 것 은 버 전 번호 라 는 폴 더 입 니 다.라 이브 러 리 나 구성 요소 에 대한 수정 으로 인해 이전 호출 코드 가 호 환 되 지 않 을 경우 원본 파일 을 수정 하지 않 고 버 전 번호 폴 더 를 새로 만 들 고 새로운 코드 와 나머지 자원 파일 을 새 폴 더 에 넣 어야 합 니 다.이렇게 하면 구체 적 인 프로젝트 가 공공 코드 를 업데이트 할 때 프로젝트 템 플 릿 의'/src/public'를 덮어 쓰 면 됩 니 다.호 환 되 지 않 을 까 봐 걱정 하지 않 아 도 됩 니 다.
세우다
"webpack"프로젝트 템 플 릿 은 구축 논 리 를 설정 하 였 습 니 다.하나의 명령 을 통 해 빌 드 를 실행 할 수 있 습 니 다:

npm run build

기본 설정 에 따라 코드 는 프로젝트 루트 디 렉 터 리 의'dist'폴 더 에 발 표 됩 니 다.그러나 이런 간단 하고 거 친 발표 방식 은 실제 수 요 를 만족 시 킬 수 없다.
자원 파일(그림,CSS,JS 등)을 CDN 서버 에 발표 합 니 다.
HTML 에 서 는 완전한 URL 을 통 해 자원 파일 을 참조 해 야 합 니 다(자원 파일 이 CDN 도 메 인 에 있 기 때 문 입 니 다).
사용 하지 않 는 환경(테스트,사전 발표,생산)은 서로 다른 도 메 인 접근 을 사용 합 니 다.
먼저 환경 을 구분 하 는 문 제 를 해결 하고 우 리 는 구축 명령 에 환경 을 표시 하 는 인 자 를 추가 합 니 다.

npm run build <test|pre|prod>

그리고 루트 디 렉 터 리 아래 에 설정 파일'conf.json'을 새로 만 듭 니 다.

파일 내용 은 서로 다른 환경 에서 HTML 파일 발표 경로,자원 발표 경로 와 자원 접근 경 로 를 나타 낸다.
다음은 이 설정 들 을 웹 팩 의 패키지 설정 에 연결 해 야 합 니 다.'/config/index.js'를 수정 하고 시작 에 다음 을 추가 합 니 다.

var env = process.argv[2]; //     （ 0      ）
var conf = require('../conf');
//          conf.indexRoot = conf.indexRoots[env];
conf.assetsRoot = conf.assetsRoots[env];
conf.assetsPublicPath = conf.assetsPublicPaths[env];

그리고 구축 부분의 코드 를 수정 합 니 다.

build: { 
 index: path.resolve(__dirname, conf.indexRoot + 'index.html'),
 assetsRoot: path.resolve(__dirname, conf.assetsRoot),
 assetsPublicPath: conf.assetsPublicPath
}

이 때 빌 드 명령 을 실행 하면 프로젝트 를'conf.json'이 지정 한 경로 에 발표 할 수 있 습 니 다.
작은 매듭
이로써 프로젝트 템 플 릿 구축 이 완료 되 었 다.사실 가장 중요 한 것 은 배치 화 하 는 것 이다.그렇지 않 으 면 구체 적 인 프로젝트 를 개발 하 는 사람 이 한 프로젝트 를 초기 화 하 는 데 10 여 곳 을 더 바 꾸 면 효율 이 매우 낮다.
프로젝트 템 플 릿 사용
프로젝트 템 플 릿 은 이미 다 만 들 었 는데 어떻게 사용 합 니까?두 가지 상용 장면 이 있다.
새 프로젝트 초기 화:프로젝트 템 플 릿 프로젝트 를 복제 하거나 끌 어 올 리 고 이 프로젝트 의 모든 파일('git'폴 더 제외)을 새 프로젝트 의 폴 더 로 복사 하여 설정 을 수정 한 후 후속 개발 을 진행 합 니 다.
공공 코드 업데이트:프로젝트 템 플 릿 항목 을 복제 하거나 끌 어 올 리 고 업데이트 할 코드 를 대상 항목 의 대응 경로 로 복사 합 니 다.
두 장면 모두'복제 또는 끌 어 오기','복사 와 붙 여 넣 기'와 떨 어 질 수 없다.이런 방법 은 하 나 는 번 거 로 운 것 이 고 다른 하 나 는 너무 낮은 것 이다.그래서 나중에 나 는 Node.js 로 명령 행 도구 인'webapp-cli'를 써 서 이 두 가지 일 을 완성 했다.
항목 을 초기 화 하 는 명령 은:

webapp init [projectPath]

예 를 들 면:

webapp init test

특정 파일 을 업데이트 하 는 명령 은:

webapp update <fileGlobs> [projectPath]

예 를 들 면:

webapp update /src/public/** test

이 도 구 는 조작 방식 을 바 꾸 지 않 고 인공 조작 에서 프로그램 으로 대체 되 었 다.
이상 의 Vue.js 프로젝트 템 플 릿 을 구축 하 는 것 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 가 되 고 저희 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.