（八）Vue3-huohuo-admin src构建-上

最新推荐文章于 2024-06-28 14:22:47 发布
最新推荐文章于 2024-06-28 14:22:47 发布
阅读量355 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/web220507/article/details/126957683
版权
本文介绍了Vue3项目的核心开发前置工作，包括初始代码清理和src目录的构建。在清理阶段，删除默认代码并定义文件类型。接着详细阐述了src的各个部分：api接口文件用于集中管理接口；assets存放静态资源，components设计全局和局部组件；config处理项目配置；directives封装自定义指令；layouts则涉及项目布局。文章还提及了组件注册的简化方法和未来将深入探讨的组件封装话题。
摘要由CSDN通过智能技术生成

前面我们已经搭建好了一个基础的前端工程项目，并且针对Vite做好了相应的配置，其实除去项目业务内容，已经算是一个完整的小项目啦！

现在我们开始为HuoHuo-Admin的核心开发做一些重要的前置工作，也即围绕Vue3的周边生态为我们的项目框架搭建地面结构。

初始代码清理

开始写我们的核心代码之前，需要先把项目自带的部分代码或文件删除，主要就是我们的src文件。

env.d.ts定义类型的文件放到types中，并重命名为shims-vue.d.ts，帮助我们告诉TS，Vue文件的一些类型。

在根目录下的index.html文件中更改title并将favicon.ico换成自己的小 logo!

src 构建

也就是围绕Vue3生态对项目技术栈使用的构建，这里我们依然从src目录来看是如何构建的（一般项目通用src目录）。

api 接口文件

通常我们会把所有的接口方法统一放到这个模块中&

