【05Vue3 Start】Vue3 Start: Create projects, write components and run applications

Vue3Starting Tutorial

Preparation

Before you start learning Vue3, make sure you have completed the following preparations:

• The latest version has been installed. You canDownload and install .
• Learn basic HTML, CSS, and JavaScript knowledge.

Step 1: Create a new project

First, we will create a new Vue3 project.

1. Open the command line interface and go to the directory where you want to create the project.
2. Run the following command to install the Vue CLI (Vue Command Line Interface):

3.       
           npm install -g @vue/cli
         
   
       

   • 1
   • 2
   AI writing code
4. Create a new Vue3 project:

5.       
           vue create my-vue-project
         
   
       

   • 1
   • 2
   AI writing code

   Follow the prompts to select the default configuration or manually configure the project. You can also use presetstemplate,likeTypeScriptorVue Router。

Step 2: Write the first oneComponents

Now that we have created a Vue3 project, we will write the first Vue component next.

1. Enter the project directory:

2.       
           cd my-vue-project
         
   
       

   • 1
   • 2
   AI writing code
3. Open the editor and in the project directorysrcCreate a new file under the folder named。
4. existIn the file, write the following code:

5.       
           <template>
             <div>
               <h2>Hello, Vue3!</h2>
             </div>
           </template>
   php
   Copy code
       <script>
         export default {
           name: 'HelloWorld'
         }
       </script>
   &lt;style&gt;
      /* Optional: Add style */
    &lt;/style&gt;
   

   • 1
   • 2
   • 3
   AI writing code
   • 1
   • 2
   • 3
   • 4
   • 5
   • 6
   • 7
   • 8
   • 9
   • 10
   • 11
   • 12
   • 13
   AI writing codeAI writing code

Step 3: Use Components

Now that we have written a Vue component, we will use it in our application next.

1. Opensrc/document.
2. Add the following code to the template:

3.       
           <template>
             <div >
               <HelloWorld />
             </div>
           </template>
         
   
       

   • 1
   • 2
   • 3
   • 4
   • 5
   • 6
   AI writing code
4. Add the following code to the script:

5.       
           import HelloWorld from './';
   bash
   Copy code
       export default {
         name: 'App',
         components: {
           HelloWorld
         }
       }
     
   
   

   • 1
   • 2
   • 3
   • 4
   • 5
   • 6
   • 7
   • 8
   • 9
   • 10
   AI writing code

Step 4: Run the application

Now that we have finished writing and using the components, we will run the application next.

1. Return to the command line interface.
2. Execute the following command to start the development server:

3.       
           npm run serve
         
   
       

   • 1
   • 2
   AI writing code
4. Open the browser and accesshttp://localhost:8080。

Further study

By this point, you have successfully gotten started with Vue3 and have written a simple application. Next, you can continue to learn Vue3's documentation and tutorials to gain an in-depth understanding of more features and usage of Vue3.