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

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

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

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

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

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企业级优雅实战03-准备工作04-全局设置

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

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 图…

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

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

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 企业级优雅实战 - 组件库框架 - 3 搭建组件库开发环境

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

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

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

如何优雅的使用vue+vux开发app -02

如何优雅的使用vue+vux开发app -02 很明显这又是一个错误的示范,请勿模仿使用动态组件实现保留状态的路由 <!DOCTYPE html> <html> <head> <title>vue-vux</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!--include Vux…

ThinkPHP5+Apicloud+vue商城APP实战

ThinkPHP5+Apicoud+vue商城APP实战目录章节1:项目概述课时1apicloud平台介绍.04:38 课时2知识体系架构介绍.16:10 章节2:apicloud50分钟快速入门教程课时3apicloud环境搭建03:29 课时4创建项目,IDE工具使用篇07:24 课时5apicloud开发工具使用技巧10:57 课时6apicloud打包,发布升级篇08:25 课时7apicloud项目的目录结构分析和技术架构体系21:19 章节3:vue2.0实战案例之高级教程…

学习Vue 入门到实战——学习笔记

闲聊: 自从进了现在的公司,小颖就再没怎么接触vue了,最近不太忙,所以想再学习下vue,就看了看vue相关视频,顺便做个笔记嘻嘻. 视频地址:Vue 入门到实战1.Vue 入门到实战2 学习内容: 什么是vue? 官网回答: Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与现代化的工具链以及各种支持类库结合…

5 weekend01、02、03、04、05、06、07的分布式集群的HA测试 + hdfs--动态增加节点和副本数量管理 + HA的java api访问要点

weekend01.02.03.04.05.06.07的分布式集群的HA测试 1) weekend01.02的hdfs的HA测试 2) weekend03.04的yarn的HA测试 1) weekend01.02的hdfs的HA测试首先,分布式集群都是正常的,且工作的然后呢, 以上是,weekend01(active).weekend02(standby) 当weekend01给kill, 变成weekend01(standby).weekend02(active) 模拟weekend…

WinForm企业级框架实战项目演练

一.课程介绍我们都知道在软件架构方式分为:C/S和B/S两类.这里阿笨不谈论两种软件架构的优劣之分,因为它们各有千秋,用于不同场合.一位伟大的讲师曾经说过一句话:事物存在即合理!录制这堂课程的目的就是专门给想学习和了解WinForm应用程序的童鞋们.虽然当前主流的架构开发的确大多是WEB端和App移动端开发,可能大家都忽略了传统的WinForm桌面应用程序开发的魅力! 如果您对本次分享< WinForm企业级框架实战项目演练 >课程感兴趣的话,那么请跟着阿笨一起玩WinForm吧!阿笨将从自…

【第二版】高仿Android网易云音乐企业级项目实战课程介绍

这是一门付费Android项目课程,我们只做付费课程:同时也感谢大家的支持. 这一节,对本课程做一个简单介绍,以及放一些项目效果图,如果想直接查看项目视频演示,可以直接在腾讯课堂查看[高仿Android网易云音乐企业级项目实战]课程第三节,让大家对该项目有一个整体的认识. 1 前言我们课程学完都不能让你,年薪百万,出任CEO,走上人生巅峰. 2 课程简介这是一门使用Java语言,从0开发一个Android平台,接近企业级的项目(我的云音乐). 课程包含了基础内容,高级内容,项目封装,项目重构…

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

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

负载均衡集群企业级应用实战—LVS

一.负载均衡集群介绍 1.集群 ① 集群(cluster)技术是一种较新的技术,通过集群技术,可以在付出较低成本的情况下获得在性能.可靠性.灵活性方面的相对较高的收益,其任务调度则是集群系统中的核心技术. ② 集群是一组相互独立的.通过高速网络互联的计算机,它们构成了一个组,并以单一系统的模式加以管理.一个客户与集群相互作用时,集群像是一个独立的服务器. ③ 集群组成后,可以利用多个计算机和组合进行海量请求处理(负载均衡),从而获得很高的处理效率,也可以用多个计算机做备份(高可用),使得任何一个…

Vue.js优雅的实现列表清单的操作

一.Vue.js简要说明 Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架.与前端框架Angular一样, Vue.js在设计上采用MVVM模式,当View视图层发生变化时,会自动更新到ViewModel.反之亦然,View与ViewModel之间通过数据双向绑定(data-binding)建立联系,如下图所示 Vue.js通过MVVM模式将视图与数据分成两部分(或者说视图代码与业务逻辑的解耦),因此我们只需关心数据的操作,DOM的视图的更新等一系列…

Vue.js优雅的实现列表清单

一.Vue.js简要说明 Vue.js (读音 /vjuː/) 是一套构建用户界面的渐进式框架.与前端框架Angular一样, Vue.js在设计上采用MVVM模式,当View视图层发生变化时,会自动更新到ViewModel.反之亦然,View与ViewModel之间通过数据双向绑定(data-binding)建立联系,如下图所示 Vue.js通过MVVM模式将视图与数据分成两部分(或者说视图代码与业务逻辑的解耦),因此我们只需关心数据的操作,DOM的视图的更新等一系列事情,Vue会帮我…

Vue公司项目实战步骤

一.无权限,无验证的Vue项目 1.打好HTML+CSS+JS基础,及<Vue 2.0 实战> 2.编写用mock设计的案例: 3.将以上案例的后台用C#改写: 二.带安全验证的Vue项目 1.登陆功能: 2.RBAC功能: 三.全栈方案 1.入门Node.js: 2.入门Express.js等: 3.将后端给为JS:…

包建强的培训课程（7）：iOS企业级开发实战

@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css); @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css); @import url(htt…

项目实战02：LVS 实现负载均衡

目录实现基于LVS负载均衡集群的电商网站架构实战一:LVS的NAT模式实现负载均衡实战二:LVS的DR 模式实现负载均衡实战三:实现80.443端口都可访问服务,且LVS实现持久连接实验四:实现ssl 加密负载均衡集群企业级应用实战-LVS 实现基于LVS负载均衡集群的电商网站架构背景:随着业务的发展,网站的访问量越来越大,网站访问量已经从原来的1000QPS,变为3000QPS,网站已经不堪重负,响应缓慢,面对此场景,单纯靠单台LNMP的架构已经无法承载更多的用户访问,此时需要用…

项目实战：负载均衡集群企业级应用实战—LVS详解

目录一.负载均衡集群介绍二.lvs 的介绍三.LVS负载均衡四种工作模式 1.NAT工作模式 2.DR工作模式 3.TUN工作模式 4.full-nat 工作模式 5.四者的区别四.LVS ipvsadm 命令的使用五.实现LVS持久连接实战一:LVS的NAT模式实现负载均衡实战二:LVS的DR 模式实现负载均衡实战三:实现80.443端口都可访问服务,且LVS实现持久连接回到顶部一.负载均衡集群介绍 1.集群 ① 集群(cluster)技术是一种较新的技术,通过集群技术,可…

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…