[{"data":1,"prerenderedAt":505},["ShallowReactive",2],{"blog-\u002Fblog\u002Fwhat-is-a-cli":3,"blog-\u002Fblog\u002Fwhat-is-a-cli-surround":461,"blog-related":472},{"id":4,"title":5,"body":6,"date":449,"description":450,"extension":451,"meta":452,"minutes":361,"navigation":357,"path":453,"seo":454,"stem":455,"subtitle":456,"tags":457,"__hash__":460},"blog\u002Fblog\u002Fwhat-is-a-cli.md","What is a CLI",{"type":7,"value":8,"toc":437},"minimark",[9,18,23,29,32,75,81,93,100,104,110,115,143,147,166,173,177,186,192,196,211,215,218,267,273,277,280,283,300,306,310,313,386,410,413,433],[10,11,12],"p",{},[13,14,17],"a",{"href":15,"target":16},"https:\u002F\u002Fdev.to\u002Fbboyakers\u002Fwhat-is-a-cli-53a6","_blank","Dev.to Original Article",[19,20,22],"h2",{"id":21},"what-is-a-cli","What is a CLI?",[24,25],"img",{"src":26,"alt":27,"width":28},"https:\u002F\u002Fdev-to-uploads.s3.amazonaws.com\u002Fi\u002Frk2z3duexrmf05utoydr.PNG","Image of blank Terminal","400px",[10,30,31],{},"Something you might be familiar with in the web development world is this:",[33,34,39],"pre",{"className":35,"code":36,"language":37,"meta":38,"style":38},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","$ npm install \u003Cpackage name>\n","bash","",[40,41,42],"code",{"__ignoreMap":38},[43,44,47,51,55,58,62,65,68,72],"span",{"class":45,"line":46},"line",1,[43,48,50],{"class":49},"sBMFI","$",[43,52,54],{"class":53},"sfazB"," npm",[43,56,57],{"class":53}," install",[43,59,61],{"class":60},"sMK4o"," \u003C",[43,63,64],{"class":53},"package",[43,66,67],{"class":53}," nam",[43,69,71],{"class":70},"sTEyZ","e",[43,73,74],{"class":60},">\n",[10,76,77,78],{},"ex. ",[40,79,80],{},"npm install vue",[10,82,83,87,88,92],{},[24,84],{"alt":85,"src":86},"Gif of npm install vue","https:\u002F\u002Fdev-to-uploads.s3.amazonaws.com\u002Fi\u002Fpro0g6xdis22hcjtonn7.gif","\nYou can even navigate to and around the files on your system, or better yet what we call the ",[89,90,91],"strong",{},"file system",".",[10,94,95,96,99],{},"In that example in the CLI, we are using the node package manager, ",[40,97,98],{},"npm",", to install a package of our choice!",[19,101,103],{"id":102},"basic-commands","Basic Commands",[10,105,106,107,109],{},"There are some basic commands you can use that come in handy when using the ",[89,108,91],{},":",[111,112,114],"h3",{"id":113},"basic-windows-commands","Basic Windows Commands",[116,117,118,125,131,137],"ul",{},[119,120,121,124],"li",{},[40,122,123],{},"dir"," - Lists what is in the current directory (folder).",[119,126,127,130],{},[40,128,129],{},"cd \u003CpathName>"," - Changes the directory (folder) in the file system",[119,132,133,136],{},[40,134,135],{},"cd .."," - Moves you up one level",[119,138,139,142],{},[40,140,141],{},"mkdir or md \u003CfolderName>"," - Makes a new directory (folder).",[111,144,146],{"id":145},"basic-linux-commands","Basic Linux Commands",[116,148,149,154,158,162],{},[119,150,151,124],{},[40,152,153],{},"ls",[119,155,156,130],{},[40,157,129],{},[119,159,160,136],{},[40,161,135],{},[119,163,164,142],{},[40,165,141],{},[10,167,168,172],{},[169,170,171],"em",{},"Suggestion to get comfortable with the CLI",":\nPlay with the commands and see what you can do!",[111,174,176],{"id":175},"basic-challenges","Basic Challenges",[178,179,180,183],"ol",{},[119,181,182],{},"Open your terminal\u002Fcommand prompt and navigate to  your Documents directory and then Downloads directory",[119,184,185],{},"Inside your Documents directory  create a folder",[10,187,188,191],{},[89,189,190],{},"Bonus",": Navigate inside the folder you created and figure out how to create a file!",[19,193,195],{"id":194},"vue-cli","Vue CLI",[10,197,198,199,205,206,92],{},"Before we get go further into getting the project started we need to take a look into the Vue CLI. Vue CLI is the standard command line tooling for developing vue.js projects. To learn how to install Vue CLI ",[13,200,204],{"href":201,"rel":202},"https:\u002F\u002Fcli.vuejs.org\u002F",[203],"nofollow","visit here",". If you're wanting to know more information about how to use the Vue CLI you can visit the ",[13,207,210],{"href":208,"rel":209},"https:\u002F\u002Fcli.vuejs.org\u002Fguide\u002F",[203],"documentation",[19,212,214],{"id":213},"creating-the-project","Creating the Project",[10,216,217],{},"The first thing we need to do is create is a Vue project. Hopefully you've familiarized yourself with the basic commands. Navigate to the directory you'd like to create the project in and type:",[33,219,221],{"className":35,"code":220,"language":37,"meta":38,"style":38},"$ vue create my-app\n\u002F\u002F navigate to new project directory\n$ cd my-app\n",[40,222,223,236,257],{"__ignoreMap":38},[43,224,225,227,230,233],{"class":45,"line":46},[43,226,50],{"class":49},[43,228,229],{"class":53}," vue",[43,231,232],{"class":53}," create",[43,234,235],{"class":53}," my-app\n",[43,237,239,242,245,248,251,254],{"class":45,"line":238},2,[43,240,241],{"class":49},"\u002F\u002F",[43,243,244],{"class":53}," navigate",[43,246,247],{"class":53}," to",[43,249,250],{"class":53}," new",[43,252,253],{"class":53}," project",[43,255,256],{"class":53}," directory\n",[43,258,260,262,265],{"class":45,"line":259},3,[43,261,50],{"class":49},[43,263,264],{"class":53}," cd",[43,266,235],{"class":53},[10,268,269],{},[24,270],{"alt":271,"src":272},"Gif of vue create and cd","https:\u002F\u002Fdev-to-uploads.s3.amazonaws.com\u002Fi\u002Fl8qoqv927550in0j1l60.gif",[19,274,276],{"id":275},"adding-vuetify","Adding Vuetify",[10,278,279],{},"Now that we've created our project and navigated into the directory, next we have to add the Vuetify UI.",[10,281,282],{},"Next we have to add the Vuetify CLI package by typing in our CLI:",[33,284,286],{"className":35,"code":285,"language":37,"meta":38,"style":38},"$ vue add vuetify\n",[40,287,288],{"__ignoreMap":38},[43,289,290,292,294,297],{"class":45,"line":46},[43,291,50],{"class":49},[43,293,229],{"class":53},[43,295,296],{"class":53}," add",[43,298,299],{"class":53}," vuetify\n",[10,301,302],{},[24,303],{"alt":304,"src":305},"Gif of add vuetif","https:\u002F\u002Fdev-to-uploads.s3.amazonaws.com\u002Fi\u002F2fw1znjv09qyznpdpqm5.gif",[19,307,309],{"id":308},"using-vue-ui","Using Vue UI",[10,311,312],{},"We can also use Vue UI to install Vuetify CLI:",[33,314,316],{"className":35,"code":315,"language":37,"meta":38,"style":38},"\u002F\u002F ensure Vue CLI is >= 3.0\n$ vue --version\n\n\u002F\u002F Then start the UI\n$ vue ui\n",[40,317,318,344,353,359,376],{"__ignoreMap":38},[43,319,320,322,325,328,331,334,337,340],{"class":45,"line":46},[43,321,241],{"class":49},[43,323,324],{"class":53}," ensure",[43,326,327],{"class":53}," Vue",[43,329,330],{"class":53}," CLI",[43,332,333],{"class":53}," is",[43,335,336],{"class":60}," >",[43,338,339],{"class":53},"=",[43,341,343],{"class":342},"sbssI"," 3.0\n",[43,345,346,348,350],{"class":45,"line":238},[43,347,50],{"class":49},[43,349,229],{"class":53},[43,351,352],{"class":53}," --version\n",[43,354,355],{"class":45,"line":259},[43,356,358],{"emptyLinePlaceholder":357},true,"\n",[43,360,362,364,367,370,373],{"class":45,"line":361},4,[43,363,241],{"class":49},[43,365,366],{"class":53}," Then",[43,368,369],{"class":53}," start",[43,371,372],{"class":53}," the",[43,374,375],{"class":53}," UI\n",[43,377,379,381,383],{"class":45,"line":378},5,[43,380,50],{"class":49},[43,382,229],{"class":53},[43,384,385],{"class":53}," ui\n",[178,387,388,394,401,407],{},[119,389,390,391],{},"Click ",[89,392,393],{},"Plugins",[119,395,396,397,400],{},"Type in ",[89,398,399],{},"vuetify"," in the search bar",[119,402,403,404],{},"You should see ",[89,405,406],{},"vue-cli-plugin-vuetify",[119,408,409],{},"Click and install it",[411,412],"hr",{},[10,414,415,416,421,422,427,428,92],{},"This blog post is a part of ",[13,417,420],{"href":418,"rel":419},"https:\u002F\u002Fvuetifyjs.com\u002Fen\u002Fintroduction\u002Fguide\u002F",[203],"Vuetify Beginner's Guide Series",". 🐣 Each blog has been collaboratively worked on by the Vuetify Core Team. Interested in contributing a topic? ➡ Reach out to ",[13,423,426],{"href":424,"rel":425},"https:\u002F\u002Fdev.to\u002Fjohannarlee",[203],"Johanna"," on Dev.to or in the ",[13,429,432],{"href":430,"rel":431},"https:\u002F\u002Fdiscord.com\u002Finvite\u002Fs93b7Fv",[203],"Vuetify Community Discord",[434,435,436],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":38,"searchDepth":238,"depth":238,"links":438},[439,440,445,446,447,448],{"id":21,"depth":238,"text":22},{"id":102,"depth":238,"text":103,"children":441},[442,443,444],{"id":113,"depth":259,"text":114},{"id":145,"depth":259,"text":146},{"id":175,"depth":259,"text":176},{"id":194,"depth":238,"text":195},{"id":213,"depth":238,"text":214},{"id":275,"depth":238,"text":276},{"id":308,"depth":238,"text":309},"2020-05-11","Introduction to a Command Line Interface","md",{},"\u002Fblog\u002Fwhat-is-a-cli",{"title":5,"description":450},"blog\u002Fwhat-is-a-cli","Vuetify Beginner's Guide Series:",[458,399,459],"vue3","typescript","H8MI4l86A9TmdLKrm3GS_TInyKv7iTw9nYWAEG7zMCQ",[462,467],{"title":463,"path":464,"stem":465,"description":466,"children":-1},"V-Card In Depth","\u002Fblog\u002Fv-card-in-depth","blog\u002Fv-card-in-depth","Diving into the innards of Vuetify",{"title":468,"path":469,"stem":470,"description":471,"children":-1},"What is Tree Shaking","\u002Fblog\u002Fwhat-is-tree-shaking","blog\u002Fwhat-is-tree-shaking","A brief overview of treeshaking in JavaScript",[473,482,487,493,496,498],{"title":474,"date":475,"tags":476,"path":481},"Demystifying the ECMAScript Spec: Array.prototype.push","2026-09-22",[477,478,479,480],"intermediate","ecmascript","javascript","tutorial","\u002Fblog\u002Fdemystifying-the-ecmascript-spec-array-push",{"title":463,"date":483,"tags":484,"path":464},"2023-03-08",[485,399,486,479],"beginners","vue",{"title":488,"date":489,"tags":490,"path":492},"Getting Started With The Beacon API","2020-06-25",[479,491,480],"web api","\u002Fblog\u002Fgetting-started-with-the-beacon-api",{"title":468,"date":494,"tags":495,"path":469},"2020-05-29",[485,399,486,479],{"title":5,"date":449,"tags":497,"path":453},[458,399,459],{"title":499,"date":500,"tags":501,"path":504},"Let's build a Github Profile Search Web App","2019-07-03",[502,479,503,480],"web project","github api","\u002Fblog\u002Flets-build-a-github-profile-search-web-app",1790605409692]