How to create vue file in code

Vue.js is a popular JavaScript framework that enables quickly building interactive web interfaces. Unlike other JavaScript frameworks, Vue.js uses components to build applications. Vue components exist in the form of .vue files, which contain Vue templates, scripts and styles. Let's take a look at how to create a Vue file.

To create a Vue component, you first need to install the Vue CLI tool. This tool can automatically create Vue projects for us and provides many convenient tools and functions. First, enter the following command on the command line to install Vue CLI:

npm install -g @vue/cli

After the installation is complete, we can check whether Vue CLI is successfully installed by using the following command:

vue --version

If it is successfully installed , the version information of Vue CLI will be displayed. Next, we can create a new project using the Vue CLI. Enter the following command on the command line:

vue create my-project

The "my-project" here is the name of the project, you can change it as needed. When executing this command, Vue CLI will prompt you to select a preset, such as Default, Manually, PWA, Simple, etc. Selecting the Default preset will automatically generate a Vue project containing default settings. Selecting the Manually preset will require you to manually select various settings.

Once the Vue project is successfully created, you can use the Vue CLI to run the project. Enter the following command on the command line:

cd my-project
npm run serve

This command will start a local server. Visit http://localhost:8080/ in the browser to see the running effect of the Vue project.

Now that we have created the Vue project, let us create a .vue file. Create a new file in the src/components directory and name it MyComponent.vue. Enter the following code in the file:

<template>
   <div>
      <h1>Hello, World!</h1>
   </div>
</template>

<script>
export default {
   name: 'MyComponent'
}
</script>

<style>
h1 {
   color: red;
}
</style>

This .vue file contains three parts:

d477f9ce7bf77f53fbcf36bec1b69b7a: Template part, containing HTML code for rendering the structure of the component.

3f1c4e4b6b16bbbd69b2ee476dc4f83a: The script part contains JavaScript code used to render the logic of the component.

c9ccee2e6ea535a969eb3f532ad9fe89: The style part contains CSS code for rendering the style of the component.

In the .vue file, use export default {} to export the Vue component. In this example, we exported a Vue component named "MyComponent". We can also define props, data, computed, methods and other properties and methods in Vue components for components.

Finally, we need to use this MyComponent component in other components. In other Vue components, we can introduce the MyComponent component as follows:

<template>
   <div>
      <my-component></my-component>
   </div>
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
   components: {
      'my-component': MyComponent
   }
}
</script>

Here we import the MyComponent component into other Vue components through the import keyword and register it as a subcomponent through the components attribute. This component can be rendered by using the b98f2d1b8b5d79f8c1b053de334aa7b5 tag in the HTML template.

The above are the simple steps to create a Vue component. Create a Vue project using the Vue CLI, then create a .vue file, write the code and use it in other Vue components. The component-based development model of Vue.js allows developers to build applications more conveniently and quickly, and improves code reusability and modularity.

The above is the detailed content of How to create vue file in code. For more information, please follow other related articles on the PHP Chinese website!