npm (Node Package Manager)<\/li>\n<\/ul>\nYou can download Node.js from the official website: https:\/\/nodejs.org\/en\/download\/.<\/p>\n
Getting started<\/h2>\n
To create a new Vue.js project, we will use the Vue CLI (Command Line Interface). Open your terminal\/command prompt and run the following command:<\/p>\n
npm install -g @vue\/cli\n<\/code><\/pre>\nOnce the installation is completed, create a new project by running the following command:<\/p>\n
vue create my-project\n<\/code><\/pre>\nmy-project<\/code> is the name of your project and can be changed to your liking. You will be prompted to select the features you want to include in your project. You can choose the default options or customize them based on your needs. The CLI will then generate a new project in a directory named after your project.<\/p>\nProject structure<\/h2>\n
The structure of a Vue.js project is similar to that of other web applications. Here is an overview of the files and directories generated by the Vue CLI:<\/p>\n
my-project\/\n\u251c\u2500\u2500 node_modules\/ # Dependencies\n\u251c\u2500\u2500 public\/ # Public assets\n\u2502 \u251c\u2500\u2500 index.html # HTML entry point\n\u251c\u2500\u2500 src\/ # Application source code\n\u2502 \u251c\u2500\u2500 assets\/ # Static assets\n\u2502 \u251c\u2500\u2500 components\/ # Vue components\n\u2502 \u251c\u2500\u2500 App.vue # Main Vue component\n\u2502 \u2514\u2500\u2500 main.js # Main entry point\n\u251c\u2500\u2500 .gitignore # Git ignore file\n\u251c\u2500\u2500 package.json # Package metadata\n\u2514\u2500\u2500 README.md # Project readme\n<\/code><\/pre>\n\nnode_modules<\/code> contains all the project dependencies installed by npm.<\/li>\npublic<\/code> contains the static assets, such as index.html<\/code>, used as the entry point for the application.<\/li>\nsrc<\/code> contains the source code for the application, including Vue components, static assets, and the main entry point.<\/li>\n.gitignore<\/code> specifies the files and directories to be ignored by Git.<\/li>\npackage.json<\/code> contains the metadata for the application, including project dependencies and scripts.<\/li>\nREADME.md<\/code> contains project documentation.<\/li>\n<\/ul>\nBasic Vue.js Component<\/h2>\n
In Vue.js, a component defines a reusable UI element. A basic component template consists of a <template><\/code>, <script><\/code>, and <style><\/code> block.<\/p>\nCreate a new file named HelloWorld.vue<\/code> in the src\/components<\/code> directory and add the following code:<\/p>\n<template>\n <div class=\"hello-world\">\n {{ message }}\n <\/div>\n<\/template>\n\n<script>\nexport default {\n name: 'HelloWorld',\n data() {\n return {\n message: 'Hello, World!'\n };\n }\n};\n<\/script>\n\n<style>\n.hello-world {\n font-size: 24px;\n font-weight: bold;\n text-align: center;\n margin-top: 50px;\n}\n<\/style>\n<\/code><\/pre>\nThe <template><\/code> block defines the HTML structure of the component. In this case, it is a simple <div><\/code> element that displays a message.<\/p>\nThe <script><\/code> block defines the logic of the component. It exports an object with a name<\/code> property, which is required for naming the component, and a data<\/code> function, which returns an object with a message<\/code> property.<\/p>\nThe <style><\/code> block defines the styles of the component.<\/p>\nTo use the HelloWorld<\/code> component, import it into the src\/App.vue<\/code> file and add it to the <template><\/code> block.<\/p>\n<template>\n <div id=\"app\">\n <img alt=\"Vue logo\" src=\".\/assets\/logo.png\">\n <HelloWorld \/>\n <\/div>\n<\/template>\n\n<script>\nimport HelloWorld from '.\/components\/HelloWorld.vue';\n\nexport default {\n name: 'App',\n components: {\n HelloWorld\n }\n};\n<\/script>\n\n<style>\n#app {\n font-family: Avenir, Helvetica, Arial, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-align: center;\n color: #2c3e50;\n margin-top: 60px;\n}\n<\/style>\n<\/code><\/pre>\nThe <template><\/code> block now includes the HelloWorld<\/code> component. The <script><\/code> block imports the HelloWorld<\/code> component and registers it with the components<\/code> property of the App<\/code> component.<\/p>\nVue Router<\/h2>\n
Vue Router is the official routing library for Vue.js. It allows you to define routes for your application and navigate between them.<\/p>\n
To use Vue Router in your project, run the following command in your terminal:<\/p>\n
npm install vue-router\n<\/code><\/pre>\nOnce the installation is complete, create a new file named router.js<\/code> in the src<\/code> directory and add the following code:<\/p>\nimport Vue from 'vue';\nimport VueRouter from 'vue-router';\nimport Home from '.\/views\/Home.vue';\n\nVue.use(VueRouter);\n\nconst routes = [\n {\n path: '\/',\n name: 'home',\n component: Home\n }\n];\n\nconst router = new VueRouter({\n mode: 'history',\n routes\n});\n\nexport default router;\n<\/code><\/pre>\nThe router.js<\/code> file imports Vue, Vue Router, and the Home<\/code> component. It then registers Vue Router with Vue using Vue.use()<\/code>, defines the application routes, and creates a new VueRouter<\/code> instance.<\/p>\nThe mode<\/code> property specifies the routing mode, which can be either hash<\/code> or history<\/code>. In hash<\/code> mode, the URL is appended with a hash (#<\/code>) symbol, while in history<\/code> mode, it uses the HTML5 History API to manipulate the browser history.<\/p>\nTo use the router in your application, import it into the src\/main.js<\/code> file and add it to the Vue instance.<\/p>\nimport Vue from 'vue';\nimport App from '.\/App.vue';\nimport router from '.\/router';\n\nVue.config.productionTip = false;\n\nnew Vue({\n router,\n render: h => h(App)\n}).$mount('#app');\n<\/code><\/pre>\nThe Vue instance now includes the router<\/code> property, which is set to the router<\/code> instance created in router.js<\/code>.<\/p>\nVuex<\/h2>\n
Vuex is a state management pattern and library for Vue.js. It allows you to manage application states in a centralized store, making it easier to manage and debug your application.<\/p>\n
To use Vuex in your project, run the following command in your terminal:<\/p>\n
npm install vuex\n<\/code><\/pre>\nOnce the installation is complete, create a new file named store.js<\/code> in the src<\/code> directory and add the following code:<\/p>\nimport Vue from 'vue';\nimport Vuex from 'vuex';\n\nVue.use(Vuex);\n\nexport default new Vuex.Store({\n state: {\n count: 0\n },\n mutations: {\n increment(state) {\n state.count++;\n },\n decrement(state) {\n state.count--;\n }\n },\n actions: {\n increment(context) {\n context.commit('increment');\n },\n decrement(context) {\n context.commit('decrement');\n }\n },\n getters: {\n getCount(state) {\n return state.count;\n }\n }\n});\n<\/code><\/pre>\nThe store.js<\/code> file imports Vue and Vuex, registers Vuex with Vue using Vue.use()<\/code>, and exports a new Vuex store instance.<\/p>\nThe store instance contains four properties:<\/p>\n
\nstate<\/code>: the application state, which is a plain JavaScript object.<\/li>\nmutations<\/code>: the methods for changing the state. They take the state as the first argument and can be accessed using context.commit()<\/code>.<\/li>\nactions<\/code>: the methods for asynchronous state manipulation. They can commit mutations using context.commit()<\/code> and can be accessed using context.dispatch()<\/code>.<\/li>\ngetters<\/code>: computed properties for getting data from the state.<\/li>\n<\/ul>\nTo use the store in your application, import it into the src\/main.js<\/code> file and add it to the Vue instance.<\/p>\nimport Vue from 'vue';\nimport App from '.\/App.vue';\nimport router from '.\/router';\nimport store from '.\/store';\n\nVue.config.productionTip = false;\n\nnew Vue({\n router,\n store,\n render: h => h(App)\n}).$mount('#app');\n<\/code><\/pre>\nThe Vue instance now includes the store<\/code> property, which is set to the store<\/code> instance created in store.js<\/code>.<\/p>\nConclusion<\/h2>\n
In this tutorial, we have covered the basics of building web applications with Vue.js. We created a simple Vue component, implemented Vue Router for handling navigation, and used Vuex for state management. While these are just the basics, Vue.js provides a lot more functionality and flexibility for building complex applications.<\/p>\n
By following this tutorial, you should have a good understanding of how to start building web applications with Vue.js. For more advanced topics, refer to the official documentation or the Vue.js community for support.<\/p>\n","protected":false},"excerpt":{"rendered":"
Vue.js is a progressive JavaScript framework for building user interfaces. It is designed to be easily integrated into existing projects and provides a flexible, scalable solution for front-end development. In this tutorial, we will guide you through the steps of building a web application with Vue.js from scratch. Prerequisites Before Continue Reading<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[50,46,1577,49,698,773],"yoast_head":"\nBuilding web applications with Vue.js - Pantherax Blogs<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/localhost:10003\/building-web-applications-with-vue-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building web applications with Vue.js\" \/>\n<meta property=\"og:description\" content=\"Vue.js is a progressive JavaScript framework for building user interfaces. It is designed to be easily integrated into existing projects and provides a flexible, scalable solution for front-end development. In this tutorial, we will guide you through the steps of building a web application with Vue.js from scratch. Prerequisites Before Continue Reading\" \/>\n<meta property=\"og:url\" content=\"http:\/\/localhost:10003\/building-web-applications-with-vue-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Pantherax Blogs\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-04T23:14:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-05T05:47:57+00:00\" \/>\n<meta name=\"author\" content=\"Panther\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Panther\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t \"@context\": \"https:\/\/schema.org\",\n\t \"@graph\": [\n\t {\n\t \"@type\": \"Article\",\n\t \"@id\": \"http:\/\/localhost:10003\/building-web-applications-with-vue-js\/#article\",\n\t \"isPartOf\": {\n\t \"@id\": \"http:\/\/localhost:10003\/building-web-applications-with-vue-js\/\"\n\t },\n\t \"author\": {\n\t \"name\": \"Panther\",\n\t \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\"\n\t },\n\t \"headline\": \"Building web applications with Vue.js\",\n\t \"datePublished\": \"2023-11-04T23:14:07+00:00\",\n\t \"dateModified\": \"2023-11-05T05:47:57+00:00\",\n\t \"mainEntityOfPage\": {\n\t \"@id\": \"http:\/\/localhost:10003\/building-web-applications-with-vue-js\/\"\n\t },\n\t \"wordCount\": 828,\n\t \"publisher\": {\n\t \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t },\n\t \"keywords\": [\n\t \"\\\"Front-end development\\\"]\",\n\t \"\\\"JavaScript framework\\\"\",\n\t \"\\\"web development tools\\\"]\",\n\t \"\\\"Web development\\\"\",\n\t \"[\\\"Building web applications\\\"\",\n\t \"[\\\"Vue.js\\\"\"\n\t ],\n\t \"inLanguage\": \"en-US\"\n\t },\n\t {\n\t \"@type\": \"WebPage\",\n\t \"@id\": \"http:\/\/localhost:10003\/building-web-applications-with-vue-js\/\",\n\t \"url\": \"http:\/\/localhost:10003\/building-web-applications-with-vue-js\/\",\n\t \"name\": \"Building web applications with Vue.js - Pantherax Blogs\",\n\t \"isPartOf\": {\n\t \"@id\": \"http:\/\/localhost:10003\/#website\"\n\t },\n\t \"datePublished\": \"2023-11-04T23:14:07+00:00\",\n\t \"dateModified\": \"2023-11-05T05:47:57+00:00\",\n\t \"breadcrumb\": {\n\t \"@id\": \"http:\/\/localhost:10003\/building-web-applications-with-vue-js\/#breadcrumb\"\n\t },\n\t \"inLanguage\": \"en-US\",\n\t \"potentialAction\": [\n\t {\n\t \"@type\": \"ReadAction\",\n\t \"target\": [\n\t \"http:\/\/localhost:10003\/building-web-applications-with-vue-js\/\"\n\t ]\n\t }\n\t ]\n\t },\n\t {\n\t \"@type\": \"BreadcrumbList\",\n\t \"@id\": \"http:\/\/localhost:10003\/building-web-applications-with-vue-js\/#breadcrumb\",\n\t \"itemListElement\": [\n\t {\n\t \"@type\": \"ListItem\",\n\t \"position\": 1,\n\t \"name\": \"Home\",\n\t \"item\": \"http:\/\/localhost:10003\/\"\n\t },\n\t {\n\t \"@type\": \"ListItem\",\n\t \"position\": 2,\n\t \"name\": \"Building web applications with Vue.js\"\n\t }\n\t ]\n\t },\n\t {\n\t \"@type\": \"WebSite\",\n\t \"@id\": \"http:\/\/localhost:10003\/#website\",\n\t \"url\": \"http:\/\/localhost:10003\/\",\n\t \"name\": \"Pantherax Blogs\",\n\t \"description\": \"\",\n\t \"publisher\": {\n\t \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t },\n\t \"potentialAction\": [\n\t {\n\t \"@type\": \"SearchAction\",\n\t \"target\": {\n\t \"@type\": \"EntryPoint\",\n\t \"urlTemplate\": \"http:\/\/localhost:10003\/?s={search_term_string}\"\n\t },\n\t \"query-input\": \"required name=search_term_string\"\n\t }\n\t ],\n\t \"inLanguage\": \"en-US\"\n\t },\n\t {\n\t \"@type\": \"Organization\",\n\t \"@id\": \"http:\/\/localhost:10003\/#organization\",\n\t \"name\": \"Pantherax Blogs\",\n\t \"url\": \"http:\/\/localhost:10003\/\",\n\t \"logo\": {\n\t \"@type\": \"ImageObject\",\n\t \"inLanguage\": \"en-US\",\n\t \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\",\n\t \"url\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t \"contentUrl\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t \"width\": 1024,\n\t \"height\": 1024,\n\t \"caption\": \"Pantherax Blogs\"\n\t },\n\t \"image\": {\n\t \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\"\n\t }\n\t },\n\t {\n\t \"@type\": \"Person\",\n\t \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\",\n\t \"name\": \"Panther\",\n\t \"image\": {\n\t \"@type\": \"ImageObject\",\n\t \"inLanguage\": \"en-US\",\n\t \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/image\/\",\n\t \"url\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t \"contentUrl\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t \"caption\": \"Panther\"\n\t },\n\t \"sameAs\": [\n\t \"http:\/\/localhost:10003\"\n\t ],\n\t \"url\": \"http:\/\/localhost:10003\/author\/pepethefrog\/\"\n\t }\n\t ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Building web applications with Vue.js - Pantherax Blogs","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/localhost:10003\/building-web-applications-with-vue-js\/","og_locale":"en_US","og_type":"article","og_title":"Building web applications with Vue.js","og_description":"Vue.js is a progressive JavaScript framework for building user interfaces. It is designed to be easily integrated into existing projects and provides a flexible, scalable solution for front-end development. In this tutorial, we will guide you through the steps of building a web application with Vue.js from scratch. Prerequisites Before Continue Reading","og_url":"http:\/\/localhost:10003\/building-web-applications-with-vue-js\/","og_site_name":"Pantherax Blogs","article_published_time":"2023-11-04T23:14:07+00:00","article_modified_time":"2023-11-05T05:47:57+00:00","author":"Panther","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Panther","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/localhost:10003\/building-web-applications-with-vue-js\/#article","isPartOf":{"@id":"http:\/\/localhost:10003\/building-web-applications-with-vue-js\/"},"author":{"name":"Panther","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7"},"headline":"Building web applications with Vue.js","datePublished":"2023-11-04T23:14:07+00:00","dateModified":"2023-11-05T05:47:57+00:00","mainEntityOfPage":{"@id":"http:\/\/localhost:10003\/building-web-applications-with-vue-js\/"},"wordCount":828,"publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"keywords":["\"Front-end development\"]","\"JavaScript framework\"","\"web development tools\"]","\"Web development\"","[\"Building web applications\"","[\"Vue.js\""],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/localhost:10003\/building-web-applications-with-vue-js\/","url":"http:\/\/localhost:10003\/building-web-applications-with-vue-js\/","name":"Building web applications with Vue.js - Pantherax Blogs","isPartOf":{"@id":"http:\/\/localhost:10003\/#website"},"datePublished":"2023-11-04T23:14:07+00:00","dateModified":"2023-11-05T05:47:57+00:00","breadcrumb":{"@id":"http:\/\/localhost:10003\/building-web-applications-with-vue-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/localhost:10003\/building-web-applications-with-vue-js\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/localhost:10003\/building-web-applications-with-vue-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/localhost:10003\/"},{"@type":"ListItem","position":2,"name":"Building web applications with Vue.js"}]},{"@type":"WebSite","@id":"http:\/\/localhost:10003\/#website","url":"http:\/\/localhost:10003\/","name":"Pantherax Blogs","description":"","publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/localhost:10003\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/localhost:10003\/#organization","name":"Pantherax Blogs","url":"http:\/\/localhost:10003\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/","url":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","contentUrl":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","width":1024,"height":1024,"caption":"Pantherax Blogs"},"image":{"@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7","name":"Panther","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/person\/image\/","url":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","contentUrl":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","caption":"Panther"},"sameAs":["http:\/\/localhost:10003"],"url":"http:\/\/localhost:10003\/author\/pepethefrog\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/4180"}],"collection":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/comments?post=4180"}],"version-history":[{"count":1,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/4180\/revisions"}],"predecessor-version":[{"id":4356,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/4180\/revisions\/4356"}],"wp:attachment":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/media?parent=4180"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/categories?post=4180"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/tags?post=4180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}