而不是使下面的调用导入所有moment.js。...有18个地方在代码中导入了moment.js。我本可以在代码中进行全局搜索和替换。但是如果我们向框架添加一个新的应用程序，开发人员很可能会使用默认调用来导入moment.js。...我们可以使用resolve和设置别名在我们的vue.config.js文件添加该别名。这是我vue.config.js现在的样子。...--save 我导入Vuetify的插件代码有一些主题的自定义，以使用我们公司的调色板。...image.png 总结 我的目标是减少为我们的应用程序生产而创建的包的大小。 我的构建的初始大小是2.48MB。 通过进行一些更改，我能够将构建大小减少到1.2MB。 这几乎减少了50％。
开始新项目时，我总是做的第一件事是 $ npm run init 这将创建package.json文件。然后，我们手动创建readme.md和.gitignore文件以及src目录，这将在后面使用。...这将main.js在dist目录中创建一个新文件。这是我的最终用户将使用的文件。 现在，我们创建一个index.html文件（通常在public目录中，但这并不是必然要求）。 <!...组件库 我很懒。成为高效的开发人员通常意味着要懒惰。 除了创建所有组件之外，我们还可以使用现有的组件库。这样，我们可以将更多精力放在内容上，而不是如何正确设计日期选择器。...（您正在使用Vue的仅运行时版本，而模板编译器不可用。） 您输入的Vue错误。如果您还记得的话，有很多导入Vue的方法。...vuetify未定义） 您的应用程序和Vuetify没有导入“相同”的Vue。如上所述，导入适合您的用法的Vue非常重要。一个好的解决方案是在webpack中创建一个别名。
而不是使下面的调用导入所有moment.js。...有18个地方在代码中导入了moment.js。我本可以在代码中进行全局搜索和替换。但是如果我们向框架添加一个新的应用程序，开发人员很可能会使用默认调用来导入moment.js。...--save 我导入Vuetify的插件代码有一些主题的自定义，以使用我们公司的调色板。...这是我的vue.config.js文件： 现在，当我运行生产构建时，我的捆绑包大小为2MB。 减少vue-echarts的大小 Vue-echarts不是我捆绑中最大的项目。...总结 我的目标是减少为我们的应用程序生产而创建的包的大小。 我的构建的初始大小是2.48MB。 通过进行一些更改，我能够将构建大小减少到1.2MB。 这几乎减少了50％。
BuildAdmin前端目录如下，我只对一级目录进行了粗略的标注，详细的可以去官网看。 在本地需要使用vue-cli脚手架来构建项目，在构建时会有很多选项，包括使用的vue版本和各种插件。...关闭lint lint会检查编码中格式的错误，我个人不是很喜欢，所以我会在vue.config.js中关掉。...v-bind是vue3中的新用法。其中的menuWidth参数是pinia定义的状态变量，为260px。这里为什么要使用v-bind，而不是直接写260呢？...，logo和menu都需要知道：“我要折叠/展开了”。...我们知道logo和menu是两个独立的组件，而vue中的ref响应式变量只能在单组件内使用（不明白的可以看看vue的ref和reactive）。
零、前言 记得有一次组内分享，以弹窗为例讲了如何创建可复用的vue组件，后面发现这个例子并不恰当（bei tiao zhan），使用组件需要先import，再注册，然后再按照props in events...每个页面在使用弹窗时如果都按照这个流程走一遍的话，我们的脸基本上就黑了。 弹窗应该是插件，注册一次永久使用，如this.$alert('QQ音乐')。下面我们就一起撸一个试试。...=> h(App) }) 是不是很眼熟，和vue-router用法一样，只要调用Vue.use()，传入插件和初始化参数即可。...如果想传入其他vue组件，实现一个上传文件的弹窗，像下面这样是不行的。...在上面的Dialogs.vue中，title和content是支持传入slot。那么在插件中怎样传入slot？我们尝试在$alert $confirm基础上新增一个$uploadFile方法。
而如果我们对所有的代码进行合理的拆分，将首屏和非首屏的代码进行剥离，将业务代码和基础库代码进行拆分，在需要某段代码的时候再加载它，下次若再需要用则从缓存中读取，一来可以更好地使用浏览器缓存，再者就是可以提高首屏加载速度...实战 最近，采用vuetify改造了一个内部系统，一开始用了最常用的webpack配置，功能很快开发了，可是一打包，发现效果不是很明显，打出很多大包。 ?...这里我们看下打包分布，这里使用的是 webpack-bundle-analyzer,可以很清晰的看到 vue 和 vuetify等模块都有出现 被重复打包的情况。 ?...可是，这里我们发现vuetify.js和vuetify.css实在太庞大了，导致我们的打包的代码很大，这里，我们考虑把它提取出来，这里为了避免重复打包，需要使用external,并将vue以及vuetify...总结 可能会有朋友会问，单独分拆vue和vuetify会导致请求数增加，这里我想补充下，我们的业务现在已经切换成http2了，由于多路复用，并且加上浏览器缓存，我们分拆出的请求数其实也算是控制在合理的范畴内
总的来说，Naive UI是一个功能强大、易于使用的Vue 3组件库，适合于各种规模的项目的开发，成为了许多开发者构建现代Web应用程序的首选组件库。...Element Plus是Element UI的升级版，Element UI是基于Vue 2.x的界面框架，而Element Plus则基于Vue 3.x。...无论是创建定制主题，还是利用大量预构建选项，Vuetify 都使开发者能够定制 App 的外观和风格，满足特定偏好或品牌要求。...国际化：凭借对国际化的内置支持，Vuetify 简化了创建迎合全球受众的 App 的过程。开发者可以无缝实现多语言支持和本地化功能，确保它们的 App 在全球范围内均可访问且用户友好。...灵活性和可定制性：组件库提供了很大的灵活性和可定制性，使得开发者能够根据项目需求进行个性化定制。 社区支持：PrimeVue有一个积极的社区，用户可以在论坛上获取支持、提出问题，并分享经验。
工具，它是终端命令的 Web 界面，适用于喜欢图形界面而不是命令行的人。...开始一个新项目 有两种方法可以启动新的 Vue 项目： 使用用户图形界面 使用命令行 图形界面 用户图形界面技术使你通过 GUI 工具点击几次鼠标就可以创建一个新项目。...命令行 要直接使用 CLI 安装 Vuetify 插件，请切换到项目目录并使用 add 命令，如下所示： 1vue add Vuetify 这会将 Vuetify 插件安装到你的 Vue 项目中，并修改插件将影响的所有文件...你可以更改目录位置和dist文件夹的位置以进行生产环境的发布。还可以将 CSS 设置更改为预处理器。 即时原型制作 你是否想创建单个 Vue 组件而不去创建整个项目呢？...在撰写本文时，GUI 工具还无法通过 GUI 工具的即时原型设计在单个组件上创建或运行任务，但可以在 CLI 上完成。我希望本指南能够对你有所有帮助，编码愉快！
Vuetify 是一个 Vue UI 库，包含手工制作的精美材料组件。不需要设计技能 - 创建令人惊叹的应用程序所需的一切都触手可及。...Vuetify有超过100个组件元素，带有响应式网格系统，完全支持事件处理。通过每周的补丁和持续的更新，Vuetify 很可能在未来几年内仍然是最受欢迎的Vue库之一。 ? 2....它不是一个CSS框架，不包括网格系统或排版风格，但有需要Javascript 的组件。 ? 14....具备使用CSS预处理程序的能力，它几乎适用于几乎所有开发团队。 就我个人而言，我真的很喜欢AT UI随附的最小样式和字体选择，而且我认为添加到任何项目中都非常直观且容易。...我最喜欢的组件之一是时间线，可以轻松创建漂亮的时间线，非常适合进行项目更新。 ? 好了，今天就分享到这里，你最喜欢的Vue.js库是什么？欢迎留言讨论。
开发过程 开发框架选型 因为先前有过相关的学习和开发经验，因此我毫不犹豫地选择了前后端分离的开发模式：前端采用 Vue 3 作为 JavaScript 框架，Vuetify 作为 UI 框架；后端采用...虽然说是毫不犹豫，但其实前端和后端选型的时候，我还是有一些调整和妥协。...前端开发上，我采用了 vite 作为构建工具，使用 yarn 作为包管理器，除了 vue 和 vuetify 以外，我还主要引入了这些依赖： vue-router（Vue 官方开发的路由系统） vue-showdown...，但是不知道是不是我的配置问题，这导致 IDE 导入在 ts 文件中声明的函数时，导入的文件雷静总是错误的变为 js 而不是 ts） 我想得到的一个成品是： 一个主页，可以以卡片流的方式显示最新的树洞（...，在后端开发完成后，我又成功完成了与后端的对接，不过，与期望不同的是一些小问题导致的差异： 本来想做一个收藏功能，但是懒得做（即使后端已经声明好了对应的数据结构），所以没做 举报功能也没做 回复功能本来是想允许分别对主帖和评论回复的
各个JS框架之间经常会展开渲染速度以及内存占用等属性的比较。其实，这些因素在大多数情况下根本无关紧要，因为应用的速度缓慢并不是由于JS框架的速度过慢而引起的，而是因为糟糕的代码。...如何管理状态 不要讨论某个流行的状态管理库，而是告诉我为什么“数据应该下降而动作应该上升”。或者说，为什么应该在创建的地方修改状态，而不是组件层次结构中更深的地方。...如何发布代码 不要告诉我你使用 CI/CD（因为如今每个项目里的成员都不止一个人），而是解释为什么部署和发布应该分离，这样新功能就不会影响到已有功能，而且还可以远程启动新功能。...如何建立稳固的项目标准 除非团队中只有你一个人，否则你就必须遵守项目中的标准和惯例。你应该告诉我命名很难，而且变量的范围越广，投入到命名中的时间就应该越多。...小到简单的活动页，大到复杂逻辑的中后台系统，Vue 都能轻松应对。 但，想要真正用好 Vue ，却没想象中容易。估计很多朋友在学习和使用 Vue 时，都有过类似下面的困境： 概念过多，记不住。
我真正喜欢的 Vue Light Bootstrap 的 一个原因是，我们可以在各种颜色，背景图像和其他样式之间自定义边栏。 此功能允许开发人员根据自己的特定项目需求来定制。...作为一个开源项目，CoPilot 入门就像克隆 Github 存储库一样容易！ 我喜欢 CoPilot 页面顶部的漂亮的加载器动画。加载不同组件时的进度条确实使该应用程序具有现代感和优美感。...模板不仅看起来很棒，而且还利用了 Material Design 规范创建了一个干净，可访问的用户界面。颜色很棒，模板易于定制，总体而言，一切都做得很好。...有16个免费元素，3个自定义插件和7个示例页面，对于那些只想寻找一种免费方法来测试其仪表板的人来说，这是一个很好的起点。...代码中已经添加了许多Vue库，例如vue-router和Vuex。 尽管它可能不是“现成的”，但它确实为开发人员在仪表板的布局，设计和结构上提供了额外的灵活性。
下面记录一下我觉得比较有意思的、会引起思考的需求，所用技术：vue、vue-router、element-ui。...2、需求： 导航菜单（el-menu组件）竖向展示的 鼠标移入一级菜单展示下面的子菜单，移出则收起来（手风琴模式，正常状态下只保持一个菜单处于展开状态，手动鼠标悬浮展开的不算） 选中某个子菜单时高亮对应的一级菜单...（只能自己修改了） unique-opened 参数可以控制是否只保持一个子菜单展开，但是在没有子菜单的情况下失效（需要手动修改） 4、思路分析： 导航菜单使用递归el-submenu组件实现...） 一开始我想在子菜单展开折叠的回调事件（open、close）里写逻辑判断，但是不知道什么原因回调事件不触发（注意：open方法和open事件不一样，组件三大要素：属性、事件、方法），所以我就考虑在...（这里需要记录上次打开菜单的index，这里我使用sessionStorage记录） 5、代码展示： 只展示代码片段，仅供参考 sessionStorage使用自己封装的，之前文章有写过，感兴趣的可以看一下掘金文章
Sing App Vue 是使用 Vue2和Bootstrap 4 构建的出色管理模板。我个人非常喜欢此模板的样式，并喜欢其遵循的现代设计原则。...我喜欢 CoPilot 页面顶部的漂亮的加载器动画。 加载不同组件时的进度条确实使该应用程序具有现代感和优美感。 主要特点： 开源 响应式设计 干净直观的用户界面 快速安装 7....对于具有 Vuetify 框架经验的 Vue开发人员来说，Vuetify Material Dashboard 是一个绝佳的选择。...有16个免费元素，3个自定义插件和7个示例页面，对于那些只想寻找一种免费方法来测试其仪表板的人来说，这是一个很好的起点。...尽管它可能不是“现成的”，但它确实为开发人员在仪表板的布局，设计和结构上提供了额外的灵活性。 主要特点： 开源 高度可定制 内置Vue库 10.
有一个类型就有一个 loader，如果 loader 缺失，程序就会报错了。...文件时，将 import '....如果是 webpack 工程，打开webpack.config.js文件，在里面新增一个配置节点module，在module对象中，有一个rules属性，它是一个数组，里面存放了所有第三方文件匹配和处理规则...对于 vue cli3 创建的项目，在vue.config.js/configureWebpack内，添加如下配置： config.module.rules.push({ test: /\.css$/,...这个显式配置与默认配置有差异，导致编译不通过。可以使用如下命令： vue inspect -v --mode development > config-output.txt 查看默认配置。
项目设计 在进行项目开发时，先对项目进行了基本的 UI 设计 [主页] [详情页] 这里用到的是 balsamiq 的手绘线框图来完成产品设计，以避免我个人过度追求完美，而让产品延期迟迟不能上线的问题（...Vue Router 的配置在引入了 Vue 3 以后，显得非常的简单，直接执行如下命令即可 vue add router 执行过程中，会问你是否需要启用 History Mode，根据需要选取，我使用的是...接下来安装的是 Vuetify ，由于框架提供了相应的支持，因此在开发时也非常简单，只需要执行如下命令就可以完成初始化。...vue add vuetify 会问你选择那种预设，直接使用 Default 即可。 [c5vjy.png] 保存并重启开发服务器，你会看到这样的界面，则说明配置完成。...这里项目的开发我并没有使用云开发自己的 Web Hosting （因为我们不是按量付费套餐，所以没有办法开启），而是使用了 Now.sh 的，这里就不再过多赘述。
前言 最近想做一个音乐网站。要分管理端和客户端。这里记录一下开发过程。希望大家的指正。 今天实现一下导航栏。文章开始前先新建几个文件夹，用于一会儿存放我们的代码。(使用vite创建)。...AppMenu.vue组件 留一个放logo的位置 使用 el-menu 属性 用途 :collapse 菜单的展开收起这里使用父组件传来的值 :collapse-transition 展开收起的动画效果...中的使用方式 createWebHashHistory() 复制代码 了解一下 hash路由就是 带 # 号的，和css中的 #一个意思。...如下图，home和用户管理虽然都是一级导航栏，但是二者并不相同。home对应页面，用户管理则只用于展开子菜单。...这里用v-if 和 v-else 通过判断 first.children是否为空来区分导航。 el-menu-item用于home这种没有子菜单的，el-sub-menu 用于有子菜单的。 3.
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
