和chatgpt学架构03-引入UI框架(elment-plus)

简介: 和chatgpt学架构03-引入UI框架(elment-plus)

我们已经安装好了我们的vue脚手架,用vscode打开工程目录

要自由自在的开发,首先就需要明白我们文件的具体功能是干什么用的,还是问问chatgpt比较合适

1 项目目录及文件的具体作用

1.1 App.vue

在根目录下边有一个App.vue文件,这个是干什么用的呢?

App.vue作用是什么

1.App.vue 是 Vue.js 应用程序的根组件,它起到了以下几个作用:

容器组件:App.vue 是整个应用的容器,在应用启动时,它是第一个被加载和渲染的组件。所有其他组件都会作为 App.vue 的子组件嵌套在其中。

2.布局定义:App.vue 可以定义整个应用的布局结构。通过在 template 部分编写 HTML 结构,可以确定应用的整体布局、导航栏、底部栏等固定部分。

3.路由容器:如果你使用了 Vue Router 进行路由管理,App.vue 通常会包含 组件,用于根据当前路由渲染对应的页面组件。

4.状态管理:如果你使用了 Vuex 进行状态管理,App.vue 可以作为根组件来管理全局的状态。通过在 script 部分引入 Vuex 并注入全局状态,可以在整个应用的各个子组件中访问和修改共享的状态数据。

总而言之,App.vue 是 Vue.js 应用程序的根组件,负责整体布局、路由容器和状态管理等关键功能。它在整个应用中起到了承载和协调其他组件的作用。

1.2 main.js的作用

main.js起什么作用

1.main.js 是 Vue.js 应用程序的入口文件,它起到了以下几个重要作用:

创建 Vue 实例:在 main.js 中,我们通过引入 Vue 库并创建一个根 Vue 实例。这个实例将作为整个应用的顶层容器,负责协调和管理其他组件。

2.引入和配置插件:在 main.js 中,我们可以引入并配置 Vue.js 的插件,如 Vue Router、Vuex 等。通过配置插件,我们可以为应用添加路由功能、状态管理等额外功能。

3.注册全局组件:如果你有一些在整个应用中都会用到的组件,你可以在 main.js 中进行全局注册,使得这些组件可以在任何地方使用,而不需要每次在使用时都进行局部注册。

4.挂载应用:在 main.js 中,我们还需要使用 render 函数将根 Vue 实例挂载到 HTML 文档中的某个 DOM 元素上。通常情况下,我们会将应用挂载到一个具有 id 属性的元素上,例如

总之,main.js 是 Vue.js 应用程序的入口文件,负责创建 Vue 实例、配置插件、注册全局组件,并将应用挂载到 HTML 文档中的某个 DOM 元素上。

1.3 main.js什么时候被调用

main.js什么时候被调用

main.js 在 Vue.js 应用程序中是在应用启动时被调用的。


当我们通过引入 Vue 库并创建一个根 Vue 实例时,会在 main.js 中执行一些初始化操作,然后将根实例挂载到 HTML 文档中的某个 DOM 元素上。


具体来说,main.js 的调用时机如下:


  1. 首先,浏览器会加载 main.js 文件。
  2. main.js 中的代码会在浏览器解析到它时被执行。
  3. 在 main.js 中,我们可以进行一些初始化设置,如引入和配置插件、注册全局组件等。
  4. 最后,通过调用 new Vue({…}) 创建根 Vue 实例,并使用 render 函数将实例挂载到 HTML 文档中的指定 DOM 元素上。

总之,main.js 在 Vue.js 应用程序中是在应用启动时被调用的,负责进行初始化设置和创建根 Vue 实例。

1.4 npm run serve干了什么事情

当你在命令行中运行 npm run serve 命令时,它会执行项目中的 package.json 文件中定义的 scripts 部分的 serve 脚本。


通常情况下,npm run serve 的目的是启动一个开发服务器,用于在开发过程中实时预览和调试你的应用程序。


具体来说,npm run serve 做了以下几件事情:


1.检查项目中是否已经安装了相应的依赖项。如果没有安装依赖项,则可能在运行之前会自动执行 npm install 命令来安装所需的依赖项。

2.执行 serve 脚本,该脚本在 package.json 文件中定义。通常,它会调用一个构建工具(如 webpack)来编译和打包应用程序。

3.构建工具会读取配置文件(如 webpack.config.js),根据配置文件的设置对项目进行编译和打包。这可能包括处理 JavaScript、CSS、图片等资源文件,并将它们转换为浏览器可以识别和加载的格式。

4.启动一个本地开发服务器,在指定的端口上提供应用程序。这个服务器支持热重载,即当你修改代码时,它会自动重新编译和刷新浏览器,以便你可以即时看到修改的效果。

总之,npm run serve 的主要作用是启动一个开发服务器,用于实时预览和调试你的应用程序,并提供热重载功能,以提高开发效率。


1.5 package.json的作用

package.json 文件是 npm 用来管理依赖关系和版本的文件。它记录了项目中所有依赖包的详细信息,包括版本号、下载地址等,以及它们之间的依赖关系。这样,在其他开发人员或机器上重新安装项目时,就能保证所有依赖包的版本一致。


