vue boilerplate template 다운로드 - vue boilerplate template 소스 코드 다운로드

vue boilerplate template

기타 카테고리

vue-boilerplate-template V2.0.0

다운로드

Vue 상용구 템플릿

?(vue webpack vuex vue-router vue-i18n element-ui) 상자에서 꺼내기

? 매체 및 Vue.js(2.*) 프로젝트를 생성하기 위한 멋진 상용구 템플릿

중국어 위키

목표와 철학

중간 규모(+) VUE 프로젝트를 구축하는 방법에 대해서는 과거 경험을 바탕으로 몇 가지 참고 자료를 제공하세요. vue-cli3 기반으로 한 최신 Vue Boilerplate는 오픈 소스: awesome-vue-cli3-example입니다. 주의 깊게 살펴보시면 매우 가치 있다고 생각합니다 .

전제조건

Node.js(>=4.x, 8.x 권장), Npm 버전 4+(Yarn 권장) 및 Git.

데모

온라인 데모 페이지

이점

vue-cli 빌드를 기반으로， vue 사용을 촉진하는 방법에 대해 더 많은 최적화를 수행합니다.
vue-i18n , axios , lodash 등 일반적으로 사용되는 많은 라이브러리가 이미 포함되어 있습니다.
如何写一手漂亮的 Vue와 같은 Vue 에 대한 경험 기사가 있습니다. 그리고 여전히 업데이트됩니다.
WebPack 사용하여 애플리케이션을 구축하는 방법을 더욱 최적화합니다.
- Webpack 打包优화지체
- Webpack 타구화지향도篇
- webpack으로 라이브러리 최적화
- Webpack 좋은 튜토리얼

용법

 git clone https://github.com/nicejade/vue-boilerplate-template (your-project-name)
cd your-project-name
npm install (npm i / yarn)
npm start / npm run dev / yarn run dev

http://localhost:8080/으로 이동합니다. 포트 8080이 이미 컴퓨터에서 사용 중이라면 프로그램은 사용 가능한 포트(증분)를 지정합니다(예: 8081 / 8082 ... ) . 물론 다음 명령을 사용하여 일시적으로 포트를 교체할 수 있습니다.

 PORT=8888 npm run dev

추가 보충 사항 : PORT가 귀하의 컴퓨터에서 실행될 수 있는 명령인지 확인해야 합니다.

추가 명령

 npm run build

동등한 실행 node build.js , 빌드 프로젝트를 시작합니다.

 npm run build:dll

동등한 실행 webpack --config build/webpack.dll.conf.js , 자세한 내용은 webpack.DllPlugin을 참조하세요.

 npm run jarvis / yarn run jarvis

webpack-jarvis(매우 지능적인 브라우저 기반 Webpack 대시보드)를 실행하세요. 브라우저에서 localhost:1337을 열면 표시됩니다.

npm run pretest

nodejs를 사용하여 로컬 서버( http://localhost:3000/ )를 구축하고 패키지 이후 코드에 대한 간단한 사전 테스트를 수행합니다.

 npm run analyz

번들 콘텐츠를 편리한 대화형 확대/축소 가능 트리맵으로 나타내는 Webpack 플러그인 및 CLI 유틸리티입니다. 자동으로 다음 주소가 열립니다: http://localhost:8888/ .

종속 플러그인 목록

vue2
뷰 라우터
뷰엑스
vue-i18n
액시오스
부트스트랩
요소 UI
로다시
순간 데이
js 쿠키
... ...

작업요청

백엔드는 다음 형식의 데이터를 반환할 수 있으므로 더 좋습니다.

 {
  success: true,
  message: 'err message content',
  value: [
    // Useful data
  ]
}

프런트 엔드에서는 다음과 같이 요청을 처리할 수 있습니다.

 let params = {
  // Interface required parameters
}
this.isLoading = true
this.$apis.moduleName.getProfile(params).then(result => {
  // Handle the correct data you received
}).catch(error => {
  this.$message.error(`Error: ${error}`)
}).fin(() => {
  this.isLoading = false
})

그래서 배려심 깊은 템플릿이 요청을 균일하게 처리하는 데 도움이 되었기 때문에 사용하기가 매우 쉽습니다. 물론 필요에 따라 helper/ajax.js 파일에서 직접 변경할 수도 있습니다.