最低0.47元/天 解锁文章
web老猴子
关注
vue3-element-admin-2.0.1.zip
11-27
vue3-element-admin-2.0.1.zip
Vue 注册组件，抽离 withInstall 方法
qq_36437172的博客
08-11 3505
在组件中，我们通常需要使用 Vue.component 去注册组件后才能使用。最后，我们引入 withInstall 方法，组件注册方法变得更简洁了。
vue中install方法
热门推荐
weixin_44795287的博客
02-20 2万+
vue提供install可供我们开发新的插件及全局注册组件等 install方法第一个参数是vue的构造器，第二个参数是可选的选项对象 export default { install(Vue,option){ 组件 指令 混入 挂载vue原型 } } 全局注册组件 import PageTools from '@/components/PageTools/pageTools.vue' import update from './update/index.vue' import Ima
vue 如何把封装的组件以install 的方式提供给组员
qq_40259123的博客
03-25 1791
1. 创建packages文件夹（与src同级） 2. 把组件我们封装的组件移入到packages文件夹里面，并在文件内创建index.js 文件 由于我这边有icon 样式，所以把样式表也要放进去 3.在packages文件下index.js文件中对封装组件进行注册。 // 统一导出 // 导入颜色选择器组件 import Button from './button' import Dialog from './dialog' //导入字体图标 import './fonts/font.scss'
Vue2与Vue3中利用install自定义全局确认框组件编写
weixin_40352044的博客
05-16 4584
Vue2与Vue3中使用install注册组件全局使用的方法
管理后台UI框架vue-vben-admin运行
linx_i的博客
03-06 1388
Vue Vben Admin 是一个免费开源的中后台模版。使用了最新的vue3,vite2,TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。
vue3-real-admin纯静态后台模板
08-04
vue3-real-admin纯静态后台模板vue3-real-admin纯静态后台模板vue3-real-admin纯静态后台模板vue3-real-admin纯静态后台模板vue3-real-admin纯静态后台模板vue3-real-admin纯静态后台模板vue3-real-admin纯静态后台...
vue-element-admin中文版本
07-20
1. **Vue CLI**：Vue-element-admin 基于 Vue CLI（Vue 的命令行工具）构建，它提供了一套自动化的工作流，用于快速初始化项目，包括自动配置打包、热更新、单元测试等。 2. **Vue Router**：Vue 的官方路由管理器...
vue3-element-admin：vue3 + element-plus + typescript 后台管理系统
05-04
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 ...
vue3-admin-01
最新发布
10-30
vue3--admin-01简单框架
Vue3 & app.use 与 install 函数的作用
cookcyq__的博客
10-20 9533
以上代码的作用在 vue 官方都有解释，但它还隐藏了与 vue-cli 构建有关的一个很有用的功能，类似的，其它插件如 i18n、vuex、vant 等都要借助 app.use 引入，构建属于自己的组件库，这样既可以单独维护，也可以减少主体项目的代码量。命令，此命令可以将文件打包成一个可作为依赖导入的 js 库，在 vue3 中，默认初始化 vue 的方式是这样的。方法，实现组件自引，一个库不止一个组件，你可以在。方法会在引入插件时自动被 vue 调用，方法，是的，组件本身也是一个对象，
vue 项目npm 打包遇到的一些bug记录
weixin_45049852的博客
09-11 549
rc/utils/utils.ts:241:50 - error TS2345: Argument of type 'T' is not assignable to parameter of type 'Component'. Type 'T' is not assignable to type 'FunctionalComponent'. 241 app.compone
从0搭建Vue3组件库(四): 如何开发一个组件
JackChan
02-17 712
从0搭建Vue3组件库(四): 如何开发一个组件
基于 Vite + Vue3 + TS 开发组件库
biaov
10-12 3493
技术栈 附上 Github地址 和 演示地址 以供参考。 HTML5 + CSS3 + Less + ES6+ + Vue3.x + Composition-API + Vite + Gulp + Rollup + Jest 初始化项目 可以使用 vite 的官方 template，也可以自己搭建。 官方命令 npm init vite@latest ui --template vue 从零搭建 生成 package.json npm init -y { "name": "ui",
vue-vue的插件机制与install
weixin_42855188的博客
03-23 1058
插件制作时会通常会加上 install 方法，我们以 Vue-Router 为例。核心作用就是use的时候，判断插件类型，执行install或者插件本身。然后我们在项目中使用 Vue-Router 插件。（3）Vue-Router 挂载流程。（2）根据上面的例子我们进行分析。
使用vue3创建座位组件
overFlowzy的博客
01-11 2210
将使用Vue 3创建一个座位组件。座位组件是一个常见的UI组件，用于显示座位信息，并允许用户选择或取消选择座位。该组件是通过js去创建的，没有类型提示，所以加入了一部分jsdoc，使编辑器可以识别类型。
Vue插件之install方法封装element-ui组件(按需引入)
Yui_Li 的博客
08-09 780
Vue中引用element-ui组件库可采用全局引入和按需引入，按需引入的优点是可以根据实际所需进行插件的进入，从而减少项目压缩的体积大小，此处只介绍按需引入。
Vue3安装步骤详解及项目创建
m0_69572231的博客
07-08 1209
（4）修改完之后，在命令行终端重新创建vue项目。（5）可以选择默认项目模板，或者选“手动选择特性”来选取需要的特性。用上下键进行选择，选择之后点击——回车。Linter/Formatter默认是选中的，一定要将其取消掉（按上下键选择，点击空格进行取消或选中）（6）点击回车，进行Vue版本的选择，一般选择Vue3(包含Vue2)选择不保存——因为以后还会改许多内容，点击回车之后进行项目的创建。（ 8）问配置文件放在哪里，选择默认——回车。2.安装完查看安装版本，验证是否安装成功。（2）输入进行创建项目。
【ElementPlus源码】Container 布局容器
karshey的博客
06-28 1070
返回了一个对象ElContainer ，有一个install方法，若调用install方法，则将Container、Aside、Footer、Header、Main五个组件注册到app上，并可以通过ElContainer.Container的方法访问Container。在许多编程语言和环境中，它通常被用作一个占位符函数，当你需要一个函数但又不希望它做任何事情时，可以使用NOOP。若没有props.direction，判断插槽中是否有header和footer，有则返回true，代表垂直。
快速搭建Vue前端项目：vue-element-admin实践
总结起来，`vue-element-admin`是搭建企业级中后台产品的强大工具，其丰富的功能和组件，以及灵活的配置，可以帮助开发者快速构建出功能完善的管理界面。通过理解其目录结构和关键文件，可以更高效地进行项目定制和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值