{"id":1536,"date":"2026-01-07T13:31:48","date_gmt":"2026-01-07T18:31:48","guid":{"rendered":"https:\/\/artfulmonkeys.xyz\/wp\/?p=1536"},"modified":"2026-01-09T11:54:16","modified_gmt":"2026-01-09T16:54:16","slug":"introduction-to-vue-and-the-tool-chain","status":"publish","type":"post","link":"https:\/\/artfulmonkeys.xyz\/wp\/client-side\/2026\/introduction-to-vue-and-the-tool-chain\/","title":{"rendered":"Introduction to Vue and the Tool Chain"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/artfulmonkeys.xyz\/wp\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-07-at-4.49.38-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-1555\" src=\"http:\/\/artfulmonkeys.xyz\/wp\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-07-at-4.49.38-PM-1024x390.png\" alt=\"\" width=\"1024\" height=\"390\" srcset=\"https:\/\/artfulmonkeys.xyz\/wp\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-07-at-4.49.38-PM-1024x390.png 1024w, https:\/\/artfulmonkeys.xyz\/wp\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-07-at-4.49.38-PM-300x114.png 300w, https:\/\/artfulmonkeys.xyz\/wp\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-07-at-4.49.38-PM-768x293.png 768w, https:\/\/artfulmonkeys.xyz\/wp\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-07-at-4.49.38-PM.png 1364w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/artfulmonkeys.xyz\/wp\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-07-at-2.19.36-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1543 alignright\" src=\"http:\/\/artfulmonkeys.xyz\/wp\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-07-at-2.19.36-PM-1024x475.png\" alt=\"\" width=\"512\" height=\"238\" srcset=\"https:\/\/artfulmonkeys.xyz\/wp\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-07-at-2.19.36-PM-1024x475.png 1024w, https:\/\/artfulmonkeys.xyz\/wp\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-07-at-2.19.36-PM-300x139.png 300w, https:\/\/artfulmonkeys.xyz\/wp\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-07-at-2.19.36-PM-768x356.png 768w, https:\/\/artfulmonkeys.xyz\/wp\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-07-at-2.19.36-PM.png 1362w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/a><\/p>\n<p><strong>Vue Documentation: <\/strong><a href=\"https:\/\/vuejs.org\/guide\/introduction.html\">Introduction<\/a><\/p>\n<ul>\n<li>What is the purpose of Vue?<\/li>\n<li>What standards is Vue built on top of?<\/li>\n<li>What is a component?<\/li>\n<li>What is the state of a web page or component?<\/li>\n<li>What is reactivity?<\/li>\n<li>What does SFC stand for?<\/li>\n<li>What are the 3 parts of a SFC file?<\/li>\n<li>What are the two different API styles?<\/li>\n<li>How do you toggle the documentation to show Component API examples?<\/li>\n<\/ul>\n<p><a href=\"http:\/\/artfulmonkeys.xyz\/wp\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-07-at-2.14.24-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1541 alignright\" src=\"http:\/\/artfulmonkeys.xyz\/wp\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-07-at-2.14.24-PM-876x1024.png\" alt=\"\" width=\"438\" height=\"512\" srcset=\"https:\/\/artfulmonkeys.xyz\/wp\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-07-at-2.14.24-PM-876x1024.png 876w, https:\/\/artfulmonkeys.xyz\/wp\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-07-at-2.14.24-PM-257x300.png 257w, https:\/\/artfulmonkeys.xyz\/wp\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-07-at-2.14.24-PM-768x898.png 768w, https:\/\/artfulmonkeys.xyz\/wp\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-07-at-2.14.24-PM.png 1028w\" sizes=\"auto, (max-width: 438px) 100vw, 438px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Vue Documentation:<\/strong> <a href=\"https:\/\/vuejs.org\/guide\/quick-start.html\">Quick Start (up to Using Vue From CDN)<\/a><\/p>\n<ul>\n<li>What is a single page application?<\/li>\n<li>What is the purpose of Vite?<\/li>\n<li>What does <code>npm create vue@latest<\/code> do?<\/li>\n<li>What command do you run to download and install into your project the npm modules specified in package.json?<\/li>\n<li>What command do you run to start up the Vite server and create a development build of your application?<\/li>\n<li>Which VSC keyboard shortcut can be used to open a terminal in VSC?<\/li>\n<li>Which VSC extensions should you install in VSC to support Vue?<\/li>\n<li>Which command builds production-ready code that can be deployed?<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><b>Tutorial:<\/b>\u00a0<a href=\"https:\/\/artfulmonkeys.xyz\/wp\/client-side\/creating-a-new-vue-spa\/\">Create a new Vue SPA<\/a><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Vue Documentation:<\/strong> <a href=\"https:\/\/vuejs.org\/guide\/essentials\/application.html\">Creating an Application<\/a><\/p>\n<ul>\n<li>What is the name of the file that Vite uses as the entry-point for a web application?<\/li>\n<li>What is passed to createApp() and what does createApp() do?<\/li>\n<li>What file can we find the call to createApp()? \u00a0<\/li>\n<li>What file loads the file containing the call to createApp()?<\/li>\n<li>What function (on the application instance) do we call to render the application in the browser?<\/li>\n<li>Where is an app mounted?<\/li>\n<li>What function (on the application instance) do we call to register a component?<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><strong>Tutorial:<\/strong> <a href=\"https:\/\/artfulmonkeys.xyz\/wp\/client-side\/client-side-lecture-notes\/creating-a-production-build\/\">Create a Production Build<\/a><\/p>\n<ul>\n<li>What is in <em>dist\/assets<\/em>?<\/li>\n<li>What is the primary purpose of <em>dist\/index.html<\/em>?<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; Vue Documentation: Introduction What is the purpose of Vue? What standards is Vue built on top of? What is a component? What is the state of a web page or component? What is reactivity? What does SFC stand for? What are the 3 parts of a SFC file? What are the two different API [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[],"class_list":["post-1536","post","type-post","status-publish","format-standard","hentry","category-16"],"_links":{"self":[{"href":"https:\/\/artfulmonkeys.xyz\/wp\/wp-json\/wp\/v2\/posts\/1536","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/artfulmonkeys.xyz\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/artfulmonkeys.xyz\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/artfulmonkeys.xyz\/wp\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/artfulmonkeys.xyz\/wp\/wp-json\/wp\/v2\/comments?post=1536"}],"version-history":[{"count":23,"href":"https:\/\/artfulmonkeys.xyz\/wp\/wp-json\/wp\/v2\/posts\/1536\/revisions"}],"predecessor-version":[{"id":1590,"href":"https:\/\/artfulmonkeys.xyz\/wp\/wp-json\/wp\/v2\/posts\/1536\/revisions\/1590"}],"wp:attachment":[{"href":"https:\/\/artfulmonkeys.xyz\/wp\/wp-json\/wp\/v2\/media?parent=1536"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/artfulmonkeys.xyz\/wp\/wp-json\/wp\/v2\/categories?post=1536"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/artfulmonkeys.xyz\/wp\/wp-json\/wp\/v2\/tags?post=1536"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}