Vue企业级优雅实战05-框架开发01-登录界面

预览本文的实现效果: # gitee git clone git@gitee.com:cloudyly/dscloudy-admin-single.git # github git clone git@github.com:cloudyly/dscloudy-admin-single.git git checkout 03_LoginPage 经过前面的一系列准备工作,现在终于进入到框架基础功能及组件的正式开发阶段!我会从登录界面到主界面.业务功能一步步迭代开发,在迭代开发过程中逐步实现通用…

Vue企业级优雅实战04-组件开发01-SVG图标组件

(后续的文章公众号会提前一周更新,欢迎关注文末的微信公众号:程序员搞艺术) 预览本文的实现效果: # gitee git clone git@gitee.com:cloudyly/dscloudy-admin-single.git # github git clone git@github.com:cloudyly/dscloudy-admin-single.git git checkout 02_SVGIcon 本文主要描写如何让 Vue 工程支持 SVG 图标,以及如何获取 SVG 图…

Vue企业级优雅实战-00-开篇

从2018.1.开始参与了多个企业的中台建设,这些中台的技术选型几乎都是基于 Spring Cloud 微服务架构 + 基于 Vue 全家桶的前端.我前后端架构及开发我几乎各占一半的精力,在企业级前端开发中有一些心得体会:从使用组件库,到二次封装组件库.命令行加速器,再到业务开发.多个项目中发现有很多可复用或重复的内容,于是今年年初便着手搭建一套基础开发框架. 这套基础开发框架包括了一个中后台的通用功能,如认证授权 (我使用 Spring Security + OAuth2 + JWT,前后端…

Vue企业级优雅实战03-准备工作04-全局设置

本文包括如下几个部分: 初始化环境变量文件 JS 配置文件初始化:如是否开启 Mock 数据.加载本地菜单.URL 请求路径等: 国际化文件初始化:初始化国际化文件的结构: 整合 Element UI: 将 Element UI 添加到工程中: 全局样式初始化:初始化全局样式.通用样式. 1 切换新分支 1.1 查看分支 1. 仅查看本地分支: git branch 本地分支信息: -MacBook-Pro dscloudy-admin-single % git branch …

Vue企业级优雅实战02-准备工作03-提交 GIT 平台

代码管理.版本管理是件老大难的事情,尤其多人开发中的代码冲突.突击功能时面临的 hotfix 等.本文只是简单说说如何将一套代码提交到两个 Git 平台(GitHub.GitEE)上.其他的 Git 操作:如本地 commit.远程 push.pull.开启新分支.分支合并等操作,再后面的文章中都会有操作 —— 每一个功能点我都会开启一个新分支. 1 初始化本地 Git 仓库 1.1 初始化仓库将本地一个目录初始化为本地 git 仓库的命令是: git init 由于咱的工程是通过 vue…

Vue3 企业级优雅实战 - 组件库框架 - 1 搭建 pnpm monorepo

前两篇文章分享了基于 vite3 vue3 的组件库基础工程 vue3-component-library-archetype 和用于快速创建该工程的工具 yyg-cli,但在中大型的企业级项目中,通常会自主搭建这些脚手架或加速器.优雅哥希望每位前端伙伴能知其所以然,故接下来的文章将进入 Vue3 企业级优雅实战系列,整个系列将包括五大部分: 首先会分享如何从 0 开始搭建一套组件库基础工程,即如何从 0 实现 vue3-component-library-archetype. 1 组件库工程…

vue.js2.0实战(1):搭建开发环境及构建项目

Vue.js学习系列: vue.js2.0实战(1):搭建开发环境及构建项目 https://my.oschina.net/brillantzhao/blog/1541638 vue.js2.0实战(2):IDE配置及使用 https://my.oschina.net/brillantzhao/blog/1541702 vue.js2.0实战(3):基础示例 https://my.oschina.net/brillantzhao/blog/1541821 vue.js2.0实战(4):vue-r…

eclipse Tomcat和 MYSQL JAVA web新手开发示例--登录界面连接数据库

登录界面login.jsp 1 <%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "htt…

Vue3 企业级优雅实战 - 组件库框架 - 3 搭建组件库开发环境

前文已经初始化了 workspace-root,从本文开始就需要依次搭建组件库.example.文档.cli.本文内容是搭建组件库的开发环境. 1 packages 目录前面在项目根目录下创建了 packages 目录,该目录存放组件库的所有组件及组件库的入口.该目录中已经创建了两个子目录 foo 和 yyg-demo-ui.这两个目录是干嘛用的呢? 1.1 foo 目录 foo 目录代表一个示例组件,后面咱们会使用该组件来测试组件库在 example 和组件库文档中是否能正常运行.后续要开…

Vue3 企业级优雅实战 - 组件库框架 - 2 初始化 workspace-root

上文已经搭建了 pnpm + monorepo 的基础环境,本文对 workspace-root 进行初始化配置,包括:通用配置文件.公共依赖.ESLint. 1 通用配置文件在项目根目录下添加下面的配置文件. 添加 .editorconfig 编辑器格式配置文件 [*.{js,cjs,ts,jsx,tsx,vue,html,css,scss,md}] indent_style = space indent_size = 2 trim_trailing_whitespace = true…

Vue3 企业级优雅实战 - 组件库框架 - 4 组件库的 CSS 架构

在前一篇文章中分享了搭建组件库的基本开发环境.创建了 foo 组件模块和组件库入口模块,本文分享组件库的样式架构设计. 1 常见的 CSS 架构模式常见的 CSS 架构模式有很多:OOCSS.ACSS.BEM.SMACSS.ITCSS 等,其中 SMACSS 和 ITCSS 很相似.我在企业级项目中最常使用的是简化版的 ITCSS + BEM + ACSS,所以本文首先介绍这三种模式,其他模式大家自己上网查看. 1.1 ACSS ACSS 模式几乎是一个样式属性就对应了一个样式类.这种方式非常…

我的Vue之旅、05 导航栏、登录、注册 (Mobile)

第一期 · 使用 Vue 3.1 + TypeScript + Router + Tailwind.css 构建手机底部导航栏.仿B站的登录.注册页面. 代码仓库 alicepolice/Vue-05 (github.com) 构建项目新建项目导入bootstrap-icons-vue bootstrap-icons-vue - npm (npmjs.com) 导入Tailwind 在 Vue 3 和 Vite 安装 Tailwind CSS - Tailwind CSS 中文文档安装VS…

Vue + ElementUI的电商管理系统实例01 登录表单

效果图: 1.首先来根据Element网站实现布局: <template> <div class="login_container"> <div class="login_box">  <div class="avatar_box"> <img src="../assets/logo.png" alt /> </div>…

转：vue+canvas如何实现b站萌系登录界面

https://juejin.im/post/5ae802a46fb9a07ac55fec04…

Android开发——程序锁的实现（可用于开发钓鱼登录界面）

1. 程序锁原理 1.1 实现效果: 在用户打开一个应用时,若此应用是我们业务内的逻辑拦截目标,那就在开启应用之后,弹出一个输入密码的界面,输入密码正确则进入目标应用.若不输入直接按返回键,则直接返回桌面. 1.2 实现原理: 实时检测栈顶Activity的包名,如果和我们预置的包名相符(可用SQLite数据库对要进行匹配的包名进行信息存储),则新开一个Activity任务栈,将拦截画面置于用户面前.只有在用户输入密码,并且验证成功后,才"放行".本文原创,转载请注明出处:http:/…

国产化即时通信系统开发 -- 实现GGTalk的登录界面（Linux、Ubuntu、UOS、中标麒麟）

距离2013年开源GGTalk以来,7年已经过去了,GGTalk现在有了完整的PC版.安卓版.iOS版(即将发布),以及Xamarin版本. 然而,时代一直在变化,在今天,有个趋势越来越明显,那就是政府系统将逐渐迁移到Linux以及国产化的操作系统和数据库上面来. 所以,GGTalk也将随顺这一必然的趋势,服务端将推出Linux(CentOS)版本,客户端也将支持Linux/Ubuntu.中标麒麟.UOS等国产操作系统. 基于.NET Core,服务端的迁移相对容易:而客户端的迁移则繁琐很多,其…

新书上线：《Spring Boot+Spring Cloud+Vue+Element项目实战：手把手教你开发权限管理系统》，欢迎大家买回去垫椅子垫桌脚

新书上线大家好,笔者的新书<Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统>已上线,此书内容充实.材质优良,乃家中必备垫桌脚垫菜盘之良器,欢迎大家无情购买使用,欢迎大家共同学习交流,欢迎大家提出改进意见. 内容简介: 本书从项目实践出发,手把手.心贴心地带领读者从零开始,一步一步地开发出功能相对完整的权限管理系统,从而深入掌握当前主流的Spring Boot + Spring Cloud + Vue前后端集成开发技术. 全书分为三…

[原创].NET 业务框架开发实战之九 Mapping属性原理和验证规则的实现策略

原文:[原创].NET 业务框架开发实战之九 Mapping属性原理和验证规则的实现策略 .NET 业务框架开发实战之九 Mapping属性原理和验证规则的实现策略前言:之前的讨论一直关注在怎么从DAL中获取数据,以及数据的Mapping问题.实际上,一个业务框架最主要的作用就是简化业务逻辑的编写和开发. 本篇的议题如下: 框架的借鉴综合考虑系列文章链接: [原创].NET 分布式架构开发实战之一故事起源 [原创].NET 分布式架构开发实战之二草稿设计 [原创].NET 分布式架构开…

vue+uni-app商城实战 | 第一篇：【有来小店】微信小程序快速开发接入Spring Cloud OAuth2认证中心完成授权登录

一. 前言本篇通过实战来讲述如何使用uni-app快速进行商城微信小程序的开发以及小程序如何接入后台Spring Cloud微服务. 有来商城 youlai-mall 项目是一套全栈商城系统,技术栈是分布式微服务加上前后端分离模式,所以在本篇项目实战开始之前需要一些往期文章作为基础. 后端 Spring Cloud实战 | 第一篇:Windows搭建Nacos服务 Spring Cloud实战 | 第二篇:Spring Cloud整合Nacos实现注册中心 Spring Cloud实战 | 第…

手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件

DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎Star) 引言 "他在正午.黄昏,在一天里的许多时刻去感受它.记录它,结果也就让我们看到了那么多的不同.他描绘它的角度没变,但它的面目却极大地改变了." 19世纪著名的印象派画家莫奈,喜欢对着同一处景物,分别画出对象在不同时间,不同光线下的色彩变化. 比如不同季节的三株白杨: 比如一天中不…

