Express + Vue.js로 Hello를 꺼내보세요.

5876 단어 Node.jsExpress.jsVue.js
안녕하십니까, 안녕하십니까!
요즘 Front-end 프레임이 많이 나온 것 같아요.
친구와 함께 해 보세요!시작했어.
처음에 어떤 프레임을 사용했을까
react/vue가 인기가 많아요. - 뭐가 달라요?대충 훑어보다
  • Vue
  • 어플리케이션을 템플릿으로 만들려면
  • 간단한'일시적인 동작'을 좋아한다면
  • 빠르고 가벼운 어플리케이션을 만들려면
  • React
  • 대규모 어플리케이션을 위한 경우
  • 더 큰 정보를 원한다면
    • 이런 차이가 있다.
    간단한 프로젝트이기 때문에 Vue를 선택했습니다.
    (사실 한국에서는 아무것도 모르고 Vue 책을 사왔기 때문에 처음부터 vue를 하기로 했어요.웃음)
    back-end는 node입니다.js의 express 프레임워크를 사용하세요.

    해볼게요^0^

  • node.js install
    https://nodejs.org/
    install.lts가 더 안정적인 것 같아서 lts를 설치했습니다.
  • 명령줄에 설치된 확인$ node -v버전 출력 후 ok
  • package.제이슨으로 가방 관리하기
    package.json 생성$npm initexpress 설치 node_모듈로 생성된 폴더$npm install --save express
    • 4. html 파일을 배치한public directory를 node_로 설정모듈과 함께 생성
    생성$mkdir public들어가다$cd public
    index.html 페이지 생성$vi index.htmlindex.html
    <!DOCTYPE html>
<html>
  <head>
    <title>Vue.js Sample</title>
  </head>
  <body>
    <div id="app">
      <h1>{{ message }}</h1>
        <input v-model='message'>
    </div>
    <!-- vue.js読み込み-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue.js!'
        }
      })
    </script>
  </body>
</html>
    v-model을 사용하여 input와textarea 요소에 양방향 데이터 연결을 생성할 수 있습니다.
    javascript의 jquery와 input의value를 h1에 적용합니다.
    Nue Vue~하면 돼요.
    5.node.js의 index를 실행합니다.js 생성(node_modules와public와 함께 단계)$cd ../ $vi index.jsindex.js
    const express = require('express');

const app = express();
const PORT = process.env.PORT = 8000; //port8000に指定、変えてもok

app.use(express.static('public')); //

app.listen(PORT, () => {
  console.log('Server is running at:',PORT);
});
    6.index.js에서 실행$node index.jsconsole
    Server is running at: 8000
    나타나면localhost:8000에 연결

    이 화면이 나타나면 내용을 아래의 input로 변경하면 Hello Vue입니다.js!에서 설명한 대로 해당 매개변수의 값을 수정합니다.
    아주 간단해!
    vue.js의 해설보다 우선 화면을 보여 보세요!되다
    여기서 끝!

    참고 자료


    https://jp.vuejs.org/index.html
    자신이 한국인이기 때문에 https://kr.vuejs.org/index.html 여기를 참조했다(웃음)
    https://joshua1988.github.io/web_dev/vue-or-react/한국어 (땀)
    쓰레드의 우선순위
    [알고리즘] 순열, 중복순열

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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