Home > Article > Web Front-end > 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.
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
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.
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.
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.
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.
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!