vue.js 를 사용 하여 대형 단일 페이지 응용 프로그램 구축

선행 조건:
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 sas--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 등 관련 페이지 설정 을 진행 합 니 다.
이 페이지 의는 메 인 구성 요 소 를 마 운 트 했 습 니 다.
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 주 입구 파일 에 루트 인 스 턴 스 를 만 들 고 마 운 트 합 니 다.
//라 우 터 를 통 해 매개 변 수 를 경로 에 주입 하 는 것 을 기억 하 십시오.
//이로써 전체 응용 에 루트 기능 이 있 게 한다
new Vue({
  el: '#app',
  router,
  template: '',
  components: { App }
})
//현재 응용 프로그램 이 시작 되 었 습 니 다!