초입문 vue-cli 프로젝트 만들기

15096 단어 Vue.jsvue-cli

소개



최근 vue.js를 만지기 시작해, 만지고 있으면 뭐 재밌기 때문에 기사로 할까라고 생각했습니다.
vue.js는 css를 vue의 컴포넌트 내에 스코프 할 수있는 것이 매우 좋네요.
BEM은 필요하지 않다. 됩니다! ! !
이번에는 초입문 ~vue-cli를 사용한 프로젝트 작성 절차~입니다.
코딩은 일절하지 않을 예정이므로 양해 바랍니다.

환경


$ node -v 
v8.11.3
$ vue --version
3.2.1

위의 명령에서 node.js (8.9 이상)와 vue-cli가 포함되어 있는지 확인하십시오.
포함되어 있지 않은 경우는, 각자 인스톨을 부탁합니다.
아래의 명령을 설치할 수 있을까 생각합니다.
brew install node
npm install -g @vue/cli @vue/cli-service-global

vue 프로젝트 만들기



다음 명령으로 vue 프로젝트를 만듭니다.
vue create <project-name>

위의 명령을 실행하면 다음과 같은 선택이 필요합니다.
이번에는 default 대신 Manually select features를 선택했습니다.
Manually select features를 선택하면
❯◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

이러한 선택을 강요당할 수 있습니다.
필요한 플러그인을 선택하면 번거로운 설정을 모두 해주는 것 같습니다. 신이군요.
그건 그렇고, 프로젝트를 만든 후 추가하고 싶다면,
vue add <plugin-name>

라고 실행하면, 이것 또 귀찮은 설정등을 실시해 줍니다.

작성한 프로젝트는 아래와 같은 구조로 되어 있습니다.
<project-name>/
├── README.md
├── babel.config.js
├── node_modules
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
└── src

동작 확인



프로젝트를 만들 수 있으면 프로젝트가 있는 디렉토리로 이동하여
$ npm run serve

실행하면 서버가 시작됩니다.
아래와 같은 화면이 나오면 성공입니다.


왜 이러한 화면이 표시되는지 조금 쫓아 봅니다.
자세한 내용은 모르겠지만 vue-cli-service가 잘 해주고 있다고 생각합니다.
톱 페이지는 public/index.html입니다.

public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>project</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

index.html의 <div id="app"></div>가 조금 중요합니다.

다음으로 src/main.js를 살펴 보겠습니다.

src/main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

이 main.js는 이전 index.html <div id="app"></div>에 App.vue를 그립니다.

이번에는 src/App.vue와 App.vue에서 호출되는 구성 요소를 살펴 보겠습니다.

src/App.vue
<template>
  <div id="app">
    <img alt="vue logo" src="./assets/logo.png">
    <helloworld msg="welcome to your vue.js app"/>
  </div>
</template>

<script>
import helloworld from './components/helloworld.vue'

export default {
  name: 'app',
  components: {
    helloworld
  }
}
</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>

src/components/HelloWorld.vue
<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>
// 長くなるので割愛
</style>

이 App.vue가이 화면의 정체라는 것입니다.



끝에



vue-cli로 프로젝트 작성의 개요를 조금이라도 알 수 있으면 다행입니다.
꼭 이것을 계기로 vue.js를 만져보세요!
Vue CLI 3에서 Hello-World하기
처음 vue.js ① ~로컬 환경에서의 개발/환경 구축/vue-cli3~

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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