2 安装UI框架

好了,了解了vue工程的项目目录以及一些工作机制,我们就开始搭建首页了。现在前端开发当然不是从基础的html、css写起,我们是需要借助UI框架的。因为我们选择了Vue3,所以我们的UI框架选择element-plus

2.1 安装命令

打开我们的vs code ,在顶部的菜单栏点击Terminal,新建一个Terminal

在命令行里输入如下命令

npm install element-plus --save

包安装好之后,他是放在当前工程的node_modules里

而且package.json的依赖项里会多一个element-plus的项目,还显示当前的版本号

2.2 全局引入

我们的包下载好了之后需要让vue知道包在哪里,打开main.js修改为如下配置

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

3 启动工程

在命令行窗口输入

npm run serve

看工程启动的时候是否报错,如果不报错,且给出了访问地址说明UI框架已经安装好了。

总结

我们本篇和chatgpt了解了vue工程目录文件的具体作用,引入了element-plus框架,主要是需要学会按需引入自己的包。一般提供包的第三方会在文档里写明如何安装,如何引入,我们只需要按照指引照做就可以。

目录
打赏
0
0
0
0
15
分享
相关文章
十大主流联邦学习框架:技术特性、架构分析与对比研究
联邦学习(FL)是保障数据隐私的分布式模型训练关键技术。业界开发了多种开源和商业框架,如TensorFlow Federated、PySyft、NVFlare、FATE、Flower等,支持模型训练、数据安全、通信协议等功能。这些框架在灵活性、易用性、安全性和扩展性方面各有特色,适用于不同应用场景。选择合适的框架需综合考虑开源与商业、数据分区支持、安全性、易用性和技术生态集成等因素。联邦学习已在医疗、金融等领域广泛应用,选择适配具体需求的框架对实现最优模型性能至关重要。
349 79
十大主流联邦学习框架:技术特性、架构分析与对比研究
二级公立医院绩效考核系统源码,B/S架构,前后端分别基于Spring Boot和Avue框架
医院绩效管理系统通过与HIS系统的无缝对接,实现数据网络化采集、评价结果透明化管理及奖金分配自动化生成。系统涵盖科室和个人绩效考核、医疗质量考核、数据采集、绩效工资核算、收支核算、工作量统计、单项奖惩等功能,提升绩效评估的全面性、准确性和公正性。技术栈采用B/S架构,前后端分别基于Spring Boot和Avue框架。
171 5
探索鸿蒙新世界:ArkUI框架实战指南,解锁HarmonyOS应用UI设计的无限可能!
【10月更文挑战第19天】ArkUI框架是华为鸿蒙系统中用于开发用户界面的核心工具,支持ArkTS和eTS两种开发语言。本文介绍了ArkUI的基本概念、组件使用、布局管理和状态管理,通过示例代码帮助开发者轻松构建美观、高效的跨设备UI。
355 3
架构/技术框架调研
本文介绍了微服务间事务处理、调用、大数据处理、分库分表、大文本存储及数据缓存的最优解决方案。重点讨论了Seata、Dubbo、Hadoop生态系统、MyCat、ShardingSphere、对象存储服务和Redis等技术,提供了详细的原理、应用场景和优缺点分析。
ES6 awaitRust UI 框架
ES6 awaitRust UI 框架
44 0
electron ui框架
Electron是一个使用JavaScript, HTML和CSS等前端技术构建跨平台桌面应用程序的框架。
241 0
前端架构思考 :专注于多框架的并存可能并不是唯一的方向 — 探讨大模型时代前端的分层式微前端架构
随着前端技术的发展,微前端架构成为应对复杂大型应用的流行方案,允许多个团队使用不同技术栈并将其模块化集成。然而,这种设计在高交互性需求的应用中存在局限,如音视频处理、AI集成等。本文探讨了传统微前端架构的不足,并提出了一种新的分层式微前端架构,通过展示层与业务层的分离及基于功能的横向拆分,以更好地适应现代前端需求。
107 0
FirstUI:Deepseek能帮我们做很多事情,而这款开源框架专为开发者设计的开源UI框架,让你的项目加速起飞
嗨,大家好,我是小华同学。今天为大家介绍一个轻量级、响应式的前端UI框架——FirstUI。它提供丰富的组件库,包括按钮、输入框、下拉菜单等,帮助开发者快速构建美观、功能丰富的用户界面。FirstUI的核心理念是“简单、快速、高效”,适合各种Web应用开发,如企业网站、电商平台和个人博客。其体积小、加载快,支持响应式设计,并且易于定制。FirstUI拥有活跃的社区支持,开发者可以轻松找到帮助并分享经验。欢迎关注我们,获取更多优质开源项目和高效工作学习方法。
大数据-107 Flink 基本概述 适用场景 框架特点 核心组成 生态发展 处理模型 组件架构
大数据-107 Flink 基本概述 适用场景 框架特点 核心组成 生态发展 处理模型 组件架构
186 0
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
Midscene.js 是一款基于 AI 技术的 UI 自动化测试框架,通过自然语言交互简化测试流程,支持动作执行、数据查询和页面断言,提供可视化报告,适用于多种应用场景。
641 1
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等