[Vue.js] Basic

아현·2024년 5월 8일
vue
1

Vue

목록 보기
1/4

1. Vue.js 설치하기


npm install -g @vue/cli

yarn 설치

  • npm 또는 yarn은 자바스크립트 node.js 환경 기반의 Package Manager(패키지 매니저) 입니다.
  • 최신 버전의 디펜던시스를 손쉽게 다운로드
npm install -g yarn



2. 새로운 프로젝트 시작하기


Vue 프로젝트 생성하기




-- vue/cli 3.x 이상일 경우
vue create 프로젝트명
 
-- vue/cli 3.x 미만일 경우
vue init webpack 프로젝트명

<create vue 오류 해결>
[Vue] VScode에서 vue 설치해도 동작 안할 때 해결 방법

PS C:\\Users\\ICTUSER> Get-ExecutionPolicy
Restricted
PS C:\\Users\\ICTUSER> Set-ExecutionPolicy RemoteSigned
실행 규칙 변경
실행 정책은 신뢰하지 않는 스크립트로부터 사용자를 보호합니다. 실행 정책을 변경하면 about_Execution_Policies 도움말
항목(<https://go.microsoft.com/fwlink/?LinkID=135170>)에 설명된 보안 위험에 노출될 수 있습니다. 실행 정책을
변경하시겠습니까?
[Y] 예(Y)  [A] 모두 예(A)  [N] 아니요(N)  [L] 모두 아니요(L)  [S] 일시 중단(S)  [?] 도움말 (기본값은 "N"): y
PS C:\\Users\\ICTUSER> Get-ExecutionPolicy
RemoteSigned

  1. 방향키와 Enter를 사용해 "Manually select features" 옵션을 선택하세요.
Vue CLI v5.0.8
Failed to check for updates
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)      
  Default ([Vue 2] babel, eslint)      
  Manually select features

  1. 첫 번째 메뉴에서 프로젝트에 포함하고 싶은 기능들을 선택할 수 있습니다.

    • "Babel"과 "Linter / Formatter"가 선택되어 있나요? 선택되어 있지 않다면 방향키와 스페이스바를 사용해 선택해주세요. 그리고 Enter를 누릅니다.
Vue CLI v5.0.8
Failed to check for updates
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)      
  Default ([Vue 2] babel, eslint)      
  Manually select features



vue create projectname --packageManager npm



Vue 프로젝트 실행하기



-- yarn 사용시(8080)
yarn serve
 
-- npm 사용시(8080)
npm run serve
 
-- npm 사용 포트 설정시
npm run serve -- --port 포트번호



