FamilyBucket에서 개발한 Vue2.0 웹 애플리케이션(Wuji APP 참조)

github 링크

Wuji APP에서 알아보기, vue2.0+vue-router+vuex를 주요 기술 스택으로 사용, elementui를 UI 프레임워크로, 다중 모듈 스파 모드, webpack2.0은 모듈 패키징을 담당합니다. gulp는 정적 처리 리소스 패키징 및 압축을 담당합니다. 별 보상에 오신 것을 환영합니다! ! !

Wuji 프론트 엔드 구축 프로세스

로컬 환경 준비

• 설치 노드: * ("node": ">=6.0", node-sass 업그레이드 필요에 해당, 그렇지 않으면 사용되지 않습니다! )

• 웹팩 구성 : npm install -g webpack (sudo 권한)

• windows 구성 cnpm:

npm install -g cnpm --registry=https:

종속성 패키지 설치

• wuji 디렉토리로 들어가세요

• cnpm 설치 실행

Build

• 개발 환경: node server.js 실행(또는 npm run submit)

• Hot-reload node server.js hot-reload(또는 npm run hot)

• 모의 데이터 npm run mock

• 제작 환경 : npm run build 실행

소스 매핑에 대하여 (크롬 브라우저만 지원)

• 소스 매핑은 코드 매핑 추적으로, 로컬 개발 시 압축 파일 디버깅에 편리합니다

• Chrome이 소스 매핑을 켰는지 확인하세요(기본값은 Open입니다)

• 개발 도구 열기 -》소스 파일을 볼 수 있는 소스

핫 리로드(빌드의 실시간 새로 고침 지원)

• 환경 준비:

• cnpm install express webpack-dev- middleware webpack-hot-middleware

• Execute node server.js hot-reload(또는 npm run hot)

• 정적 리소스 액세스 예: http ://localhost:8088/Static/...

테마 사용자 정의

• wuji 디렉토리를 입력하세요

• cnpm install element-theme element-theme-default --save-dev(종속 패키지 설치 중에 설치됨)

• Execute node_modules/.bin/et -i

• Generate element-variables.css

• Execute node_modules/.bin/et

• 및 ./theme는 다음과 같습니다. created

• 테마를 변경할 때 해당 .babelrc 수정 사항은 다음과 같습니다:

    {      "plugins": [["component", [
        {          "libraryName": "element-ui",          "styleLibraryName": "~theme"}
      ]]]
    }

autoprefixer(스타일 접두사 호환성 처리), vue-loader 옵션에 구성됨

• 생성 규칙:

• 모든 브라우저와 호환되는 브라우저 스타일 접두어 자동 추가(전역 통계 1%, firefox 15보다 큰 공유의 경우)

정적 리소스 꿀꺽 처리(/public)

var gulp = require('gulp'),
    uglify = require('gulp-uglify'), //压缩jsrename = require("gulp-rename"), //文件重命名changed = require('gulp-changed'), //监听文件是否修改imagemin = require('gulp-imagemin'), // 图片压缩pngquant = require('imagemin-pngquant'), // 深度压缩runSequence = require('run-sequence'),     // 同步运行任务插件del = require('del'), //删除文件spritesmith = require('gulp.spritesmith'), //合成雪碧图find = require("gulp-find-glob"); //得到glob对象

• wuji 입력 /assets/public 디렉터리

• cnpm install

• Execute gulp(압축 js, Pictures)

• Execute gulp sprite(스프라이트 이미지 생성) [스프라이트로 합성해야 할 이미지를 새 폴더에 넣습니다. Images/sprite/를 실행하면 png, sprite.scss]

Front-end page

index.html => 내 일기 목록
passing.html = > 통행자 목록
account.html => 로그인 등록 페이지

WeChat 애플릿 연습 github：

위 내용은 FamilyBucket에서 개발한 Vue2.0 웹 애플리케이션(Wuji APP 참조)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!