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: