{"id":3267,"date":"2020-12-30T23:49:56","date_gmt":"2020-12-31T04:49:56","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=3267"},"modified":"2020-12-30T23:49:58","modified_gmt":"2020-12-31T04:49:58","slug":"vue-js-how-to-use-vue-cli-to-quickly-create-a-project","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2020\/12\/30\/vue-js-how-to-use-vue-cli-to-quickly-create-a-project\/","title":{"rendered":"Vue.js: How to use Vue CLI to quickly create a project"},"content":{"rendered":"\n

Vue.js comes with a built in command line tool called Vue CLI<\/code>, which makes setting up a new Vue.js project a breeze. Vue.js can be used without this, but the advantage of using Vue CLI<\/code> is that it sets up a Vue.js project using Babel and Webpack and allows the project to be launched easily in a web browser via an npm command. <\/p>\n\n\n\n

Before running the VUE CLI command, we need to make sure we have NPM installed on our machine first. This can be done with the command <\/p>\n\n\n\n

npm -v<\/code><\/p>\n\n\n\n

For example:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Now that we confirmed we have npm already installed, we next need to install VUE CLI from a command prompt. At the command prompt, use the command <\/p>\n\n\n\n

npm install -g @vue\/cli<\/code>. <\/p>\n\n\n\n

If there are errors related to JSON, check the folder location for existing package.json or package-lock.json files. These should be removed OR try running the command in a different folder. Note: you can ignore all of the deprecated messages and there is no need to independently install the deprecated modules. <\/p>\n\n\n\n

Here is what the output in the command prompt may look like.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Once this step is complete, you can check the version of Vue.js with this command: vue --version<\/code><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Now that we know Vue CLI is installed, we can easily create a new Vue.js project at the command line. For example, let’s say we wanted to create a new project called “video-browser”. cd to the folder you want to create this project in and run the command vue create -n video-browser<\/code><\/p>\n\n\n\n

The -n<\/code> here means start the project without git. Here is what the output looks like:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

You should see the text that says “Successfully created project video-browser.<\/p>\n\n\n\n

Next cd into that new folder. Then run the command npm run serve<\/code> and this will launch a web service where you can see some default output for your new web project. For example:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

As can be seen in the message, we can now view the default web page for our new Vue.js app in the browser at this location: http:\/\/localhost:8080<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Now that the video-browser folder has been created, you can open it as a project in Atom or your favorite IDE. Notice all of the files and folder structure created for free. For example:<\/p>\n\n\n\n

\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"

Vue.js comes with a built in command line tool called Vue CLI, which makes setting up a new Vue.js project a breeze. Vue.js can be used without this, but the advantage of using Vue CLI is that it sets up a Vue.js project using Babel and Webpack and allows the project to be launched easily … Continue reading Vue.js: How to use Vue CLI to quickly create a project<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[221],"tags":[91,222,61],"class_list":["post-3267","post","type-post","status-publish","format-standard","hentry","category-vue-js","tag-npm","tag-vue-cli","tag-vue-js"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/3267","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=3267"}],"version-history":[{"count":16,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/3267\/revisions"}],"predecessor-version":[{"id":3293,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/3267\/revisions\/3293"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=3267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=3267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=3267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}