提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、创建项目二、原理分析三、创建入口文件集体注册组件四、批量注册五、组件打包总结 前言vue作为当前比较热门的前端框架之一，因此常见的基于vue开发的UI框架有很多，比如ElementUI、Ant Design Vue等。那么我们怎么去开发一个组件库并且能够打包复用呢？见正文。一、创建项目使用vue-cli创建一个新项目
按需引入 官方文档介绍 借助 babel-plugin
原创
2022-08-27 01:55:15
892阅读
1、首先新建一个组件，下面以封装的基础input为例子： BaseInput.vue组件 代码如下<el-input
v-model="value"
:size="size"
:type="type"
:rows="rows"
:placeholder="placeholder"
安装插件// 一个vite必备，第二个是为了兼容vue2
npm i -D vite vite-plugin-vue2将public中的index.html拉出来，放在最外层，与package.json同级 在index.html中引入main.js<!DOCTYPE html><html lang="en">
<head>
<meta c
原创
2023-08-17 17:55:38
433阅读
Vue 封装Toast消息提示学习Vue的道路上,封装一些自定义的组件不可避免，今天就来封装一个Toast消息提示。后面还有dialog对话框，原理差不多。首先先看看效果图现在才知道用qq录制gif图是真方便。(非广告,后面会多用gif图)1 正常组件调用2 全局注册对象调用(不知道是不是叫这个名字)一 首先，我们先封装一个正常组件看看效果。1 首先创建一个最普通的组件/toast/Toast.v
转载
2024-10-22 07:17:04
944阅读
# 实现"vue2 vite axios jsonp"的教程
## 概述
在本文中，我将教你如何在Vue2项目中使用Vite构建工具结合Axios库进行Jsonp跨域请求。首先，我们需要了解整个流程，然后按照步骤逐一实现。
## 整体流程
以下是实现"vue2 vite axios jsonp"的整体流程：
| 步骤 | 操作 |
| --- | --- |
| 1 | 创建Vue2项目 |
原创
2024-03-30 04:54:48
145阅读
文章目录? 前言? 一、效果演示? 二、实现思路? 三、实现案例往期内容 ? ? 前言在 Vue + elementUi 开发中，遇到这么一个需求，要实现公告轮播的效果。说实话，一开始是打算通过Javascript去获取并修改对应元素来控制轮播的，但是发现这样子代码比较多，而且性能不是很好。然后…聪明的小温想到了，能不能通过vue的动画过渡，实现公告的滚动效果呢！ 一不做二不休，直接上手，果然是
转载
2024-04-29 19:04:38
1454阅读
前言之前有些过移动端的项目搭建的文章，感觉不写个pc端管理系统老感觉少了点什么，最近公司项目比较多，恰巧要做一个申报系统的后台管理系统，鉴于对vue技术栈比较熟悉，所以考虑还是使用vue技术栈来做；看过一个不错的后台配置模板（vue-element-admin），页面也挺美的，但是还是碍于不想看太多关于这个模板的配置说明，于是又拉出来之前我搭建的简易版的模板，决定重构下，使用自己搭建的后台系统模板
vite打包Vue组件库教学引言在Vue应用程序开发中，有时我们需要将一些常用的UI组件封装成一个独立的组件库，并以可复用的方式提供给其他项目使用。本文将介绍如何使用vite工具快速打包Vue组件库，并提供具体示例代码。1. 准备工作首先，确保您已经安装了Node.js和npm。然后，在命令行中执行以下命令来全局安装vite：npm install -g create-vite这将安装create
原创
2023-07-02 22:26:18
1893阅读
highlight: a11y-light theme: smartblue引言如果我们关注性能优化，会注意到vue项目在打包后，会产生若干js请求文件，如app.js或chunk-vendors.js。 本文将深入探讨Vue项目打包后产生的文件都是什么。注：vue打包后和vue项目直接本地运行后产生的js请求文件一致，为了方便展示，本文采用本地启动项目后产生的文件进行探讨。基础请求文件我们创建一
最终效果如下一、先创建vue2项目1、 可以用vue-cli自己来创建；也可以直接使用我开源常规的vue2后台管理系统模板
以下我以 wocwin-admin-vue2 项目为例修改目录结构，最终如下2、修改vue.config.js文件module.exports = {
// 修改 src 目录 为 examples 目录
pages: {
index: {
entry
转载
2023-12-14 12:58:04
408阅读
一、组件化开发思想
1. 什么是组件化开发
组件化开发指的是：根据封装的思想，把页面上可重用的部分封装为组件，从而方便项目的开发和维护。例如：ibootstrap - Bootstrap 可视化布局系统 所展示的效果，就契合了组件化开发的思想。用户可以通过拖拽组件的方式，快速生成一个页面的布局结构。
2. 组件化开发的好处
前端组件化开发的好处主要体现在以下两方面：
提高了前端代码的复用性和灵活
原创
2023-12-05 01:55:33
689阅读
/ 移动端页码按钮的数量端默认值5。
原创
2024-09-05 10:10:00
182阅读
.vue 脚手架的安装就不多说了，说下其他常见的错误1、安装问题 ：首先我们在安装的时候，有些人会用npm直接安装 有些会用cnpm 安装 但是两个不能共用 不然会报错，为此我吃过不少亏2、文件存放错误：一般src下的assets存放静态资源文件，当时访问时，需要考虑路径的问题。如果存放在static下就不用考虑路径问题，直接以static开头的路径3、端口冲突错误：需要改
目前有两种创建vue项目的方式，vue cli 以及 vue ui一、Vue CLIhttps://cli.vuejs.org/zh/guide/ Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：通过 @vue/cli 实现的交互式的项目脚手架。通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。一个运行时依赖 (@vue/cl
前言：应上级要求，搭建一个公司内部的vue组件库，由于临近我预计的离职时间，所以只将流程梳理实践了一遍。假设组件库名称为ui-library。一、使用vue-cli3创建ui-library项目vue create ui-library创建项目时选择自定义模板，我的配置如下 记得vue版本需要选择2.x。ui-library目录如下 二、在根目录添加vue.conf
转载
2023-12-07 22:15:17
58阅读
基于Vue+ElementUI+vod-js-sdk-v6，完成腾讯云点播视频上传功能最近做的一个项目，需要用到腾讯云点播的视频上传！！写一个尽可能详细的博客供各位参考，欢迎指正； ok，下面进入正题。 首先是需要用到的依赖：ElementUI、vod-js-sdk-v6、axiosnpm i vod-js-sdk-v6
npm i axiosimport vue from 'vue'
impor
一种理想方案首先，无论换算方不方便，我都不想换算，我也不想去操心什么转换系数其次，有些属性或者类选择器我不想进行转换css代码要足够简洁，我只希望看到一种单位，那就是px第一种：lib-flexible+postcss-pxtorem第一种方案是lib-flexible+postcss-pxtorem，在相当长一段时间里，这两个插件搭配都是解决移动端布局的神器，lib-flexible是阿里手淘系
现在的很多应用都流行SPA应用（singe page application) 。
传统的项目大多使用多页面结构，需要切换内容的时候我们往往会进行单个html文件的跳转，这个时候因受到网络、性能的影响，浏览器会出现不定时间的空白界面，用户体验不好。而单页应用则是用户通过某些操作更改地址栏url之后，动态的进行不同模板内容的无刷新切换，用户体验好。而在vue2.0版本后，vue官方推出vue-rou
今天我们要做的就是基于websocket实时人工客服，先来了解一下机制WebSocket 机制WebSocket 是 HTML5 一种新的协议。它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯，它建立在 TCP 之上，同 HTTP 一样通过 TCP 来传输数据，但是它和 HTTP 最大不同是：WebSocket 是一种双向通信协议，在建立连接后，WebSocket 服务
