传统创建vue3脚手架的方式需要用npm指令来创建，步骤繁琐不说还经常因为网络问题创建失败，今天教大家一个可以快速创建vue3项目的方法，不需要指令，全图形化操作。

操作步骤

  1. 下载HBuilderX

    image-20230101225203834

  2. 下载好后是一个压缩包，我们解压它，并运行HBuilderX.exe。

    image-20230101225353689

  3. 首次运行会让你选择一个主题，这里随便选就行，因为这个软件对开发的伴帮助不大。

    image-20230101225454120

  4. 点击菜单栏上的文件——新建——项目来创建一个新项目。

    image-20230101230448668

  5. 在弹窗的窗口中选择普通项目，往下拉找到vue3项目，并给这个项目起一个名字，然后设置该项目的存储位置，最后点击创建。

    image-20230101230722835

  6. 等待软件自动创建项目。

    image-20230101230817920

    image-20230101230809422

  7. 创建成功后，我们直接关掉HBuilderX，你没听错，关掉编译软件。

    image-20230101230901407

  8. 找到存放项目的文件夹，用Visual Studio Code打开该项目。

    image-20230101231420390

    image-20230101231529365

  9. 在扩展里安装vue开发语言支持。

    image-20230101231643142

  10. 然后就可以开始编写vue代码了。

    image-20230101232024841

特别注意：在VS里运行vue项目需要自行安装Node.js，刚才创建的时候使用的是HBuilderX自带的Node.js，这两个不互通。

模板代码

推荐给大家我常用的vue3模板代码，用这套模板开发有助于提高效率。

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标签：HTML页面。
  • script标签：Javascript脚本代码。
    • data函数：变量数据。
    • mounted函数：页面启动时执行的代码。
    • methods：方法函数。
  • style标签：本页css样式。