{"action":"created","comment":{"url":"https://api.github.com/repos/Elao/blog/pulls/comments/86750853","pull_request_review_id":7390417,"id":86750853,"diff_hunk":"@@ -0,0 +1,112 @@\n+---\n+type:               \"post\"\n+title:              \"Réalisez une application Vue.js avec vue-cli\"\n+date:               \"2016-11-04\"\n+publishdate:        \"2016-11-04\"\n+draft:              false\n+slug:               \"realisez-une-application-vue-js-avec-vue-cli\"\n+description:        \"Introduction à la réalisation d'applications frontend avec Vue.js et vue-cli.\"\n+\n+language:           \"fr\"\n+thumbnail:          \"/images/posts/thumbnails/vuejs.jpg\"\n+header_img:         \"/images/posts/headers/vuejs.jpg\"\n+tags:               [\"Vue.js\",\"Javascript\",\"Front\",\"Frontend\",\"Framework\"]\n+categories:         [\"Dev\", \"Vue.js\", \"Javascript\", \"Symfony\"]\n+\n+author_username:    \"mcolin\"\n+---\n+\n+Dans mes précédents articles je vous présentais [pourquoi utiliser Vue.js dans vos projets](/fr/dev/pourquoi-devriez-vous-utiliser-vue-js-dans-vos-projets/) et [comment intégrer Vue.js à une application Symfony](/fr/dev/comment-integrer-vue-js-application-symfony/). Je vais maintenant vous présenter une autre facette du framework d'Evan You, la création d'application frontend grâce à l'outils [vue-cli](https://github.com/vuejs/vue-cli).\n+\n+## vue-cli\n+\n+Comme je l'avais annoncer, le framework est très **polyvalent**. Facile à utiliser et à intégrer à une technologie backend, il permet également de réaliser des applications frontend. Et pour nous faciliter la chose, le framework met à notre disposition ```vue-cli```, un outils en ligne de commande qui encapsule et automatise tout ce dont vous aurez besoin pour créer votre application **Vue.js**.\n+\n+L'installation se fait simplement grâce à ```npm``` :\n+\n+```\n+$ npm install -g vue-cli\n+```\n+\n+L'outils permet en premier lieu d'initier votre projet, grâce à la commande suivante : \n+\n+```\n+$ vue init <template-name> <project-name>\n+```\n+\n+Plusieurs template sont disponibles, proposant différentes fonctionnalités et bundler (webpack ou browserify). J'ai testé le template ```webpack``` qui propose la compilation avec **Webpack**, **Babel**, le **hot reload**, le **code linting**, les **tests unitaires** et les **tests fonctionnels**. Vous pouvez utiliser les templates fournis ou un template externe.\n+\n+La commande vous invitera ensuite à rentrer les informations nécessaires à la configuration de votre projet puis généra une arborescence avec une base de projet type \"Hello world\".\n+\n+<img src=\"/fr/images/posts/2016/vuecli-console.jpg\" alt=\"Console\" />\n+\n+Vous exécutez ensuite les commandes ```npm install``` et ```npm run dev```, votre application sera accessible sur l'url ```http://localhost:8080/```\n+\n+<img src=\"/fr/images/posts/2016/vuecli-app.jpg\" alt=\"Application\" />\n+\n+## Architecture\n+\n+<img src=\"/fr/images/posts/2016/vuecli-tree.jpg\" alt=\"Tree\" style=\"float:right;max-width:30%;margin-left: 20px;margin-bottom: 20px;\" />\n+\n+L'application est composé d'un fichier ```main.js``` servant de point d'entrée, d'un fichier ```index.html``` affichant votre application et de composants sous la forme de fichiers ```.vue```. De base vous aurez 2 composants, ```App.vue``` qui sera votre *root componant* et ```Hello.vue``` qui est votre *Hello world*.","path":"content/fr/dev/realisez-une-application-vue-js-avec-vue-cli.md","position":51,"original_position":51,"commit_id":"80bf0c96acdbda1a58d313feaf45714b6e68768c","original_commit_id":"80bf0c96acdbda1a58d313feaf45714b6e68768c","user":{"login":"xavier-rdo","id":1587796,"avatar_url":"https://avatars.githubusercontent.com/u/1587796?v=3","gravatar_id":"","url":"https://api.github.com/users/xavier-rdo","html_url":"https://github.com/xavier-rdo","followers_url":"https://api.github.com/users/xavier-rdo/followers","following_url":"https://api.github.com/users/xavier-rdo/following{/other_user}","gists_url":"https://api.github.com/users/xavier-rdo/gists{/gist_id}","starred_url":"https://api.github.com/users/xavier-rdo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/xavier-rdo/subscriptions","organizations_url":"https://api.github.com/users/xavier-rdo/orgs","repos_url":"https://api.github.com/users/xavier-rdo/repos","events_url":"https://api.github.com/users/xavier-rdo/events{/privacy}","received_events_url":"https://api.github.com/users/xavier-rdo/received_events","type":"User","site_admin":false},"body":"*component* au lieu de *componant* ?","created_at":"2016-11-07T10:48:04Z","updated_at":"2016-11-07T10:48:04Z","html_url":"https://github.com/Elao/blog/pull/76#discussion_r86750853","pull_request_url":"https://api.github.com/repos/Elao/blog/pulls/76","_links":{"self":{"href":"https://api.github.com/repos/Elao/blog/pulls/comments/86750853"},"html":{"href":"https://github.com/Elao/blog/pull/76#discussion_r86750853"},"pull_request":{"href":"https://api.github.com/repos/Elao/blog/pulls/76"}}},"pull_request":{"url":"https://api.github.com/repos/Elao/blog/pulls/76","id":92556809,"html_url":"https://github.com/Elao/blog/pull/76","diff_url":"https://github.com/Elao/blog/pull/76.diff","patch_url":"https://github.com/Elao/blog/pull/76.patch","issue_url":"https://api.github.com/repos/Elao/blog/issues/76","number":76,"state":"open","locked":false,"title":"Introduce blog post about vue-cli","user":{"login":"maximecolin","id":606766,"avatar_url":"https://avatars.githubusercontent.com/u/606766?v=3","gravatar_id":"","url":"https://api.github.com/users/maximecolin","html_url":"https://github.com/maximecolin","followers_url":"https://api.github.com/users/maximecolin/followers","following_url":"https://api.github.com/users/maximecolin/following{/other_user}","gists_url":"https://api.github.com/users/maximecolin/gists{/gist_id}","starred_url":"https://api.github.com/users/maximecolin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/maximecolin/subscriptions","organizations_url":"https://api.github.com/users/maximecolin/orgs","repos_url":"https://api.github.com/users/maximecolin/repos","events_url":"https://api.github.com/users/maximecolin/events{/privacy}","received_events_url":"https://api.github.com/users/maximecolin/received_events","type":"User","site_admin":false},"body":"","created_at":"2016-11-07T10:24:50Z","updated_at":"2016-11-07T10:59:04Z","closed_at":null,"merged_at":null,"merge_commit_sha":"94d8389d15267f8f47da2a75e93beae8baec8e95","assignee":null,"assignees":[],"milestone":null,"commits_url":"https://api.github.com/repos/Elao/blog/pulls/76/commits","review_comments_url":"https://api.github.com/repos/Elao/blog/pulls/76/comments","review_comment_url":"https://api.github.com/repos/Elao/blog/pulls/comments{/number}","comments_url":"https://api.github.com/repos/Elao/blog/issues/76/comments","statuses_url":"https://api.github.com/repos/Elao/blog/statuses/80bf0c96acdbda1a58d313feaf45714b6e68768c","head":{"label":"Elao:blog/vue-cli-app","ref":"blog/vue-cli-app","sha":"80bf0c96acdbda1a58d313feaf45714b6e68768c","user":{"login":"Elao","id":623877,"avatar_url":"https://avatars.githubusercontent.com/u/623877?v=3","gravatar_id":"","url":"https://api.github.com/users/Elao","html_url":"https://github.com/Elao","followers_url":"https://api.github.com/users/Elao/followers","following_url":"https://api.github.com/users/Elao/following{/other_user}","gists_url":"https://api.github.com/users/Elao/gists{/gist_id}","starred_url":"https://api.github.com/users/Elao/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Elao/subscriptions","organizations_url":"https://api.github.com/users/Elao/orgs","repos_url":"https://api.github.com/users/Elao/repos","events_url":"https://api.github.com/users/Elao/events{/privacy}","received_events_url":"https://api.github.com/users/Elao/received_events","type":"Organization","site_admin":false},"repo":{"id":38479019,"name":"blog","full_name":"Elao/blog","owner":{"login":"Elao","id":623877,"avatar_url":"https://avatars.githubusercontent.com/u/623877?v=3","gravatar_id":"","url":"https://api.github.com/users/Elao","html_url":"https://github.com/Elao","followers_url":"https://api.github.com/users/Elao/followers","following_url":"https://api.github.com/users/Elao/following{/other_user}","gists_url":"https://api.github.com/users/Elao/gists{/gist_id}","starred_url":"https://api.github.com/users/Elao/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Elao/subscriptions","organizations_url":"https://api.github.com/users/Elao/orgs","repos_url":"https://api.github.com/users/Elao/repos","events_url":"https://api.github.com/users/Elao/events{/privacy}","received_events_url":"https://api.github.com/users/Elao/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/Elao/blog","description":"ELAO Team blog - https://blog.elao.com","fork":false,"url":"https://api.github.com/repos/Elao/blog","forks_url":"https://api.github.com/repos/Elao/blog/forks","keys_url":"https://api.github.com/repos/Elao/blog/keys{/key_id}","collaborators_url":"https://api.github.com/repos/Elao/blog/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/Elao/blog/teams","hooks_url":"https://api.github.com/repos/Elao/blog/hooks","issue_events_url":"https://api.github.com/repos/Elao/blog/issues/events{/number}","events_url":"https://api.github.com/repos/Elao/blog/events","assignees_url":"https://api.github.com/repos/Elao/blog/assignees{/user}","branches_url":"https://api.github.com/repos/Elao/blog/branches{/branch}","tags_url":"https://api.github.com/repos/Elao/blog/tags","blobs_url":"https://api.github.com/repos/Elao/blog/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/Elao/blog/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/Elao/blog/git/refs{/sha}","trees_url":"https://api.github.com/repos/Elao/blog/git/trees{/sha}","statuses_url":"https://api.github.com/repos/Elao/blog/statuses/{sha}","languages_url":"https://api.github.com/repos/Elao/blog/languages","stargazers_url":"https://api.github.com/repos/Elao/blog/stargazers","contributors_url":"https://api.github.com/repos/Elao/blog/contributors","subscribers_url":"https://api.github.com/repos/Elao/blog/subscribers","subscription_url":"https://api.github.com/repos/Elao/blog/subscription","commits_url":"https://api.github.com/repos/Elao/blog/commits{/sha}","git_commits_url":"https://api.github.com/repos/Elao/blog/git/commits{/sha}","comments_url":"https://api.github.com/repos/Elao/blog/comments{/number}","issue_comment_url":"https://api.github.com/repos/Elao/blog/issues/comments{/number}","contents_url":"https://api.github.com/repos/Elao/blog/contents/{+path}","compare_url":"https://api.github.com/repos/Elao/blog/compare/{base}...{head}","merges_url":"https://api.github.com/repos/Elao/blog/merges","archive_url":"https://api.github.com/repos/Elao/blog/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/Elao/blog/downloads","issues_url":"https://api.github.com/repos/Elao/blog/issues{/number}","pulls_url":"https://api.github.com/repos/Elao/blog/pulls{/number}","milestones_url":"https://api.github.com/repos/Elao/blog/milestones{/number}","notifications_url":"https://api.github.com/repos/Elao/blog/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/Elao/blog/labels{/name}","releases_url":"https://api.github.com/repos/Elao/blog/releases{/id}","deployments_url":"https://api.github.com/repos/Elao/blog/deployments","created_at":"2015-07-03T07:28:50Z","updated_at":"2016-10-24T13:35:46Z","pushed_at":"2016-11-07T10:58:49Z","git_url":"git://github.com/Elao/blog.git","ssh_url":"git@github.com:Elao/blog.git","clone_url":"https://github.com/Elao/blog.git","svn_url":"https://github.com/Elao/blog","homepage":"","size":41711,"stargazers_count":3,"watchers_count":3,"language":"CSS","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":1,"mirror_url":null,"open_issues_count":4,"forks":1,"open_issues":4,"watchers":3,"default_branch":"master"}},"base":{"label":"Elao:master","ref":"master","sha":"5f526ed81585c2224a5d1b8aa5c306053397f91a","user":{"login":"Elao","id":623877,"avatar_url":"https://avatars.githubusercontent.com/u/623877?v=3","gravatar_id":"","url":"https://api.github.com/users/Elao","html_url":"https://github.com/Elao","followers_url":"https://api.github.com/users/Elao/followers","following_url":"https://api.github.com/users/Elao/following{/other_user}","gists_url":"https://api.github.com/users/Elao/gists{/gist_id}","starred_url":"https://api.github.com/users/Elao/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Elao/subscriptions","organizations_url":"https://api.github.com/users/Elao/orgs","repos_url":"https://api.github.com/users/Elao/repos","events_url":"https://api.github.com/users/Elao/events{/privacy}","received_events_url":"https://api.github.com/users/Elao/received_events","type":"Organization","site_admin":false},"repo":{"id":38479019,"name":"blog","full_name":"Elao/blog","owner":{"login":"Elao","id":623877,"avatar_url":"https://avatars.githubusercontent.com/u/623877?v=3","gravatar_id":"","url":"https://api.github.com/users/Elao","html_url":"https://github.com/Elao","followers_url":"https://api.github.com/users/Elao/followers","following_url":"https://api.github.com/users/Elao/following{/other_user}","gists_url":"https://api.github.com/users/Elao/gists{/gist_id}","starred_url":"https://api.github.com/users/Elao/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Elao/subscriptions","organizations_url":"https://api.github.com/users/Elao/orgs","repos_url":"https://api.github.com/users/Elao/repos","events_url":"https://api.github.com/users/Elao/events{/privacy}","received_events_url":"https://api.github.com/users/Elao/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/Elao/blog","description":"ELAO Team blog - https://blog.elao.com","fork":false,"url":"https://api.github.com/repos/Elao/blog","forks_url":"https://api.github.com/repos/Elao/blog/forks","keys_url":"https://api.github.com/repos/Elao/blog/keys{/key_id}","collaborators_url":"https://api.github.com/repos/Elao/blog/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/Elao/blog/teams","hooks_url":"https://api.github.com/repos/Elao/blog/hooks","issue_events_url":"https://api.github.com/repos/Elao/blog/issues/events{/number}","events_url":"https://api.github.com/repos/Elao/blog/events","assignees_url":"https://api.github.com/repos/Elao/blog/assignees{/user}","branches_url":"https://api.github.com/repos/Elao/blog/branches{/branch}","tags_url":"https://api.github.com/repos/Elao/blog/tags","blobs_url":"https://api.github.com/repos/Elao/blog/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/Elao/blog/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/Elao/blog/git/refs{/sha}","trees_url":"https://api.github.com/repos/Elao/blog/git/trees{/sha}","statuses_url":"https://api.github.com/repos/Elao/blog/statuses/{sha}","languages_url":"https://api.github.com/repos/Elao/blog/languages","stargazers_url":"https://api.github.com/repos/Elao/blog/stargazers","contributors_url":"https://api.github.com/repos/Elao/blog/contributors","subscribers_url":"https://api.github.com/repos/Elao/blog/subscribers","subscription_url":"https://api.github.com/repos/Elao/blog/subscription","commits_url":"https://api.github.com/repos/Elao/blog/commits{/sha}","git_commits_url":"https://api.github.com/repos/Elao/blog/git/commits{/sha}","comments_url":"https://api.github.com/repos/Elao/blog/comments{/number}","issue_comment_url":"https://api.github.com/repos/Elao/blog/issues/comments{/number}","contents_url":"https://api.github.com/repos/Elao/blog/contents/{+path}","compare_url":"https://api.github.com/repos/Elao/blog/compare/{base}...{head}","merges_url":"https://api.github.com/repos/Elao/blog/merges","archive_url":"https://api.github.com/repos/Elao/blog/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/Elao/blog/downloads","issues_url":"https://api.github.com/repos/Elao/blog/issues{/number}","pulls_url":"https://api.github.com/repos/Elao/blog/pulls{/number}","milestones_url":"https://api.github.com/repos/Elao/blog/milestones{/number}","notifications_url":"https://api.github.com/repos/Elao/blog/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/Elao/blog/labels{/name}","releases_url":"https://api.github.com/repos/Elao/blog/releases{/id}","deployments_url":"https://api.github.com/repos/Elao/blog/deployments","created_at":"2015-07-03T07:28:50Z","updated_at":"2016-10-24T13:35:46Z","pushed_at":"2016-11-07T10:58:49Z","git_url":"git://github.com/Elao/blog.git","ssh_url":"git@github.com:Elao/blog.git","clone_url":"https://github.com/Elao/blog.git","svn_url":"https://github.com/Elao/blog","homepage":"","size":41711,"stargazers_count":3,"watchers_count":3,"language":"CSS","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":1,"mirror_url":null,"open_issues_count":4,"forks":1,"open_issues":4,"watchers":3,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/Elao/blog/pulls/76"},"html":{"href":"https://github.com/Elao/blog/pull/76"},"issue":{"href":"https://api.github.com/repos/Elao/blog/issues/76"},"comments":{"href":"https://api.github.com/repos/Elao/blog/issues/76/comments"},"review_comments":{"href":"https://api.github.com/repos/Elao/blog/pulls/76/comments"},"review_comment":{"href":"https://api.github.com/repos/Elao/blog/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/Elao/blog/pulls/76/commits"},"statuses":{"href":"https://api.github.com/repos/Elao/blog/statuses/80bf0c96acdbda1a58d313feaf45714b6e68768c"}}}}
{"actor":{"display_login":"xavier-rdo"}}