[原创].NET 业务框架开发实战之十第一阶段总结，深入浅出，水到渠成（后篇）

原文:[原创].NET 业务框架开发实战之十第一阶段总结,深入浅出,水到渠成(后篇) .NET 业务框架开发实战之十第一阶段总结,深入浅出,水到渠成(后篇) 前言:接着上篇来. 系列文章链接: [原创].NET 分布式架构开发实战之一故事起源 [原创].NET 分布式架构开发实战之二草稿设计 [原创].NET 分布式架构开发实战之三数据访问深入一点的思考 [原创].NET 分布式架构开发实战之四构建从理想和实现之间的桥梁(前篇) [原创].NET 分布式架构开发实战五 Framewo…

[原创].NET 业务框架开发实战之八业务层Mapping的选择策略

原文:[原创].NET 业务框架开发实战之八业务层Mapping的选择策略 .NET 业务框架开发实战之八业务层Mapping的选择策略前言:在上一篇文章中提到了mapping,感觉很像在重新实现NHibernate.其实文章的本意是想反映出Richard在思考的时候的一些选择:利用现有的,还是最后自己用别的方式实现.如果一上来就说什么什么好,那太武断了,也很片面,系列文章反复的在强调一点:技术有它的适用场景,没有完美的技术.很多的朋友说本系列在近似的开发一个ORM,其实不是:ORM就是把…

