The traditional way to create a Vue3 scaffold requires npm commands, which is not only cumbersome but also often fails due to network issues. Today, I’ll teach you a method to quickly create a Vue3 project without commands, using entirely graphical operations.

Steps

  1. Download HBuilderX

    image-20230101225203834

  2. After downloading, it’s a compressed package. We extract it and run HBuilderX.exe.

    image-20230101225353689

  3. The first run will prompt you to choose a theme. You can select any theme, as this software doesn’t provide much help for development.

    image-20230101225454120

  4. Click File -> New -> Project on the menu bar to create a new project.

    image-20230101230448668

  5. In the pop-up window, select Regular Project, scroll down to find Vue3 Project, give the project a name, set the storage location for the project, and finally click create.

    image-20230101230722835

  6. Wait for the software to automatically create the project.

    image-20230101230817920

    image-20230101230809422

  7. After successful creation, we directly close HBuilderX. That’s right, close the compilation software.

    image-20230101230901407

  8. Find the folder where the project is stored and open the project with Visual Studio Code.

    image-20230101231420390

    image-20230101231529365

  9. Install Vue development language support in the extensions.

    image-20230101231643142

  10. Then you can start writing Vue code.

    image-20230101232024841

Note: Running a Vue project in VS requires installing Node.js yourself. The Node.js used when creating the project was the one bundled with HBuilderX, and these two are not compatible.

Template Code

I recommend to everyone my commonly used Vue3 template code. Using this template can help improve efficiency.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>

</template>

<script>
export default {
  data() {
      return {
          
      };
  },
  mounted() {

  },
  methods: {

  }
}
</script>

<style>

</style>
  • template tag: HTML page.
  • script tag: JavaScript script code.
    • data function: Variable data.
    • mounted function: Code executed when the page starts.
    • methods: Method functions.
  • style tag: CSS styles for this page.