首页 前端知识 初识 Vue 3,使用Hbuilder X 开发工具初建项目

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

2024-02-22 11:02:17 前端知识 前端哥 345 560 我要收藏

Vue 3 简介

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

  1. Composition API:Vue 3引入了Composition API,它允许组件代码按逻辑顺序组织,而不是按生命周期钩子组织。这使得Vue 3更易于管理代码,并使代码更具可读性和可维护性。

  2. 更快的渲染:Vue 3的渲染速度比Vue 2快,这是因为Vue 3使用了更少的代理和更少的观察者。

  3. 更小的包大小:Vue 3的包大小比Vue 2小,这使得它更快地下载和加载。

  4. 更好的TypeScript支持:Vue 3具有更好的TypeScript支持,可以通过类型检查帮助开发人员捕获更多的错误。

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


开发工具简介

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

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

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

  1. 多端支持:Hbuilder X支持多种平台的应用程序开发,包括Web、App、小程序等,可以快速构建跨平台的应用程序。

  2. 强大的编辑器:Hbuilder X内置了强大的代码编辑器,支持多种编程语言,包括HTML、CSS、JavaScript等,可以快速编写高质量的代码。

  3. 丰富的插件:Hbuilder X提供了丰富的插件,可以扩展其功能,提高开发效率,实现更多的功能。

  4. 良好的集成环境:Hbuilder X为前端开发提供完整的集成开发环境,可以一站式地完成开发、调试、测试与部署等工作。

  5. 提供模拟器:Hbuilder X集成了模拟器,可以在开发过程中模拟多种设备和屏幕尺寸,方便开发者进行测试和调试。

  6. 多人协作:Hbuilder X支持多人协作,开发人员可以在同一个项目中协作开发,方便团队协作。

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


项目创建

新建项目

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

图1-1 新建项目

项目类型选择

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

图1-2 项目选择

vite与cli简介

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

  1. 构建速度:Vite使用ESModules作为开发服务器和构建工具,这使得它比Vue-CLI更快。Vue-CLI使用Webpack构建和打包工具,但是由于Webpack本身功能非常强大,因此它的构建速度可能会比Vite慢一些。

  2. 编译器:Vue3的编译器可以在运行时即时编译,这意味着在生产环境中可以通过动态编译来减小应用程序的体积。Vue-CLI则将模板预编译为渲染函数,这在生产环境中会使文件更大。

  3. 开发体验:Vite 提供了即时重载和按需编译的功能,支持快速的开发调试。Vue-CLI则提供了更完整的开发工具集,如官方插件、路由、状态管理等等。

  4. 配置:Vue-CLI提供了完整的配置文件,可以自定义webpack配置,而Vite则提供了默认的配置和插件系统,可以通过开发者自己编写插件来扩展。

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

我这里使用vite作为演示。


项目文件介绍

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

  1. node_modules 文件夹:包含项目所依赖的第三方库和插件。

  2. public 文件夹:包含项目的公共文件,如 HTML 模板、不需要打包的静态资源等。

  3. src 文件夹:包含项目的源代码,其中最重要的文件为 main.js,它是整个应用程序的入口点,还有App.vue,它是 Vue3 项目中的主要组件之一,它是应用程序的根组件,它负责在整个应用程序中渲染出所有的组件。除此之外还包括:assets 文件夹:通常用于存放静态文件,包括但不限于图片、字体、样式文件等。这些静态文件可以在Vue组件中通过相应的路径引用和使用;components 文件夹:包含应用的组件文件; 

  4. index.html 文件:是整个web应用的首个页面,可引入Vue.js的JavaScript文件,并在页面中初始化Vue应用,使得Vue能够进行组件的挂载和渲染。。

  5. package.json 文件:应用程序的依赖包列表和基本信息。

  6. package-lock.json 文件:它是npm 5 引入的一项新特性,它主要的作用是锁定安装时的包的版本号,确保多人协作时安装的包的版本一致,避免出现版本不一致的问题。

  7. vue.config.js 文件:是Vue CLI 3.x中的配置文件,可以用于配置一些开发和生产环境下的选项。可以定制化Vue项目的构建、开发和打包过程,提高开发效率和项目质量。

  8.   

以上是 Vue3 项目文件列表的主要内容,不同的项目结构可能会有所不同。

图1-3 项目文件列表

运行项目

在当前目录下,点击开发工具菜单栏的“运行”—>“运行到终端”—>“npm run dev”,如图1-4所示。

图1-4 运行项目

运行后的结果如图1-5所示。

图1-5 项目运行结果

打开本地网址

运行后我们就可以通过本地网址打开了。

打开后的效果如图1-6所示。

图1-6 项目打开效果

点击中间的count is 按钮可测试点击效果,每点击一次,数字将增加1。

至此,我们的第一个Vue 3 项目已经创建完成啦。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2480.html
标签
评论
发布的文章

jQuery中的ajax

2024-03-07 08:03:42

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!