[原创].NET 业务框架开发实战之七业务层初步构想

原文:[原创].NET 业务框架开发实战之七业务层初步构想 .NET 业务框架开发实战之七业务层初步构想前言:本篇主要讲述如何把DAL和BLL衔接起来. 本篇议题如下: 1. DAL和BLL之前的Mapping 2. 如何Mapping 3. 再次构思系列文章链接: [原创].NET 分布式架构开发实战之一故事起源 [原创].NET 分布式架构开发实战之二草稿设计 [原创].NET 分布式架构开发实战之三数据访问深入一点的思考 [原创].NET…

[原创].NET 业务框架开发实战之六 DAL的重构

原文:[原创].NET 业务框架开发实战之六 DAL的重构 .NET 业务框架开发实战之六 DAL的重构前言:其实这个系列还是之前的".NET 分布式架构开发实战 ",之所以改了名字,主要是因为文章的标题带来了不少的歧义:系列文章中本打算开发一个简化业务发的流程的Framework,然后用这个Framework再来实战,开发一个分布式的应用.改了名字.给大家带来了不便,敬请见谅. 本篇的议题如下: 1. 确定DAL的接口的定义. 系列文章链接: [原创].NET 分布式架构开发实战…

Vue框架初识01

摘要 vue简介 vue使用一.Vue简介: 简介: Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手,还便于与第三方库或既有项目整合. Vue是前端三大框架之一(Angular.Vue.React) JS渐进式框架:一个页面小到一个变量,大到整个页面,均可以有vue控制,vue也可以控制整个项目 # 思考:vue如何做到一次引入控制整个项目…