프로젝트 구조


  • .eslintrc.js: eslint의 config 파일입니다. linting 규칙을 이 파일에서 관리할 수 있습니다.

  • babel.config.js: Babel의 config 파일입니다. Babel은 개발용으로 사용하는 최신 JavaScript 기능을 상용 브라우저 호환이 가능하도록 구버전으로 번역하는 역할을 합니다. 대표적으로, ECMA Script 2015(비공식적으로 ES6라고도 불림)로 작성된 코드를 ES5로 변환해 IE 등의 브라우저에서 동작할 수 있도록 해주는 것이 Babel이 하는 일입니다. 이 파일에 부가적인 babel 플러그인을 등록할 수 있습니다.

  • .browserslistrc: Browserslist의 config 파일입니다. 우리가 사용하는 도구를 어떤 브라우저에 최적화할지 이 파일에 정의할 수 있습니다.

  • public: public 디렉토리는 Webpack의 처리를 받지 않고 퍼블리싱되는 정적 자산(static assets)을 포함합니다. (단, index.html의 경우 일부 Webpack의 처리를 받습니다)

    • favicon.ico: 앱의 대표 favicon 파일입니다. 기본값으로 Vue 로고가 들어가 있습니다.
    • index.html: 앱의 템플릿 파일입니다. 우리의 Vue 앱은 이 HTML 페이지로부터 실행됩니다. lodash 템플릿 구문을 사용해 보간법으로 값을 지정할 수 있습니다.

      참고: index.html 파일은 애플리케이션 레이아웃을 관리하는 템플릿이 아닙니다. 이 파일은 Vue 앱 외부의 정적 HTML을 제어하는 템플릿입니다. 고급 사용 사례를 제외하면 이 파일을 직접 편집할 일은 거의 없습니다.

  • src: 우리의 Vue 애플리케이션의 핵심 내용을 포함하게 될 디렉토리입니다.

    • main.js: 이 파일은 애플리케이션의 진입점입니다. 현재 이 파일은 Vue 앱을 초기화하고 index.html 파일에서 어떤 HTML 엘리멘트를 앱에 붙여야 하는지 (예제 프로젝트에서는 #app 엘리멘트) 나타냅니다. 이 파일에 전역 컴포넌트나 부가적인 Vue 라이브러리를 등록하는 경우가 많습니다.
    • App.vue: Vue 애플리케이션의 최상위 컴포넌트입니다. Vue 컴포넌트에 대한 자세한 내용은 아래를 참조하세요.
    • components: 우리가 앞으로 만들 Vue 컴포넌트를 저장할 디렉토리입니다. 지금은 한 개의 예시 컴포넌트만을 포함하고 있습니다.
    • assets: CSS나 이미지 등의 정적 자산(static assets)을 저장하는 디렉토리입니다. 이 파일들은 src 디렉토리에 포함되어 있기 때문에 Webpack의 처리를 받습니다. 즉, Sass/SCSS나 Stylus와 같은 전처리 도구를 사용할 수 있다는 의미입니다.



3. 파일 살펴보기


App.js


<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="<https://cli.vuejs.org>" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="<https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel>" target="_blank" rel="noopener">babel</a></li>
      <li><a href="<https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint>" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="<https://vuejs.org>" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="<https://forum.vuejs.org>" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="<https://chat.vuejs.org>" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="<https://twitter.com/vuejs>" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="<https://news.vuejs.org>" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="<https://router.vuejs.org>" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="<https://vuex.vuejs.org>" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="<https://github.com/vuejs/vue-devtools#vue-devtools>" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="<https://vue-loader.vuejs.org>" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="<https://github.com/vuejs/awesome-vue>" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>



단일 컴포넌트 구조


모든 단일 파일 컴포넌트는 이러한 기본 구조로 이루어져 있습니다.

  • <template> 파트: 컴포넌트 템플릿을 정의

  • <script> 파트: 스크립트를 작성

  • <style> 파트: 스타일링 정보를 작성



4. To-Do App 만들기




1) Bootstrap 설치하기


npm install bootstrap@5.2.3



2) main.js




import { createApp } from 'vue'
import App from './App.vue'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
 
createApp(App).mount('#app')



3) App.vue



<template> 
  <div id="app">
    <div class="container">
      <div class="col-md-6 offset-md-3">
        <h1 class="text-center mb-4">Todo 어플리케이션</h1>
        <input type="text" class="form-control mb-4" v-model="userInput" @keyup.enter="addNewTodo">
      </div>
      <div class="list-group mb-4">
        <template v-for="todo in activeTodoList" v-bind:key="todo">
          <!-- <todo
            :label="todo.label"
            @componentClick="toggleTodoState(todo)"
            /> -->
          <button class="list-group-item text-left" @click="toggleTodoState(todo)">
            {{todo.label}}
          </button>
           
        </template>
      </div>
 
      <div class="text-right">
        <button type="button" class="btn btn-sm" @click="changeCurrentState('active')">할 일</button>
        <button type="button" class="btn btn-sm" @click="changeCurrentState('done')">완료</button>
        <button type="button" class="btn btn-sm" @click="changeCurrentState('all')">전체</button>
      </div>
 
    </div>
  </div>
</template>
 
<script>
import Todo from './components/Todo';
 
export default {
  name: 'App',
  data(){
    return{
      userInput:'',
      todoList:[],
      currentState: 'active'
    };
  },
  computed:{
    activeTodoList(){
      return this.todoList.filter(todo => this.currentState === 'all' || todo.state === this.currentState);
    },
  },
  methods:{
    changeCurrentState(state){
      this.currentState = state;
    },
    addNewTodo(){
      this.todoList.push({
        label: this.userInput,
        state: 'active',
      });
      this.userInput='';
 
    },
    toggleTodoState(todo){
      todo.state = todo.state === 'active' ? 'done' : 'active';
    },
    components:{
      Todo
    }
  }
}
</script>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>



profile
아현
For the sake of someone who studies computer science
다음 포스트

[Vue.js] state 추적해서 화면에 보여주기

0개의 댓글

관련 채용 정보