Vue 전체 프로젝트 구축(진급 편)

선행 조건:

Javascript+HTML 5+css 3 사용 에 익숙 합 니 다.

ES 2015 Module 모듈(export,import,export-default)을 이해 합 니 다.

nodejs 기초 지식,npm 상용 명령,npm script 사용(vue 프로젝트 에서 npm 로 패키지 관리)을 알 고 있 습 니 다.

웹 팩 패키지 도구(상용 설정 옵션 및 loader 개념)를 이해 합 니 다.(webpack webpack.github.io/ 모듈 포장 도구 입 니 다.그것 은 한 무더기 의 파일 에 있 는 모든 파일 을 하나의 모듈 로 삼 아 그들의 의존 관 계 를 찾아내 배치 가능 한 정적 자원 으로 포장한다.웹 팩 의 사용 도 npm 의 설치 방식 이 필요 합 니 다.

설치 시작:
vue-cli 를 사용 하여 대형 단일 페이지 응용 프로그램 을 구축 합 니 다:vue.js 비계 도구.
다음 코드 를 실행 하면 프로젝트 기반 구축 을 완성 할 수 있 습 니 다(웹 팩,패키지 에 의존 하 는 설치,기본 디 렉 터 리 생 성).

#      vue-cli
$ npm install --global vue-cli
#        webpack       
$ vue init webpack my-project
#     ，  
$ cd my-project
$ npm install
$ npm run dev

주 디 렉 터 리:

├── build // webpack     、      、      
 ├── config //   、          
 ├── dist // webpack        
 ├── node_modules // npm      
 ├── src //      
 │ ├── assets //     
 │ │ ├── font
 │ │ ├── img
 │ │ └── scss
 │ ├── components //     
 │ │ ├── xxx.vue //      
 │ ├── router //     
 │ ├── store //     
 │ ├── App.vue // App  
 │ ├── main.js      
 ├── static //     
 ├── .babelrc // babel    
 ├── .editorconfig //        
 ├── .gitignore //           
 ├── index.html //     
 ├── package.json //         

package.json 파일 설명:프로젝트 설명 및 의존
1.scripts:항목 을 컴 파일 하 는 명령
예:실행npm run dev ,즉 scripts 에 대응 하 는node build/dev-server.js을 실행 합 니 다.
2.dependencies:프로젝트 발표 시 의존
예:실행npm install wx --save ,즉 설치 의존 모듈 wx.
3.devDependencies:프로젝트 개발 시 의존
예:실행npm install sass --save-dev ,즉 설치 의존 모듈 sas.
첨부:npm 관련 설명:
npm 는 Node.js 버 전 관리 와 패키지 관리 도구 로 node 환경 을 통 해 전단 구축 프로젝트 에 필요 한 의존 패 키 지 를 설치 합 니 다.
npm 설치 다운로드 속도 가 너무 느 려 타 오 바 오 미 러cnpm install 를 사용 하여 빠르게 설치 합 니 다.설정 방법:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

프로젝트 로 딩 과정:
 
1.index.html 페이지
현재 구축 항목 은 SPA(단일 페이지 응용)이 고 index.html 페이지 는 입구 페이지 이 며 meta 등 관련 페이지 설정 을 진행 합 니 다.
이 페이지 의<div id="app"></div> 메 인 구성 요 소 를 마 운 트 했 습 니 다.
2.main.js:주 입구 파일
주:webpack.base.config 에 설정->entry: { app: './src/main.js'}이 파일 은 vue 인 스 턴 스 를 초기 화하 고 해당 모듈 을 도입 합 니 다(도입 전에 package.json 에서 설정 하고 설치 하 는 것 을 확인 해 야 합 니 다).main.js 도입 및 설명 을 첨부 합 니 다.

​ import Vue from 'vue' //   vue
​ import App from './App' //      App.vue
​ import router from './router' //         
​ import axios from 'axios' //         axios

3.App.vue:주 구성 요소
index.html 입구 페이지 에 메 인 구성 요 소 를 마 운 트 하고 main.js 메 인 입구 파일 에 메 인 구성 요 소 를 도입 하 였 습 니 다.
다른 구성 요소(예:/src/coponents/xxx.vue)를 만 든 후 경로 설정 을 통 해 현재 메 인 구성 요소 에 렌 더 링 할 수 있 습 니 다.
4.루트 설정 vue-router
경로 설정:구성 요소(components)를 경로(routes)에 표시 한 다음 vue-router 가 어디서 렌 더 링 하 는 지 알려 줍 니 다.

npm install vue-router
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
// 1.  （  ）  ：import (           )。
import Home from '../components/Home.vue'
// 2.         router   ，    `routes`   
//             。
var router = {}
export default router = new Router({
 routes: [
 {
 path: '/',
 name: 'home',
 component: Home
 }
 ]
})
// 3.  main.js              。
//       router         ，
//              
new Vue({
 el: '#app',
 router,
 template: '<App/>',
 components: { App }
})
//   ，       ！

총결산
위 에서 말씀 드 린 바 와 같이 편집장 님 께 서 소개 해 주신 Vue 완전 프로젝트 구축 입 니 다.여러분 께 도움 이 되 셨 으 면 합 니 다.궁금 한 점 이 있 으 시 면 댓 글로 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!