vue를 사용하여 앱 스캐폴딩 도구를 빠르게 개발하는 방법

이 글에서는 주로 Vue로 앱을 빠르게 개발하기 위한 스캐폴딩 도구를 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 에디터를 따라가서 함께 살펴볼까요

서문

간단한 페이지에는 라우터를 사용하는 것이 너무 번거롭기 때문에 여러 페이지를 사용하는 것은 비교적 간단한 구조입니다.

Hbuilder와 함께 스캐폴딩을 사용하면 vue를 사용하여 Android 및 IOS 앱을 빠르게 개발할 수도 있습니다.

이 기사의 가장 큰 특징:

1. webpack4

2. 여러 페이지

3. Cross -도메인 프록시

4. VConsole 모바일 디버깅, 휴대폰 개발자 도구

5. es6/es7 바벨 변환

프로젝트 주소 GitHub

사용자 매뉴얼

MogoH5+ Vue 다중 페이지 스캐폴딩 도구 , 조합 H5+는 Android 및 Apple APP를 빠르게 개발할 수 있습니다.

Hbuilder를 사용하여 APP로 패키징하지 않더라도 이 스캐폴드는 다중 페이지 웹 페이지 생성을 위한 참조 프로젝트로도 사용할 수 있습니다.

Npm 생태학 지원

1. vux, mint, vant와 같은 vue 구문 및 vue 생태학 지원

2. ES6/ES7 구문 지원

3. 디버깅을 위해 VConsole 사용

4. VSCode 친화적

5. LAN에서 편리한 디버깅

6. 일부 mui 구문과 호환

7. 이러한 기능은 실제로 새로운 것이 아니며 Hbuilder에서만 사용할 수 없습니다.

빨리 시작하세요

아래로 로드 직접 프로젝트한 다음 필요에 따라 패키징을 사용자 정의하고 최종적으로 Hbuilder 클라우드 패키징을 통해 앱을 생성합니다. 이 기사에는 VantUI를 사용하여 개발된 여러 인터페이스에 대한 사례 연구가 포함되어 있습니다. 기타 UI.

// 1.安装模块
npm i // or yarn
// 2.调试
npm start  // 将manifest.json 的`页面入口` 修改成 http://your_ip:8082/
// 3.打包
npm run build

Usage

주로 MogoH5+를 공식적인 작업에 사용하는 방법 개발 과정에서 디렉터리 규칙을 준수해야 합니다. 그렇지 않으면 예상치 못한 오류가 발생할 수 있습니다.
디렉터리. 구조

.
├── docs // 文档
├── index.html // 入口模板
├── jsconfig.json //js配置
├── manifest.json //hbuilder 入口文件
├── src 
│  ├── components //组件文件夹
│  │  └── List.vue //组件
│  ├── index.js //主页入口文件
│  ├── index.vue // 主页vue文件
│  ├── page // 页面
│  └── utils // 工具
├── unpackage // hbuilder 构建目录
│  └── res
└── webpack.config.js //webpack配置目录

새 페이지

list라는 이름의 새 페이지를 생성한다고 가정합니다. 페이지가 제품 목록으로 사용되는 경우 list.js와 list.vue라는 두 개의 파일을 생성합니다. , ./src/page/goods 아래에 list.js가 여러 페이지로 들어가는 입구 역할을 하며, 스캐폴딩은 참고로 여러 페이지와 함께 제공됩니다.에서 이 페이지에 액세스하는 경우. src, 그것은 ./goods/list.html이 될 것입니다!!! 접미사는 .html

New 컴포넌트

여야 합니다. 컴포넌트는 ./src/comComponents 디렉토리에 있습니다. 컴포넌트가 많은 경우 다음을 수행할 수 있습니다. 예를 들어 데모에 사용된 로고 구성 요소를 참조로 사용할 수 있습니다.
새 도구 라이브러리

Tool library./src/utils에는 주로 요청과 같은 일부 공개 기능이 포함되어 있습니다. Open webview, pay, share 및 기타 실행 기능은 사용자 정의 이벤트, webview와 같은 mui의 일부 기능을 캡슐화합니다. common.js`는 각각에 로드해야 하는 js입니다. 페이지에 `fastclick` 및 `vconsole`이 로드됩니다. 통계를 전역적으로 추가해야 하는 경우 전역적으로 실행되는 기능을 이 파일에 배치할 수 있습니다.

`./src/utils`는 `별칭`을 만들었으며 직접 사용할 수 있습니다. load `"Utils/common"에서 다음과 같이 공통적으로 가져오기`.

요청 보내기

Request library

demo는 axios를 사용하며 원하는 라이브러리를 직접 캡슐화할 수 있습니다.Common 요청 라이브러리에는 fetch, request, SuperAgent, jquery-ajax가 포함됩니다.

Cross-domain

npm start 이후 디버깅 웹 페이지는 LAN에 매달려 Hbuilder의 페이지 입구 역할을 하므로 크로스-도메인 요청하면 도메인이 나타납니다../build.js에서 로컬 프록시를 사용하고 다음 https://api.douban.com을 사용하는 비즈니스 도메인 이름으로 변경하세요.

proxy: {
  "/api": {
   name:"DOUBANAPI", // 自己取名
   target: "https://api.douban.com",
   pathRewrite: { "^/api": "" },
   changeOrigin: true,
   secure: false
  },
   "/baidu_api": {
   name:"BAIDUAPI", // 自己取名
   target: "https://api.baidu.com",
   pathRewrite: { "^/api": "" },
   changeOrigin: true,
   secure: false
  },
  ...
 }

더 많은 경우 비즈니스 도메인 이름을 계속해서 프록시에 추가할 수 있습니다.

개발 중에만 도메인 간 문제가 발생할 수 있습니다. 패키지 파일 URL은 프록시 URL로 대체되므로 전송 시 요청에 DOUBANAPI라는 이름을 추가해야 합니다.

request({
 url: DOUBANAPI + "/bookList"
});

디버깅

Hbuilder에서 디버깅할 때 다음과 같은 많은 문제가 있습니다.

배열을 직접 인쇄할 수 없으며 개체를 문자열로 변환해야 합니다

1. . webview를 사용하여 디버그해도 여전히 Mac에서 배열을 인쇄할 수 없습니다. 사용하기에도 매우 불편합니다.

2. VConsole을 사용하면 디버깅 문제는 Hbuilder와 기본적으로 분리되어 있습니다. 배열과 객체를 인쇄할 수 있습니다

요청, 쿠키, 로컬 저장소를 볼 수 있습니다

1. 시스템 열에서 페이지 로딩 속도를 볼 수 있습니다

2. 요소를 볼 수 있습니다

3. 기본적으로 단순화되었습니다. 디버깅이 매우 간단한 개발자 도구 모음입니다.

4. Packaging

   
   

   npm run build

   运行命令后会有一个 dist 目录,里面的经过压缩的静态文件.

   Hbuilder 发行打包
   

   在使用 Hbuilder 制作安装包前,请将 入口文件 修改成 dist/index.html . 然后可以安心的打包了.
   

   兼容 mui.js
   

   对于兼容 mui 部分函数的问题,已经在移植部分函数到Utils中,在未来的更新中会慢慢移植.

   以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

   相关推荐：

   在vscode中vue编码风格统一的方法介绍
   

위 내용은 vue를 사용하여 앱 스캐폴딩 도구를 빠르게 개발하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!