집 > 기사 > 웹 프론트엔드 > vue.js가 대규모 단일 페이지 애플리케이션을 구축하는 방법

vue.js가 대규모 단일 페이지 애플리케이션을 구축하는 방법

亚连원래의: 2018-06-06 14:25:222427검색

이 글에서는 vue.js 스캐폴딩 도구인 vue-cli를 사용하여 대규모 단일 페이지 애플리케이션을 구축하는 방법을 자세히 소개합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

전제 조건:

익숙함 Javascript + HTML5 + css3을 사용하세요.
ES2015 모듈 모듈(내보내기, 가져오기, 내보내기-기본값)을 이해하세요.
nodejs의 기본 지식, 일반적인 npm 명령, npm 스크립트 사용(npm은 vue 프로젝트에서 패키지 관리에 사용됨)을 이해합니다.
웹팩 패키징 도구(공통 구성 옵션 및 로더 개념)를 이해하세요. (webpack webpack.github.io/는 모듈 패키징 도구입니다. 파일 묶음의 각 파일을 모듈로 취급하고 해당 종속성을 찾아 배포 가능한 정적 리소스로 패키징합니다. webpack을 사용하려면 npm 설치 방법이 필요합니다. ).

설치 시작:

vue.js의 스캐폴딩 도구인 vue-cli를 사용하여 대규모 단일 페이지 애플리케이션을 구축합니다.

다음 코드를 실행하여 프로젝트의 기본 구성(webpack 구성, 종속 패키지 설치, 기본 디렉터리 생성)을 완료합니다.

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

메인 디렉터리:

├── build // 웹팩 기본 구성, 개발 환경 구성, 프로덕션 환경 구성
├── config // 경로, 포트 및 역방향 프록시 구성
├── dist // 웹팩 패키징 최종 정적 리소스
├── node_modules // npm이 설치한 종속성 패키지
├── src // 프런트엔드 메인 파일
│ ├── 자산 // 정적 리소스
│ │ ├── 글꼴
│ │ ├── img | ├── store // 전역 변수
│ ├── App.vue // 앱 컴포넌트
│ ├── main.js 기본 항목 파일
├── static // 정적 파일
├── .babelrc // Babel 구성 항목
├── . editorconfig // Editor 구성 항목
├── .gitignore // 구문 검사를 무시하는 디렉터리
├── index.html // 항목 페이지
├── package.json // 프로젝트 설명 및 종속성
package.json 파일 설명: 프로젝트 설명 및 종속성

1. 스크립트: 프로젝트 컴파일을 위한 일부 명령

예: npm run dev 실행, 즉 스크립트에서 해당 노드 build/dev-server.js를 실행합니다. .

2. 종속성: 프로젝트가 릴리스될 때 종속성

예: npm install wx --save를 실행합니다. 즉, 종속 모듈 wx를 설치합니다.

3. devDependency: 프로젝트 개발 중 종속성

예: npm install sass --save-dev를 실행합니다. 즉, 종속 모듈 sass를 설치합니다.

첨부 파일: npm 관련 지침:

npm은 Node.js 버전 관리 및 종속성 패키지 관리 도구로 노드 환경을 사용하여 프런트엔드 구축 프로젝트에 필요한 종속성 패키지를 설치합니다.

npm 설치 다운로드 속도가 너무 느립니다. 타오바오 미러 cnpm 설치를 사용하여 빠르게 설치하세요. 설정 방법:

프로젝트 로딩 과정:

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

1.index.html 페이지

현재 구축 프로젝트는 SPA(단일 페이지 애플리케이션)이며, index.html 페이지는 메타용 입구 페이지입니다. 및 기타 관련 페이지 구성.

페이지의 4c766faa15dbdc3e0301dfaffd03c28d94b3e26ee717c64999d7867364b1b4a3

2.main.js: 메인 항목 파일

참고: webpack.base.config에서 설정 -> 항목: { app: './src/main.js'}

이 파일은 vue 인스턴스를 초기화하고 해당 모듈(가져오기 전에 package.json에서 구성 및 설치를 확인해야 함), main.js 소개 및 지침:

import Vue from 'vue' // Import vue

import App from './App' / / 주요 컴포넌트 App.vue 소개

import router from './router' // 라우팅 구성 파일 가져오기

import axios from 'axios' // 네트워크 요청 도구 axios 소개

3. App.vue: The 메인 컴포넌트

는 index.html 항목 페이지에 탑재되고 main.js 메인 항목 파일에 소개됩니다.

다른 구성 요소(예: /src/comComponents/xxx.vue)를 생성한 후 라우팅 구성을 통해 현재 기본 구성 요소에서 렌더링할 수 있습니다.

4. 경로 구성 vue-router

경로 구성: 구성 요소를 경로(경로)에 매핑한 다음 vue-router에 렌더링할 위치를 알려줍니다.

npm install vue-router

import Vue from 'vue'

라우터 가져오기 from 'vue-router'

Vue.use(Router)

// 1. (라우팅) 구성 요소 정의: 가져오기(현재 애플리케이션의 단일 파일 구성 요소).
'../comComponents/Home.vue'에서 홈 가져오기

// 2. 경로를 정의하고 라우터 인스턴스를 생성한 다음 `routes` 구성을 전달합니다.
// 각 경로는 구성 요소를 매핑해야 합니다.
var router = {}

export 기본 라우터 = new Router({
경로: [
{
] 경로: '/',
이름: 'home',
구성 요소: Home
}
]
})

// 3. main.js 기본 항목 파일에 루트 인스턴스를 생성하고 마운트합니다.
// 라우터 구성 매개변수를 통해 경로를 삽입하는 것을 기억하세요.
// 전체 애플리케이션에 라우팅 기능이 있도록

new Vue({
el: '#app',
router,
template: '578d07aa9e36ca6b43806c9706879c6d ',
구성 요소: { 앱 }
})

// 이제 애플리케이션이 시작되었습니다!

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

vue.js가 대규모 단일 페이지 애플리케이션을 구축하는 방법

관련 기사