How to build a project in Vue 3.0

The official version of Vue3.0 was released in September 2020, bringing many improvements, allowing developers to write Vue applications more flexibly and efficiently. In this article, we will learn how to build projects in Vue 3.0.

1. Install Vue CLI

First, we need to install Vue CLI locally. Vue CLI is a scaffolding tool officially provided by Vue, which is used to quickly generate templates for Vue applications.

Run the following command in the command line to install Vue CLI:

npm install -g @vue/cli

2. Create Vue project

After installing Vue CLI, we can use it Provides commands to quickly create a Vue project.

Run the following command on the command line to create a new Vue 3.0 project:

vue create my-project

Where, my-project is the project name.

After running the above command, Vue CLI will prompt you to select the features to install. You can use the up and down arrow keys to select properties and the space bar to select/deselect properties. We can choose the default configuration.

3. Run the Vue project

After creating the Vue project, we can use the following command to start the application:

npm run serve

This command will compile the project and start local server. After the server starts, you can access the application by visiting http://localhost:8080 in your browser.

4. Writing Vue components

In Vue 3.0, the way components are written is different from Vue 2.x. Components in Vue 3.0 are composed of a single setup() function instead of the single-file components in Vue 2.x.

The following is a simple Vue 3.0 component example:

<template>
  <div>{{ message }}</div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello, Vue 3!')
    return {
      message
    }
  }
}
</script>

As you can see, we use the setup() function to create the logical part of the component, and introduce the responsive ref( of Vue 3.0 )function.

5. Interacting with the API

In Vue 3.0, we can use the two new APIs provided by Vue - Composition API and APIs to interact with the API. The Composition API provides a more convenient way to write and organize the code of components, while the APIs provide the ability to interact directly with Vue instances.

The following is an example of using the Composition API to interact with the API:

<template>
  <div>{{ message }}</div>
</template>

<script>
import { ref, onMounted } from 'vue'
import Axios from 'axios'

export default {
  setup() {
    const message = ref('')
    onMounted(() => {
      Axios.get('https://jsonplaceholder.typicode.com/posts/1').then(response => {
        message.value = response.data.title
      })
    })
    return {
      message
    }
  }
}
</script>

In the above example, we used the ref() and onMounted() functions to create a reactive message variable, and use Axios to obtain API data when the component is mounted, and assign the returned title to the message variable.

6. Conclusion

Vue 3.0 brings many improvements and new features, making Vue application development more efficient and flexible. In this article, we learned how to use Vue CLI to quickly create a Vue 3.0 project, and created a simple Vue component to demonstrate the component writing method and API interaction method in Vue 3.0.

The above is the detailed content of How to build a project in Vue 3.0. For more information, please follow other related articles on the PHP Chinese website!