前端开发 vue，angular，react框架对比1

转载自:https://www.cnblogs.com/hubgit/p/6633214.html 首先,我们先了解什么是MVX框架模式? MVX框架模式:MVC+MVP+MVVM 1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分开. View通过Controller来和Model联系,Controller是View和Model的协调者,View和Model不直接联系,基本联系都是单向的. 用户User通过控制器Control…

每天一点点之vue框架开发 - 引入Jquery

1. 安装jquery npm install jquery --save-dev 2.在build/webpack.base.conf.js中添加如下内容 var webpack = require('webpack') plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ], 位置如下: 3.在src/main.js文件中引入jquery import $ from '…

每天一点点之vue框架开发 - 使用vue-router路由

1.安装路由(安装过的跳过此步) // 进入项目根目录 cd frontend // 安装 npm install vue-router --save-dev 2.在入口文件main.js中引入路由 import VueRouter from 'vue-router' 3.在main.js中使用(全局) Vue.use(VueRouter) 4.设置路由在main.js中引入组件 import Home from './components/home/Home' import Footer f…

循序渐进VUE+Element 前端应用开发(12）--- 整合ABP框架的前端登录处理

VUE+Element 前端是一个纯粹的前端处理,前面介绍了很多都是Vue+Element开发的基础,从本章随笔开始,就需要进入深水区了,需要结合ABP框架使用(如果不知道,请自行补习一下我的随笔:ABP框架使用),ABP框架作为后端,是一个非常不错的技术方向,但是前端再使用Asp.NET 进行开发的话,虽然会快捷一点,不过可能显得有点累赘了,因此BS的前端选项采用Vue+Element来做管理(后续可能会视情况加入Vue+AntDesign),CS前端我已经完成了使用Winform+ABP的模…

Eclipse+CXF框架开发Web服务实战

一. 说明采用CXF框架开发webservice. 所用软件及版本如下.  操作系统:Window XP SP3.  JDK:JDK1.6.0_07,http://www.oracle.com/technetwork/java/javase/downloads/index.html.  Tomcat:apache-tomcat-6.0.14.exe,http://tomcat.apache.org/.  IDE:eclipse-jee-juno-SR1-win32.zip,http:/…

【Vue企业级优雅实战05-框架开发01-登录界面】的更多相关文章