{"id":18023004,"url":"https://github.com/kanryu/vue-cli3-tutorial","last_synced_at":"2025-04-04T18:17:32.411Z","repository":{"id":140593794,"uuid":"355971842","full_name":"kanryu/vue-cli3-tutorial","owner":"kanryu","description":"A tutorial for Vue 3 using vue-cli v4.5","archived":false,"fork":false,"pushed_at":"2021-04-21T02:55:30.000Z","size":252,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-02-10T03:26:51.518Z","etag":null,"topics":["tutorial","vue-cli","vue3","webpack"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kanryu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-04-08T16:05:37.000Z","updated_at":"2022-11-04T22:13:26.000Z","dependencies_parsed_at":"2023-05-03T19:46:40.409Z","dependency_job_id":null,"html_url":"https://github.com/kanryu/vue-cli3-tutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kanryu%2Fvue-cli3-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kanryu%2Fvue-cli3-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kanryu%2Fvue-cli3-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kanryu%2Fvue-cli3-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kanryu","download_url":"https://codeload.github.com/kanryu/vue-cli3-tutorial/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247226191,"owners_count":20904467,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["tutorial","vue-cli","vue3","webpack"],"created_at":"2024-10-30T07:06:38.606Z","updated_at":"2025-04-04T18:17:32.391Z","avatar_url":"https://github.com/kanryu.png","language":"Vue","readme":"\n## A tutorial for Vue 3 using vue-cli v4.5\n\nLearn the official Vue3 tutorials using vue-cli v4.5.\n\nNote: In this tutorial, the display looks like a Unix terminal, and you can actually see it on these operating systems, but you can also actually do the same with Windows Terminal and PowerShell Window on Windows 10.\n\n*The original article of this tutorial is this URL*\n\nhttps://v3.vuejs.org/guide/introduction.html\n\n## 1. Until the first Vue3 app is displayed in the browser\n\n\n### Install vue-cli\n\nThe official documentation does not recommend using vue-cli for beginners with such a statement.\n\n\u003e We **do not** recommend that beginners start with vue-cli, especially if you are not yet familiar with Node.js-based build tools.\n\nHowever, it is difficult to understand the work contents in actual development without utilizing such command line tools.\n\n```bash\n$ npm install -g @vue/cli\n+ @vue/cli@4.5.12\n$ vue --version\n@vue/cli 4.5.12\n$\n```\n\n### Create a new project\n\nA set of project files for a single-page web app using Vue3 is created concisely on the command line.\n\n```\n$ mkdir vue3-tutorial\n$ cd vue3-tutorial\n$ vue create hello-world\nVue CLI v4.5.12\n? Please pick a preset: (Use arrow keys)\n  Default ([Vue 2] babel, eslint)\n\u003e Default (Vue 3 Preview) ([Vue 3] babel, eslint)\n  Manually select features\n```\n\nto select [Vue 3]\n\nThe generated project directory is **hello-world**.\n\nIn this tutorial, the completed project is included in this repository, along with the modifications to see how it works. You can check the operation immediately by simply restoring the project directory in the repository instead of modifying the source code.\n\nNote: However, the node_modules directory is omitted, so when checking this directory by itself, execute this:\n\n```bash\n$ npm install\n```\n\nThe new project you just created can start the web server immediately on the command line.\n\n```bash\n$ cd hello-world\n$ npm run serve\n DONE  Compiled successfully in 5879ms    17:10:56\n\n\n  App running at:\n  - Local:   http://localhost:8080/\n  - Network: http://192.168.10.110:8080/\n\n  Note that the development build is not optimized.\n  To create a production build, run yarn build.\n```\n\nAccess the URL displayed in the terminal with a browser.\n\nYou can see the page. [hello-world](result-hello-world.png)\n\n\n## 2. Declarative Rendering\n\nAt the core of Vue.js is a system that enables us to declaratively render data to the DOM using straightforward template syntax:\n\n### Initialize the counter\n\nModify the 'hello-world' project to see how your web application behaves in front of you.\n\nEdit *src/components/HelloWorld.vue*\n\n```webpack\n\u003ctemplate\u003e\n  \u003cdiv id=\"counter\" class=\"demo\"\u003e\n    Counter: {{ msg }}\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  name: 'HelloWorld',\n  props: {\n    msg: String\n  }\n}\n\u003c/script\u003e\n\n\u003c!-- Add \"scoped\" attribute to limit CSS to this component only --\u003e\n\u003cstyle scoped\u003e\n.demo {\n  font-family: sans-serif;\n  border: 1px solid #eee;\n  border-radius: 2px;\n  padding: 20px 30px;\n  margin-top: 1em;\n  margin-bottom: 40px;\n  user-select: none;\n  overflow-x: auto;\n}\n\u003c/style\u003e\n```\n\nYou can see the page. [counter-text](result-counter-text.png)\n\nThis looks pretty similar to rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now reactive.\n\n\nThe string **Welcome to Your Vue.js App** is initialized from the following in *src/App.vue* .\n\n\u003e \u003cHello World msg = \"Welcome to Your Vue.js App\"/\u003e\n\nLet's change the counter displayed on the screen to a number and change it every second.\n\n### Turn the counter\n\nEdit *src/components/HelloWorld.vue*\n\n```webpack\n...\n\u003cscript\u003e\nexport default {\n  name: 'HelloWorld',\n  data() {\n    return {\n      msg: 0\n    }\n  },\n  mounted() {\n    setInterval(() =\u003e {\n      this.msg++\n    }, 1000)\n  }\n}\n\u003c/script\u003e\n...\n```\n\nYou can see the page. [hello-world2](result-hello-world2.png)\n\nThe result project directory is 'hello-world2'.\n\n## 3. Update tag attributes\n\nWith Vue3, you can directly change the attribute of the tag specified in the JavaScript calculation result.\n\n```webpack\n\u003ctemplate\u003e\n  \u003cdiv id=\"bind-attribute\" class=\"demo\"\u003e\n    \u003cspan v-bind:title=\"msg\"\u003e\n      Hover your mouse over me for a few seconds to see my dynamically bound\n      title!\n    \u003c/span\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  name: 'HelloWorld',\n  data() {\n    return {\n      msg: 'You loaded this page on ' + new Date().toLocaleString()\n    }\n  }\n}\n\u003c/script\u003e\n...\n```\n\nYou can see the page. [hello-world2](result-hello-world3.png)\n\nNote: In the Google Chrome browser, pop-up text is displayed when hovering the mouse. Other web browsers may give different results.\n\nThe result project directory is 'hello-world3'.\n\nHere we're encountering something new. The v-bind attribute you're seeing is called a directive. Directives are prefixed with v- to indicate that they are special attributes provided by Vue, and as you may have guessed, they apply special reactive behavior to the rendered DOM. Here we are basically saying \"keep this element's title attribute up-to-date with the message property on the current active instance.\"\n\n## 4. Handling User Input\n\nTo let users interact with your app, we can use the v-on directive to attach event listeners that invoke methods on our instances:\n\n```webpack\n\u003ctemplate\u003e\n  \u003cdiv id=\"event-handling\"\u003e\n    \u003cp\u003e{{ msg }}\u003c/p\u003e\n    \u003cbutton v-on:click=\"reverseMessage\"\u003eReverse Message\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  name: 'HelloWorld',\n  data() {\n    return {\n      msg: 'Hello Vue.js!'\n    }\n  },\n  methods: {\n    reverseMessage() {\n      this.msg = this.msg\n        .split('')\n        .reverse()\n        .join('')\n    }\n  }\n}\n\u003c/script\u003e\n...\n```\n\nYou can see the page. [hello-world2](result-hello-world4.png)\n\nThe result project directory is 'hello-world4'.\n\n## 5. Add a new component\n\nWhy does this tutorial do the same thing on the official Vue.js page in a different way in the first place?\n\nIt is because it benefits from webpack.\n\nWhen you create a Vue3 project with vue-cli, the source code is divided into **App.vue** and **HelloWorld.vue** from the beginning. Of course, this can be rewritten as well as added.\n\nEdit a new file, **src/components/InputMessage.vue**\n\n```webpack\n\u003ctemplate\u003e\n  \u003cdiv id=\"two-way-binding\"\u003e\n    \u003cp\u003e{{ message }}\u003c/p\u003e\n    \u003cinput v-model=\"message\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  name: 'TwoWayBinding',\n  data() {\n    return {\n      message: 'Hello Vue!'\n    }\n  }\n}\n\u003c/script\u003e\n```\n\nEdit **src/App.vue**\n\n```webpack\n\u003ctemplate\u003e\n  \u003cimg alt=\"Vue logo\" src=\"./assets/logo.png\"\u003e\n  \u003cHelloWorld msg=\"Welcome to Your Vue.js App\"/\u003e\n  \u003cTwoWayBinding message=\"Hello Vue!\"/\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport HelloWorld from './components/HelloWorld.vue'\nimport TwoWayBinding from './components/TwoWayBinding.vue'\n\nexport default {\n  name: 'App',\n  components: {\n    HelloWorld,\n    TwoWayBinding\n  }\n}\n\u003c/script\u003e\n...\n```\n\nYou can see the page. [hello-world5](result-hello-world5.png)\n\nThe result project directory is 'hello-world5'.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkanryu%2Fvue-cli3-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkanryu%2Fvue-cli3-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkanryu%2Fvue-cli3-tutorial/lists"}