vue 개발환경 세팅 및 기본 스크립트 작성

기본 세팅 참고 : https://haenny.tistory.com/247

 

디렉토리 만들고

npm install vue@next
npm install -g @vue/cli
npm init vue@latest

 

생성된 vue-project에서

npm install
vue add vuetify // CLI3-vite선택
npm install @nuxtjs/vuetify -D
npm install vuetify
npm install sass@~1.32 sass-loader deepmerge -D

 

아래 입력시 개발 모드 실행

npm run dev

cf) vue ui 입력시 프로젝트 매니저 실행 가능

 

 

file-saver : 데이터를 파일로 다운받는 기능 구현할 때 유용

npm install --save file-saver

 

 

- 파일 다운로드 컴포넌트 (FileComponent.vue)

<template>
  <div id="test">      
      <button @click="downloadFile()">DownLoad</button>
  </div>
</template>
<script>
import axios from 'axios'
import { saveAs } from 'file-saver'

  export default {
    methods: {
      downloadFile() {
        axios({
            url: 'URL주소입력',
            method: 'GET',
            responseType: 'blob',
        }).then((res) => {
            console.log(res)
            var fileLink = window.URL.createObjectURL(new Blob([res.data]));
            saveAs(fileLink, "file.csv")
        }).catch(error => {
          console.log(error)
        })
      }
    }    
  }
</script>

 

- UI 컴포넌트 (Profile.vue)

 

<template>
  <div class="row">
    <div class="col-md-8">
      <edit-profile-form :model="model">
      </edit-profile-form>
    </div>
    <div class="col-md-4">
      <user-card :user="user"></user-card>
    </div>
    <div class="col-md-5">
      <FileComponent>dd</FileComponent>
    </div>
    
  </div>
  
</template>
<script>
  import EditProfileForm from './Profile/EditProfileForm';
  import UserCard from './Profile/UserCard'
  import FileComponent from './Profile/FileComponent';
  export default {
    components: {
      // EditProfileForm,
      // UserCard,
      FileComponent
    },
    data() {
      return {
        model: {
          company: 'Creative Code Inc.',
          email: 'mike@email.com',
          username: 'michael23',
          firstName: 'Mike',
          lastName: 'Andrew',
          address: 'Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09',
          city: 'Melbourne',
          country: 'Australia',
          about: 'Lamborghini Mercy, Your chick she so thirsty, I\'m in that two seat Lambo.'
        },
        user: {
          fullName: 'Mike Andrew',
          title: 'Ceo/Co-Founder',
          description: `Do not be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...`,
        }
      }
    }
  }
</script>
<style>
</style>