h5 측에서 uniapp 프로젝트를 실행하는 방법-uni-app-php.cn

h5 측에서 uniapp 프로젝트를 실행하는 방법

PHPz

풀어 주다： 2023-05-22 11:40:37

원래의

6038명이 탐색했습니다.

모바일 인터넷의 급속한 발전으로 인해 점점 더 많은 기업이 크로스 엔드 개발 기술에 관심을 갖고 사용하기 시작했습니다. Uniapp은 Vue.js와 미니 프로그램 개발 기능을 통합한 크로스 플랫폼 개발 프레임워크로서 많은 기업에서 널리 사용되고 있습니다.

Uniapp은 WeChat 애플릿, Alipay 애플릿, Baidu 애플릿, H5 엔드, App 엔드 등 다양한 플랫폼에서 실행을 지원합니다. 이 기사에서는 주로 H5 엔드에서 Uniapp을 실행하는 방법을 소개합니다.

1. 프로젝트 초기화

유니앱 프로젝트를 실행하기 전에 먼저 프로젝트를 초기화해야 합니다. 명령줄에 다음 명령을 입력합니다.

npm install -g @vue/cli

vue create -p dcloudio/uni-preset-vue my-project

로그인 후 복사

여기서 "my-project"는 프로젝트 이름이며 필요에 따라 변경할 수 있습니다. 초기화가 완료된 후 편집 및 디버깅을 위해 프로젝트를 개발 도구로 가져올 수 있습니다.

2. 페이지 코드 작성

Uniapp에서는 Vue의 단일 파일 컴포넌트를 작성하여 페이지를 개발할 수 있습니다. 다음은 간단한 예입니다.

<template>
  <view class="container">Hello world!</view>
</template>

<style>
  .container {
    text-align: center;
    font-size: 24px;
    color: #333;
  }
</style>

로그인 후 복사

페이지에서는 다양한 구성 요소를 사용하여 다채로운 대화형 효과를 얻을 수 있습니다.

3. H5 실행 환경 구성

페이지 작성을 완료한 후 프로젝트를 실행하려면 H5 실행 환경을 구성해야 합니다.

Modify 매니페스트.json

프로젝트의 루트 디렉터리에서 Uniapp 프로젝트의 몇 가지 기본 속성을 정의하는 매니페스트.json 파일을 찾습니다. H5측의 동작을 지원하기 위해서는 다음 속성값을 true로 설정해야 합니다.

"h5": {
  "baseApiUrl": "",
  "devServer": {
    "host": "",
    "port": "",
    "compress": true
  },
  "subpackages": true,
  "postcss": true,
  "customVars": true
}

로그인 후 복사

종속성 설치

다음 명령을 실행하여 H5에 필요한 종속성 패키지를 설치합니다.

npm install uni-html-webpack-plugin html-webpack-plugin webpack-dev-server webpack-cli webpack -D

로그인 후 복사

Configure webpack

프로젝트의 루트 디렉터리에서 vue.config.js 파일을 생성하고 다음을 추가합니다. 다음 코드:

const path = require('path');
const fs = require('fs');

const UniHtmlWebpackPlugin = require('uni-html-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  configureWebpack: (config) => {
    const pages = {};
    const entries = {};
    const templateDir = './public';
    const templateExt = '.html';

    const appDirectory = fs.realpathSync(process.cwd());
    const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);

    const getEntries = (dir, ext) => {
      const entryFiles = fs.readdirSync(dir);
      let regx = new RegExp(ext + '$');
      return entryFiles.filter(file => regx.test(file)).reduce((entry, file) => {
        const filename = file.replace(new RegExp(ext + '$'), '');
        entry[filename] = path.join(dir, filename);
        return entry;
      }, {});
    };

    const getPages = (entryDir, templateDir, templateExt) => {
      const entryFiles = fs.readdirSync(entryDir);
      let regx = new RegExp('\.(' + Object.keys(entries).join("|") + ')$');
      return entryFiles.filter(file => regx.test(file)).reduce((pages, file) => {
        const filename = file.replace(regx, '');
        const template = path.join(templateDir, filename + templateExt);
        pages[filename] = {
          entry: entries[filename],
          template,
          filename: `${filename}.html`,
          chunks: ['chunk-vendors', 'chunk-common', filename]
        };
        return pages;
      }, {});
    };
    Object.assign(entries, getEntries('./src/pages', '.vue$'));
    Object.assign(pages, getPages('./src/pages', templateDir, templateExt));

    config.entry = entries;
    config.plugins = config.plugins.concat(
      Object.keys(pages).map((name) => {
        const page = pages[name];
        return new HtmlWebpackPlugin({
          title: name,
          template: page.template,
          filename: page.filename,
          chunks: page.chunks,
          inject: true,
          minify: {
            removeComments: false,
            collapseWhitespace: false,
            removeAttributeQuotes: false,
            minifyJS: false,
            minifyCSS: false,
            minifyURLs: false
          }
        });
      }),
      new UniHtmlWebpackPlugin()
    );
  }
};

로그인 후 복사

프로젝트 실행

위 단계를 완료한 후 명령줄에 다음 명령을 입력하여 H5 실행 환경을 시작할 수 있습니다.

npm run dev:h5

로그인 후 복사

동시에 다음 명령도 실행할 수 있습니다. 패키지 명령:

npm run build:h5

로그인 후 복사

실행 및 패키징 프로세스 중에 Uniapp은 개발자가 프로젝트를 더 빠르게 개발하고 유지하는 데 도움이 되는 풍부한 개발 및 디버깅 도구도 제공합니다.

요약

이 기사에서는 H5 측에서 Uniapp 프로젝트를 실행하는 방법을 간략하게 소개합니다. 적절한 도구를 구성하고 사용하면 개발자가 크로스엔드 개발을 보다 효율적으로 수행하는 데 도움이 될 수 있습니다. 실제 프로젝트에서는 다양한 시나리오의 요구 사항을 충족하기 위해 자체 요구 사항에 따라 유연한 조정 및 확장을 수행할 수도 있습니다.

위 내용은 h5 측에서 uniapp 프로젝트를 실행하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!