https://github.com/kanryu/vue-cli3-tutorial
A tutorial for Vue 3 using vue-cli v4.5
https://github.com/kanryu/vue-cli3-tutorial
tutorial vue-cli vue3 webpack
Last synced: 10 months ago
JSON representation
A tutorial for Vue 3 using vue-cli v4.5
- Host: GitHub
- URL: https://github.com/kanryu/vue-cli3-tutorial
- Owner: kanryu
- License: mit
- Created: 2021-04-08T16:05:37.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-04-21T02:55:30.000Z (almost 5 years ago)
- Last Synced: 2025-02-10T03:26:51.518Z (12 months ago)
- Topics: tutorial, vue-cli, vue3, webpack
- Language: Vue
- Homepage:
- Size: 246 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## A tutorial for Vue 3 using vue-cli v4.5
Learn the official Vue3 tutorials using vue-cli v4.5.
Note: 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.
*The original article of this tutorial is this URL*
https://v3.vuejs.org/guide/introduction.html
## 1. Until the first Vue3 app is displayed in the browser
### Install vue-cli
The official documentation does not recommend using vue-cli for beginners with such a statement.
> We **do not** recommend that beginners start with vue-cli, especially if you are not yet familiar with Node.js-based build tools.
However, it is difficult to understand the work contents in actual development without utilizing such command line tools.
```bash
$ npm install -g @vue/cli
+ @vue/cli@4.5.12
$ vue --version
@vue/cli 4.5.12
$
```
### Create a new project
A set of project files for a single-page web app using Vue3 is created concisely on the command line.
```
$ mkdir vue3-tutorial
$ cd vue3-tutorial
$ vue create hello-world
Vue CLI v4.5.12
? Please pick a preset: (Use arrow keys)
Default ([Vue 2] babel, eslint)
> Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features
```
to select [Vue 3]
The generated project directory is **hello-world**.
In 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.
Note: However, the node_modules directory is omitted, so when checking this directory by itself, execute this:
```bash
$ npm install
```
The new project you just created can start the web server immediately on the command line.
```bash
$ cd hello-world
$ npm run serve
DONE Compiled successfully in 5879ms 17:10:56
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.10.110:8080/
Note that the development build is not optimized.
To create a production build, run yarn build.
```
Access the URL displayed in the terminal with a browser.
You can see the page. [hello-world](result-hello-world.png)
## 2. Declarative Rendering
At the core of Vue.js is a system that enables us to declaratively render data to the DOM using straightforward template syntax:
### Initialize the counter
Modify the 'hello-world' project to see how your web application behaves in front of you.
Edit *src/components/HelloWorld.vue*
```webpack
Counter: {{ msg }}
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
.demo {
font-family: sans-serif;
border: 1px solid #eee;
border-radius: 2px;
padding: 20px 30px;
margin-top: 1em;
margin-bottom: 40px;
user-select: none;
overflow-x: auto;
}
```
You can see the page. [counter-text](result-counter-text.png)
This 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.
The string **Welcome to Your Vue.js App** is initialized from the following in *src/App.vue* .
>
Let's change the counter displayed on the screen to a number and change it every second.
### Turn the counter
Edit *src/components/HelloWorld.vue*
```webpack
...
export default {
name: 'HelloWorld',
data() {
return {
msg: 0
}
},
mounted() {
setInterval(() => {
this.msg++
}, 1000)
}
}
...
```
You can see the page. [hello-world2](result-hello-world2.png)
The result project directory is 'hello-world2'.
## 3. Update tag attributes
With Vue3, you can directly change the attribute of the tag specified in the JavaScript calculation result.
```webpack
Hover your mouse over me for a few seconds to see my dynamically bound
title!
export default {
name: 'HelloWorld',
data() {
return {
msg: 'You loaded this page on ' + new Date().toLocaleString()
}
}
}
...
```
You can see the page. [hello-world2](result-hello-world3.png)
Note: In the Google Chrome browser, pop-up text is displayed when hovering the mouse. Other web browsers may give different results.
The result project directory is 'hello-world3'.
Here 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."
## 4. Handling User Input
To let users interact with your app, we can use the v-on directive to attach event listeners that invoke methods on our instances:
```webpack
{{ msg }}
Reverse Message
export default {
name: 'HelloWorld',
data() {
return {
msg: 'Hello Vue.js!'
}
},
methods: {
reverseMessage() {
this.msg = this.msg
.split('')
.reverse()
.join('')
}
}
}
...
```
You can see the page. [hello-world2](result-hello-world4.png)
The result project directory is 'hello-world4'.
## 5. Add a new component
Why does this tutorial do the same thing on the official Vue.js page in a different way in the first place?
It is because it benefits from webpack.
When 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.
Edit a new file, **src/components/InputMessage.vue**
```webpack
{{ message }}
export default {
name: 'TwoWayBinding',
data() {
return {
message: 'Hello Vue!'
}
}
}
```
Edit **src/App.vue**
```webpack
import HelloWorld from './components/HelloWorld.vue'
import TwoWayBinding from './components/TwoWayBinding.vue'
export default {
name: 'App',
components: {
HelloWorld,
TwoWayBinding
}
}
...
```
You can see the page. [hello-world5](result-hello-world5.png)
The result project directory is 'hello-world5'.