미래 지향적인 웹 앱 구축: The Codest의 전문가 팀이 제공하는 인사이트
The Codest가 최첨단 기술로 확장 가능한 대화형 웹 애플리케이션을 제작하고 모든 플랫폼에서 원활한 사용자 경험을 제공하는 데 탁월한 성능을 발휘하는 방법을 알아보세요. Adobe의 전문성이 어떻게 디지털 혁신과 비즈니스를 촉진하는지 알아보세요...
Vue.js is a progressive framework that makes it easy to build web-based applications. It lets you compose complex UIs from small and isolated pieces of code called ‘components’. Declarative views make your code more predictable and easier to debug.
The most recommended way to create the Vue.js 프로젝트 는 Vue CLI. To install it just type:
npm install -g @vue/cli
and then create a project:
vue create simple-project
cd ./simple-project
Finally, you can run your project:
npm run serve
Thanks to webpack and vue-loader plugin we can create components in .vue files. Every component includes the template with an HTML view, a script with logic and style with CSS styling.
Let’s create simple VArticle.vue component in simple-project/src/components/VArticle.vue file, and the following content:
<div class="article">
<h1 class="article__title">(( article.title ))</h1>
<p><span class="article__author"><br>(( article.author ))<br></span></p>
<p class="article__lead">(( article.lead ))</p>
</div>
</>
To use a previously created component we need to set simple-project/src/App.vue file content to:
<div>
<div> </div>
</div>
</>
Now when you open a browser on http://localhost:8080/ you should see a screen like:
In this tutorial, I’ve tried to show you how to start your adventure with the Vue framework. If you are curious about how to create more advanced components, you will certainly find them in our open source vuelendar 프로젝트.