初识 Vue 3，使用Hbuilder X 开发工具初建项目

专业研究祖传Bug编写术

已于 2023-12-06 14:58:59 修改

阅读量2.7k

点赞数 1

分类专栏： Vue 3基础入门教程文章标签： vue.js 前端 javascript

于 2023-10-10 23:50:58 首次发布

本文链接：https://blog.csdn.net/aahwj/article/details/133758054

版权

27 篇文章 3 订阅

订阅专栏

Vue 3 简介

Vue 3是一种JavaScript框架，用于构建用户界面和单页应用程序。Vue 3是Vue.js的最新版本，经过重构，使其性能更好，包括更好的响应速度、更快的渲染和更小的包大小。Vue 3的新特性包括：

Composition API：Vue 3引入了Composition API，它允许组件代码按逻辑顺序组织，而不是按生命周期钩子组织。这使得Vue 3更易于管理代码，并使代码更具可读性和可维护性。
更快的渲染：Vue 3的渲染速度比Vue 2快，这是因为Vue 3使用了更少的代理和更少的观察者。
更小的包大小：Vue 3的包大小比Vue 2小，这使得它更快地下载和加载。
更好的TypeScript支持：Vue 3具有更好的TypeScript支持，可以通过类型检查帮助开发人员捕获更多的错误。

Vue 3是一个更快、更小而且更易于使用的框架，它具有新的功能和更好的性能，是一个非常有前途的框架。

Hbuilder X是一个基于HTML5技术的集成开发环境，可以用于Web、移动应用和桌面应用等领域的开发。它的主要功能包括代码编辑、调试、测试、构建和发布等。同时它还支持多平台开发，例如iOS、Android、Windows等，并提供了丰富的扩展和插件机制，可以满足不同开发者的需求。

下面我将使用Hbuilder X创建一个vue 3的演示项目。

Hbuilder X是一个跨平台的前端开发工具，具有以下好处：

我这里使用Hbuilder X V3.8.12.20230817版本作演示。

首先打开Hbuilder X，如图1-1所示，在软件的左上角单击“文件”—>“新建”—>“项目”。

图1-1 新建项目

选择创建的项目，如图1-2所示，选择“普通项目”—>输入项目名称(自己命名一个)—>选择项目的保存路径（也可以直接使用默认路径）—>选择“vue3项目(3.2.8)”，包含vite。选择好后点击“创建”按钮。开发工具将会自动下载模板并创建项目，非常方便快捷，稍等1分钟左右，项目就能创建完成。

图1-2 项目选择

Vue3和Vite与Vue2和Vue-CLI之间的区别如下：

构建速度：Vite使用ESModules作为开发服务器和构建工具，这使得它比Vue-CLI更快。Vue-CLI使用Webpack构建和打包工具，但是由于Webpack本身功能非常强大，因此它的构建速度可能会比Vite慢一些。
编译器：Vue3的编译器可以在运行时即时编译，这意味着在生产环境中可以通过动态编译来减小应用程序的体积。Vue-CLI则将模板预编译为渲染函数，这在生产环境中会使文件更大。
开发体验：Vite 提供了即时重载和按需编译的功能，支持快速的开发调试。Vue-CLI则提供了更完整的开发工具集，如官方插件、路由、状态管理等等。
配置：Vue-CLI提供了完整的配置文件，可以自定义webpack配置，而Vite则提供了默认的配置和插件系统，可以通过开发者自己编写插件来扩展。

综上，Vue3和Vite的开发速度和开发体验不错，特别是在中小型项目中使用。但是对于更复杂的项目，Vue-CLI更适合，因为它提供了更完整的功能和配置。

我这里使用vite作为演示。

创建好的文件目录如图1-3所示，主要包括以下内容：

node_modules 文件夹：包含项目所依赖的第三方库和插件。
public 文件夹：包含项目的公共文件，如 HTML 模板、不需要打包的静态资源等。
src 文件夹：包含项目的源代码，其中最重要的文件为 main.js，它是整个应用程序的入口点，还有App.vue，它是 Vue3 项目中的主要组件之一，它是应用程序的根组件，它负责在整个应用程序中渲染出所有的组件。除此之外还包括：assets 文件夹：通常用于存放静态文件，包括但不限于图片、字体、样式文件等。这些静态文件可以在Vue组件中通过相应的路径引用和使用；components 文件夹：包含应用的组件文件；
index.html 文件：是整个web应用的首个页面，可引入Vue.js的JavaScript文件，并在页面中初始化Vue应用，使得Vue能够进行组件的挂载和渲染。。
package.json 文件：应用程序的依赖包列表和基本信息。
package-lock.json 文件：它是npm 5 引入的一项新特性，它主要的作用是锁定安装时的包的版本号，确保多人协作时安装的包的版本一致，避免出现版本不一致的问题。
vue.config.js 文件：是Vue CLI 3.x中的配置文件，可以用于配置一些开发和生产环境下的选项。可以定制化Vue项目的构建、开发和打包过程，提高开发效率和项目质量。