nuxt로 작성된 코드를 GAS에서 사용할 수 있도록 변환

8575 단어 nuxtVue.jsgas

개요


  • nuxt로 만든 파일 (vue 구성 요소 형식)을 GAS에서 사용할 수있는 형식 (x-template 형식)으로 변환
  • 이것 자체가 nuxt로 움직이는 프로그램. 개인으로 사용한다면 자신의 PC에서 로컬 호스트를 시작하고 변환된 코드를 복사하여 사용하면 된다.


    • 개발 배경


  • GAS에서 프론트 사이드를 작성할 때, GAS 편집기는 아첨도 사용하기 쉽다고 말할 수 없습니다 (최근 업데이트에서 상당히 사용하기 쉬워졌지만)
  • 어쩌면 GAS 개발자들이 많이하고있는 것처럼 clasp로 작성하여 GAS에 푸시하는 방법이 있지만 clasp 푸시하여 웹 페이지를 다시로드하고, 그리고 오류를 찾기가 어렵다는 단점도 있습니다.
  • 그래서 nuxt로 UI를 어느 정도 만든 다음 GAS의 html 파일에 복사하는 방법을 취하고 있습니다.
  • nuxt로 만든 파일을 그대로 복사 할 수 있으면 좋지만, nuxt는 컴포넌트를 .vue 형식으로 작성하는 것에 비해, GAS에서는 .html 형식으로 할 필요가 있는 것, 컴퍼넌트의 작성 방법은 nuxt는 ~와 exhast default에 대해 GAS에서 x-template을 사용하는 글쓰기 등 몇 가지 수정해야합니다.
  • 원래는 이러한 작업을 손으로 하고 있었지만, 컴퍼넌트 파일이 많아지면 번거롭기 때문에, 프로그램화했습니다.

    • 디자인



    사용자 조작


  • 브라우저에서 nuxt 앱 폴더를 업로드하면 HTML 형식으로 다운로드 할 수 있습니다.
  • 텍스트의 편집은 모두 javascript로 구현했습니다.

    • nuxt와 GAS의 차이


  • 파일 형식의 경우 nuxt에서는 구성 요소 파일이 .vue 형식이고 GAS에서는 .html 형식
  • 컴퍼넌트의 작성 방법에 대해서, nuxt에서는 HTML에 상당하는 부분을으로 묶어 javascript를 export default로 읽을 수 있도록 하고 있다. 반면에 GAS html 파일은 HTML 부분을 <script type="text/x-template">로 묶고 로컬 구성 요소를 변수에 넣고 상위 구성 요소에서 읽을 수 있도록합니다
    • .

    nuxt → GAS로 변환



    components 파일


  • 파일 이름을 something.vue에서 something.html로
  • <template> 의 부분을 <script type="text/x-template" id="something"> 에
  • export default"를 "const something ="
  • template = "#something", 추가

    • 페이지의 파일



    1~4까지는 components와 동일
  • import ChildComponent from "~/components/ChildComponent.vue"삭제

    • layouts 파일


  • 내 개발에서는 SPA로 작성되었으며 layouts/index.html은 다음과 같은 구조 
    • <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
      <?!= include("config") ?>
  </head>
  <body>
  <?!= include("components/EditComponent") ?>
  <?!= include("components/ImportMailList") ?>
  <?!= include("components/MailListHead") ?>
  <?!= include("components/MailPreview") ?>
  <?!= include("components/VarConfig") ?>

  <?!= include("pages/mailer") ?>

  <div id="app"></div>

  <script>
    new Vue({
      vuetify: vuetify,
      render: h => h(mailer)
    }).$mount("#app")
  </script>

  </body>
</html>

    궁리점



    폴더 업로드 및 파일 처리


  • 폴더 업로드에 input 태그에 webkitdirectry 속성 추가
  • webkitdirectory에서 폴더를 업로드 한 후 각 파일을 처리하는 방법은 아래를 참조하십시오 
    • <template>
  <input type="file" @change="upload($event)" webkitdirectory>
</template>

<script>
(vue methods)
async upload(event){
      //ファイル一覧の取得と各ファイルの処理
      const files = event.target.files
      for(const file of files){
        //ファイルパスの取得
        const path = file.webkitRelativePath;

                //ファイルの読み取り等はPromiseを用いて同期処理すること
                const text = await this.editFile(file)
      }
},
editFile(file){
  return new Promise((resolve,reject)=>{
    const reader = new FileReader()
    reader.readFileAsText()
    reader.onload = function(e){
      const text = e.target.result
      resolve(text)
    }
  })
}

</script>

    nuxt 파일 목록에서 필요한 파일 필터링


  • nuxt의 폴더를 올리면 2만 강의 파일이 올라간다.
  • 그 중에서 필요한 vue 파일을 좁히려면 다음과 같이하십시오 
    • const path = file.webkitRelativePath;
//不要なファイルをフィルタリング
if(!path.includes(".vue"))continue;
if(path.includes(".nuxt"))continue;
if(path.includes("node_modules"))continue;
    [JavaScript] 헤더 행이 있는 2차원 배열을 Map 배열로 변환
    이미 답변을 받은 GoogleForm 만들기

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage