weixin_33768481
weixin_33768481

从零开始搭建Vue组件库——VV-UI

前言：

前端组件化是当今热议的话题之一，也是我们在开发单页应用经常会碰到的一个问题，现在我们有了功能非常完善的Element-UI。各个大厂也相继宣布开源XXX-UI。但是也会存在一些问题，比如每个公司可能需要的业务组件不尽相同，或者我们想自己开发一套属于自己的组件库，来增强对组件的可控性。那么我们该如何去做呢？
这里记录一下我从零开始搭建起来的组件库的过程，目前只有简单几个组件，不过我也会慢慢更新维护：VV-UI

1. 环境准备

我们搭建组件库，需要准备一系列环境，首先我们要考虑一下问题：

  1. 脚手架如何搭建

  2. 如何规划目录结构

  3. 如何编写文档

首先，对于脚手架环境的问题，目前已经有非常成熟的vue官方的脚手架，我们拿来用就好了

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

接着我们看第二个问题，如何规划好我们组建的目录结构？首先我们需要有一个目录存放组件，有一个目录存放示例。所以我们要对vue-cli 生成的项目结构做一下改造：

.
...
|-- examples      // 原 src 目录，改成 examples 用作示例展示
|-- packages      // 新增 packages 用于编写存放组件
...
.

这样的话 我们需要再把我们webpack配置文件稍作一下调整，首先是把原先的编译指向src的目录改成examples，其次为了 npm run build 能正常编译 packages 我们也需要为 babel-loader 再增加一个编译目录：

{
   test: /\.js$/,
   loader: 'babel-loader',
   include: [resolve('examples'), resolve('test'), resolve('packages')]
}

这样我们搭建起来一个简易的目录结构。
紧接着我们需要考虑如何编写文档。对于文档的编写，自然是markdown最合适不过了，那么怎么让我们在vue下可以去写 markdown 文档呢？答案当然是 vue-markdown-loader。然后我们按照文档配置了相关的插件信息：

rules: [
   {
     test: /\.md$/,
     loader: 'vue-markdown-loader'
   }
 ]

好了，我们可以开始尝试写文档了，在 example/docs 目录下新建 test.md。

# test
> Hello World

同时创建一个新的路由，指向我们的md文件：

{
  path: '/test',
  name: 'test',
  component: r => require.ensure([], () => r(require('../docs/test.md')))
}

打开我们的浏览器http://localhost:8080/#/test 哈哈 真的成功了。别高兴的太早.... 问题还在后面：我们期望的文档不仅能编译markdown，而且最好能识别demo代码块一方面做演示，一方面可以显示演示代码最好了，就像这样：
从零开始搭建Vue组件库——VV-UI_第1张图片
那我们需要怎么做呢？vue-mark-down 功能肯定不止这些！于是我们继续阅读它的文档，发现其实他就是封装了 markdown-it，支持 options 选项。这样我们就可以为我们的markdown定义独特的标识符，这里我用 demo 标识需要显示代码块的地方，所以我需要配置options 选项 ：

const vueMarkdown = {
  preprocess: (MarkdownIt, source) => {
    MarkdownIt.renderer.rules.table_open = function () {
      return ''
    }
    MarkdownIt.renderer.rules.fence = utils.wrapCustomClass(MarkdownIt.renderer.rules.fence)
    return source
  },
  use: [
    [MarkdownItContainer, 'demo', {
      // 用于校验包含demo的代码块
      validate: params => params.trim().match(/^demo\s*(.*)$/),
      render: function(tokens, idx) {
        
        var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);

        if (tokens[idx].nesting === 1) {
          var desc = tokens[idx + 2].content;
          // 编译成html
          const html = utils.convertHtml(striptags(tokens[idx + 1].content, 'script'))
          // 移除描述，防止被添加到代码块
          tokens[idx + 2].children = [];

          return `
                        
${html}

                        
`;
        }
        return '
\n';
      }
    }]
  ]
}
这里简单的描述一下这段代码是干什么的：首先把内容里面vue片段编译成html，用于显示，另一方面用highlight来高亮代码块。demo-block本身是我们定义好的组件：
这样，我们的 test.md 便可以这么去写了：
从零开始搭建Vue组件库——VV-UI_第2张图片
2. 如何编写组件
环境准备完毕，紧接着要开始编写组件，考虑的是组件库，所以我们竟可能让我们的组件支持全局引入和按需引入，如果全局引入，那么所有的组件需要要注册到Vue component 上，并导出：
const install = function(Vue) {
  if (install.installed) return;
  components.map(component => Vue.component(component.name, component));
};

export default {
  install
};
接着要实现按需加载，我们只需要单个导出组件即可：
import Button from './button/index.js';
import Row from './row/index'
import Col from './col/index'

const components = [
  Button,
  Row,
  Col
];

const install = function(Vue) {
  if (install.installed) return;
  components.map(component => Vue.component(component.name, component));
};

if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

export default {
  install,
  Button,
  Row,
  Col
};
其次，我们还需要考虑一个问题：既然是单页面应用，必然要去解决样式冲突问题，如果组件内使用soped，那么样式就无法从组件内抽离出来，达不到可定制化主题颜色的目的。我们需要一套可以分离处理的样式，可以自行编译，可以相互不污染。这时候css 的BEM规范就显得尤为重要。如果你还不知道什么是BEM 参考： http://www.w3cplus.com/css/css-architecture-1.html。
说到这里，目前对BEM规范支持较好的插件就是postcss了，他允许我们配置BEM之间的连接符和缩写：
{
  "browsers": ["ie > 8", "last 2 versions"],
  "features": {
    "bem": {
      "shortcuts": {
        "component": "b",
        "modifier": "m",
        "descendent": "e"
      },
      "separators": {
        "descendent": "__",
        "modifier": "--"
      }
    }
  }
}
这样我们就可以把样式单独的抽离出来，通过gulp进行打包编译：
gulp.task('compile', function() {
  return gulp.src('./src/*.css')
    .pipe(postcss([salad]))
    .pipe(cssmin())
    .pipe(gulp.dest('./lib'));
});
最后生成我们的样式代码。
好了开始我们的测试：
import VVUI from '../packages/index'
import '../packages/theme-default/lib/index.css'

Vue.use(VVUI)
一切显得那么美好....
优化与不足
     
    
  • 组件导出代码暂不支持自动化生成：比如我们的组件index文件，每次添加组件都需要不断地改写，我们2*
    •  
   
可以尝试进行webpack配置，npm run dev 的时候自动进行组件检测，然后帮我们写好导出代码。
     
    
  • 目录结构划分缺陷：目前所有内容仅支持中文，如果想要做到支持国际化，那么还需要重新调整目录结构。
    •  
    
  • 发布tag： 需要编写脚本支持tag发布
    •  
    
  • 组件太少：文档刚写，组件还不是很多，慢慢去维护，相信会越来越多的组件，做业务的过程中也可以把常用的组件加进去，这样更加方便自己以后的维护和学习
    •  
   
结语：
项目github地址：github
项目演示地址： 演示
欢迎 PR 一起维护，欢迎 Star
关于
作者：monkeyWang
本人主页：monkeyWang
微信公众号：会不定期推送前端技术文章，欢迎关注
从零开始搭建Vue组件库——VV-UI_第3张图片

                    
                

        
你可能感兴趣的:(从零开始搭建Vue组件库——VV-UI)

        

            

                
    
                    
  • vue打包编译【自动删除node_modules下的.cache缓存文件夹】
                        Eternitysy
javascript前端vue.js
                        
    vue项目不断打包编译后，在node_modules目录下的.cache文件夹里的文件就越来越多，手动删除数量巨大，时间太长，下面是自动删除.cache这个文件夹的方法1.先安装依赖包rimraf：npminstallrimraf-g--save-dev2.在package.json文件的scripts部分添加一个脚本命令："scripts":{"clean":"rimrafnode_module
    
                    
    • 
                    
  • 前端实现版本更新自动检测✅
                        水煮白菜王
前端VueJavaScript前端vue.jsjavascript
                        
    作者简介：水煮白菜王，一位资深前端劝退师文章专栏：前端专栏，记录一下平时在博客写作中，总结出的一些开发技巧和知识归纳总结✍。感谢支持目录一、背景二、实现原理2.1逻辑2.2一些好处三、具体实现3.1工程化封装3.2关键方法解析脚本哈希获取：对比逻辑：四、全部代码4.1vue34.2vue2五、注意事项与常见问题5.1可能出现的问题5.2浏览器兼容方案一、背景在现代Web应用中，部署前端版本更新后及
    
                    
    • 
                    
  • 【推荐项目】044-中医门诊管理系统
                        蜗牛 | ICU
推荐项目java前端框架毕设springmybatis
                        
    044-中医门诊管理系统介绍javaspringbootvuejs中医门诊管理系统为了帮助您更清晰地整理中医门诊管理系统的功能，我将按照您提供的角色和功能进行归类和整理。以下是整理后的功能列表：角色划分核心管理员医生药师用户（普通患者）管理端功能（核心管理员）统计用户统计（按注册时间、活跃度等）药物销售统计处方统计咨询统计用户管理用户列表（查看、编辑、删除）用户角色分配用户权限管理医生管理医生列表
    
                    
    • 
                    
  • CSS入门指南：从零开始学习网页开发——（一）简介
                        GIS小白吃
css学习前端
                        
    一、什么是CSS？CSS（CascadingStyleSheets，层叠样式表）是一种用于描述网页的外观和布局的样式表语言。它通过定义网页元素的样式（如颜色、字体、边距等）来与HTML内容分离，提升了网页的可维护性和设计的灵活性。CSS的核心目的是增强网页的表现力。早期的网页仅使用HTML来进行内容的展示，但由于HTML只能描述内容的结构，页面设计和内容变得难以管理。于是，CSS作为一种辅助技术应
    
                    
    • 
                    
  • 【推荐项目】 043-停车管理系统
                        蜗牛 | ICU
推荐项目springbootvue.jsjava前端框架
                        
    043-停车管理系统介绍使用springbootvuejsmysql技术搭建框架。智能停车管理系统描述后端框架：采用SpringBoot与MySQL的强强联合，为系统提供稳健、高效的服务支撑。前端框架：前端选用Vue.js，打造流畅、美观的用户交互界面。管理员功能：用户信息管理：轻松管理用户信息，包括新增、编辑、删除及查询用户。界面清晰，操作便捷，确保用户数据的安全与准确。车位信息管理：实时查看车
    
                    
    • 
                    
  • 四种主要的 API 架构风格：RPC、SOAP、REST、GRAPHQL
                        小马不敲代码
系统设计架构rpcgraphql
                        
    讨论四种主要的API架构风格，比较它们的优缺点，并重点介绍每种情况下最适合的API架构风格。RPCSOAPRESTGRAPHQL两个单独的应用程序需要中介程序才能相互通信，因此，开发人员经常需要搭建桥梁——也就是应用程序编程接口（API），来允许一个系统访问另一个系统的信息或功能。为了快速、大规模地集成不同的应用程序，API使用协议或规范来定义那些通过网络传输的消息的语义和信息。这些规范构成了AP
    
                    
    • 
                    
  • 使用LangChain访问个人数据第一章-简介
                        明志刘明
大模型学习手册langchain
                        
    需要学习提示词工程的同学请看面向开发者的提示词工程需要学习ChatGPT的同学请查看搭建基于ChatGPT的问答系统需要学习LangChian开发的同学请查看基于LangChain开发应用程序正文在大数据时代，数据价值逐渐凸显，打造定制化、个性化服务，个人数据尤为重要。要开发一个具备较强服务能力、能够充分展现个性化智能的应用程序，大模型与个人数据的对齐是一个重要步骤。作为针对大模型开发应运而生的框
    
                    
    • 
                    
  • 使用LangChain访问个人数据第八章-总结
                        明志刘明
大模型学习手册langchain人工智能
                        
    需要学习提示词工程的同学请看面向开发者的提示词工程需要学习ChatGPT的同学请查看搭建基于ChatGPT的问答系统需要学习LangChian开发的同学请查看基于LangChain开发应用程序本部分前几个章节请查看使用LangChain访问个人数据第一章-简介使用LangChain访问个人数据第二章-文档加载使用LangChain访问个人数据第三章-文档分割使用LangChain访问个人数据第四章
    
                    
    • 
                    
  • 基于 LangChain 开发应用程序第一章-简介
                        明志刘明
大模型学习手册langchain人工智能
                        
    需要学习提示词工程的同学请看面向开发者的提示词工程需要学习ChatGPT的同学请查看搭建基于ChatGPT的问答系统本部分章节目录如下：基于LangChain开发应用程序第一章-简介基于LangChain开发应用程序第二章-提示和输出基于LangChain开发应用程序第三章-储存基于LangChain开发应用程序第四章-模型链基于LangChain开发应用程序第五章-基于文档的问答基于LangCh
    
                    
    • 
                    
  • Vue数据响应式原理
                        tuoluoo
vue学习笔记vue.js前端javascript
                        
    前言Vue是一个结构的框架,也就是数据层、视图层、数据-视图层；响应式的原理就是实现当数据更新时，视图层也要相应的更新响应式实现基于发布订阅模式和数据劫持实现1.发布订阅模式：vue使用发布订阅模式来实现数据变动的通知和更新2.数据劫持：vue通过object.defineProperty对数据进行劫持Vue2响应式原理基于js的object.defineProperty()方法，该方法可将传入的
    
                    
    • 
                    
  • vue3新增修改页面，字段来源于其他表
                        大波V5
vue.jselementuijavascript
                        
    确定取消constunitOptions=ref([]);constlistAdspunitAllLocal=async()=>{if(!unitOptions.value.length){constresUnit=awaitlistAdspunitAll();unitOptions.value=resUnit.data;}}//单位生成ID-Name映射字典constidToNameUnitMa
    
                    
    • 
                    
  • linux下 搭建Llama3
                        念去去~
Llama大模型llama语言模型ubuntulinux
                        
    安装软件：Ollama，官方网站：https://ollama.com/可以再下载win、mac和linux版本linux安装命令为：curl-fsSLhttps://ollama.com/install.sh|sh由于我的机器是linux不联网机器，网上没找到下载离线方式，查看https://ollama.com/install.sh脚本发现有这句话："https://ollama.com/do
    
                    
    • 
                    
  • Vue3 基础教程：从入门到实践 (保姆级教学)
                        前段技术人
学习前端vue.jsvue
                        
    一、Vue3简介Vue.js是一款用于构建用户界面的JavaScript框架，而Vue3作为其最新的主要版本，带来了诸多令人瞩目的改进与新特性，使其在前端开发领域备受青睐。（一）Vue3的优势性能提升：Vue3重写了虚拟DOM算法，显著提高了挂载、更新和渲染的速度。在处理大型列表或频繁数据更新的场景时，Vue3的表现更为出色，能够为用户带来更流畅的交互体验。例如，一个包含大量商品信息的电商产品列表
    
                    
    • 
                    
  • SpringBoot + vue 管理系统
                        m0_51274464
面试学习路线阿里巴巴springbootvue.js后端
                        
    SpringBoot+vue管理系统文章目录SpringBoot+vue管理系统1、成品效果展示2、项目准备3、项目开发3.1、部门管理3.1.1、前端核心代码3.1.2、后端代码实现3.2、员工管理3.2.1、前端核心代码3.2.2、后端代码实现3.3、班级管理3.3.1、前端核心代码3.3.2、后端代码实现3.4、学生管理3.4.1、前端核心代码3.4.2、后端代码实现3.5、数据统计3.5.
    
                    
    • 
                    
  • 从零开始学习黑客技术，看这一篇就够了
                        网络安全-旭师兄
学习web安全python密码学网络安全
                        
    基于入门网络安全/黑客打造的：黑客&网络安全入门&进阶学习资源包黑客，对于很多人来说，是一个神秘的代名词，加之影视作品夸张的艺术表现，使得黑客这个本来只专注于技术的群体，散发出亦正亦邪的神秘色彩。黑客源自英文hacker一词，最初曾指热心于计算机技术、水平高超的电脑高手，尤其是程序设计人员，逐渐区分为白帽、灰帽、黑帽等。其中，白帽黑客被称为道德黑客。他们不会非法入侵用户网络，而是通过一系列测试检查
    
                    
    • 
                    
  • 基于Python+Vue开发的电影订票管理系统源码+运行步骤
                        冷琴1996
Python系统设计pythonvue.js开发语言
                        
    项目简介该项目是基于Python+Vue开发的电影订票管理系统（前后端分离），这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Python编程技能，同时锻炼他们的项目设计与开发能力。通过学习基于Python的电影订票管理系统项目，大学生可以在实践中学习和提升自己的能力，为以后的职业发展打下坚实基础。技术学习之路主要功能影片管理：管理系统可以录入、修改和查询影片的基本信息，如
    
                    
    • 
                    
  • Python学习指南：系统化路径 + 避坑建议
                        程之编
Python全栈通关秘籍青少年编程python开发语言人工智能机器学习
                        
    新手小白学习编程就像搭积木——需要从基础开始，逐步构建知识体系。以下是为你量身定制的Python学习路径，帮你告别杂乱，高效入门！一、学习前的关键认知明确目标：想用Python做什么？数据分析（如Excel自动化、可视化）Web开发（如搭建网站）人工智能（如机器学习）自动化办公（如处理文件、邮件）目标不同，后续学习侧重点不同（但基础通用）。避免误区：❌只看教程不写代码✅边学边动手，哪怕抄代码也要运
    
                    
    • 
                    
  • 基于Java+Springboot+Vue开发的口腔牙科诊所预约系统源码+课程设计+代码说明
                        西门吹雪1998
java毕业设计java课程设计javaspringbootvue.js
                        
    项目简介该项目是基于Java+Springboot+Vue开发的口腔牙科诊所预约管理系统（前后端分离），这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能，同时锻炼他们的项目设计与开发能力。通过学习基于Java的口腔预约管理系统项目，大学生可以在实践中学习和提升自己的能力，为以后的职业发展打下坚实基础。技术学习之路在线演示演示地址：https://teeth.
    
                    
    • 
                    
  • 如何更新已经发布的 NPM 组件库
                        校长2008
npmvuenode.js
                        
    要更新已经发布的NPM组件库，可以按照以下步骤操作：更新版本号：每次发布新的版本，都需要更新package.json中的version字段。NPM使用语义化版本规则，即格式为major.minor.patch，例如1.0.1。版本号的更新规则为：major：主版本变更，通常是重大更新或不兼容变更。minor：次版本更新，一般是新增功能，并且向后兼容。patch：补丁版本更新，通常是小的修复和优化。
    
                    
    • 
                    
  • 自助洗车小程序开发方案详解
                        ALLSectorSorft
小程序服务器数据库微信小程序
                        
    自助洗车小程序开发设计详细扩写一、系统架构设计（一）技术栈选型1.前端：微信小程序（原生开发）：直接基于微信官方提供的开发框架，能充分利用微信的原生能力，如小程序的启动速度快、与微信生态的无缝衔接等。开发过程中可使用微信开发者工具进行代码编写、调试和预览，通过WXML（类似HTML）、WXSS（类似CSS）和JavaScript构建用户界面和交互逻辑。例如利用微信原生的组件库，快速搭建出美观且符合
    
                    
    • 
                    
  • 在windows上通过idea搭建doris fe的开发环境（失败案例，很多报错都是因为我是离线环境编译，还是得联网可能会顺利点）
                        fzip
DorisDoris在CentOS7编译
                        
    以下是基于Windows10+CentOS环境通过IntelliJIDEA搭建DorisFE开发环境的完整指南，整合多份部署文档的关键步骤和避坑要点：一、前置环境准备1.准备Linux环境，可以使用CentOS7或者8•操作步骤：更新系统包：yumgroupinstall-y"DevelopmentTools"yuminstall-yautomakebisonflexboost-devellibe
    
                    
    • 
                    
  • vue中为组建添加样式的方式
                        晨枫阳
javascript前端
                        
    在Vue中，可以通过多种方式为view添加样式，并且支持动态绑定样式。以下是几种常见的方式：1.内联样式直接在模板中使用style属性来添加样式。这是一个内联样式的示例2.使用:style动态绑定样式可以通过:style动态绑定样式对象或数组。2.1绑定样式对象这是一个动态绑定样式对象的示例exportdefault{data(){return{styleObject:{color:'red',f
    
                    
    • 
                    
  • 基于PyTorch的深度学习——机器学习3
                        Wis4e
深度学习机器学习pytorch
                        
    激活函数在神经网络中作用有很多，主要作用是给神经网络提供非线性建模能力。如果没有激活函数，那么再多层的神经网络也只能处理线性可分问题。在搭建神经网络时，如何选择激活函数？如果搭建的神经网络层数不多，选择sigmoid、tanh、relu、softmax都可以；而如果搭建的网络层次较多，那就需要小心，选择不当就可导致梯度消失问题。此时一般不宜选择sigmoid、tanh激活函数，因它们的导数都小于1
    
                    
    • 
                    
  • 详解Vue 的 key 机制
                        向贤
前端开发vue.jsjavascript前端
                        
    详解Vue的key机制（从底层原理到实战价值，彻底讲透关键设计）一、Key的本质作用核心定位：虚拟DOM的身份证Vue通过虚拟DOM实现高效渲染，而key是虚拟节点（VNode）的唯一标识符。其作用可拆解为：场景无Key的问题有Key的解决方案列表更新元素复用错乱，导致状态残留（如输入框内容）精准匹配新旧节点，保持状态一致性组件切换相同类型组件实例被复用，生命周期未触发强制销毁旧组件，触发完整生命
    
                    
    • 
                    
  • 公司共享网盘怎么建立
                        
网盘
                        
    公司共享网盘的建立，关键在于明确使用需求、选择合适的网盘服务、搭建统一的文件管理规范、做好权限分级与安全防护。尤其要强调选择合适的网盘服务这一点，如果企业规模较大，且对协同办公的需求强烈，就需要考虑支持多人实时协作、稳定高效的专业网盘。例如采用可以快速部署与灵活扩展的企业网盘方案，不仅能在初期节省大量时间成本，也能保障未来业务扩展不受限制，从而让文档共享与团队协作更加顺畅。一、公司共享网盘的基本概
    
                    
    • 
                    
  • 【从零开始学java】第1章，基础知识入门，小白零基础可看，笔记整理
                        莉莉鸟
java学习
                        
    java基础11注释标志符关键字注释注释并不会被执行，是写给人类看的，书写注释是一个很好的习惯平时写代码一定要注意规范单行注释//多行注释/*注释*/文档注释/**注释*/2标识符关键字abstract：用于声明抽象类或抽象方法。assert：用于调试时进行断言。boolean：表示布尔类型（true或false）。break：跳出当前循环或switch语句。byte：表示字节数据类型。case：
    
                    
    • 
                    
  • vue懒加载
                        CV_CodeMan
jsvuevue.js前端javascript
                        
    Vue懒加载懒加载（LazyLoad）一直是前端的优化方案之一。简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。它的核心思想是：当用户想看页面某个区域时，再加载该区域的数据。这在一定程度上减轻了服务器端的压力，也加快了页面的呈现速度。懒加载多用于图片，因为它属于流量的大头。最典型的懒加载实现方案是先将需要懒加载的图片的src隐藏掉，这样图片就不会下载，然后在图片需要呈现给用户时再加上
    
                    
    • 
                    
  • Vue中vfor循环创建DOM时Key的理解之Vue中的diff算法
                        充气大锤
前端性能优化vue.jsjavascript前端学习笔记算法ecmascript
                        
    在Vue开发过程中vfor遍历数组创建Dom是最常见的方式，在vfor时，标签中有一个key值，key值的作用是啥呢？这就不得不提到Vue中的diff算法。一、什么是diff算法Vue会用虚拟DOM来表述真实DOM，这样的目的是为了计算出DOM的最小的变化从而更加快速的更新真实DOM二、diff算法的计算过程1、遍历老虚拟DOM2、遍历新虚拟DOM3、重新排序这样做会有个问题，就是节点数越多，计算
    
                    
    • 
                    
  • 在vue3中使用Mermaid创建可动态生成的时序图
                        充气大锤
前端组件javascript开发语言前端流程图vuevue.js
                        
    有手就行的：用Mermaid创建自己的时序图一、Mermaid的安装在vue3中使用Mermaid时，需要npm一下npminstallmermaid完事之后这样引用importmermaidfrom'mermaid'引用之后就可以开始整活了二、承载Mermaid的容器Mermaid不同于其他的流程图组件，这玩意用标签来承载数据，所以我们在vue文件中这样创建{{message}}*类名不能错，类
    
                    
    • 
                    
  • Vue懒加载YouTube视频组件指南
                        解银旦Fannie

                        
    Vue懒加载YouTube视频组件指南vue-lazy-youtube-videoVue.jscomponentforlazyloadingYouTubevideos.项目地址:https://gitcode.com/gh_mirrors/vu/vue-lazy-youtube-video项目介绍Vue.js库vue-lazy-youtube-video是一个专门为Vue应用程序设计的组件，旨在优
    
                    
    • 
                                
  • sql统计相同项个数并按名次显示
                                    朱辉辉33
javaoracle
                                    
    现在有如下这样一个表： 
A表 
ID Name time 
------------------------------ 
0001 aaa 2006-11-18 
0002 ccc 2006-11-18 
0003 eee 2006-11-18 
0004 aaa 2006-11-18 
0005 eee 2006-11-18 
0004 aaa 2006-11-18 
0002 ccc 20
    
                                
    • 
                                
  • Android+Jquery Mobile学习系列-目录
                                    白糖_
JQuery Mobile
                                    
    最近在研究学习基于Android的移动应用开发，准备给家里人做一个应用程序用用。向公司手机移动团队咨询了下，觉得使用Android的WebView上手最快，因为WebView等于是一个内置浏览器，可以基于html页面开发，不用去学习Android自带的七七八八的控件。然后加上Jquery mobile的样式渲染和事件等，就能非常方便的做动态应用了。 
  
从现在起，往后一段时间，我打算
    
                                
    • 
                                
  • 如何给线程池命名
                                    daysinsun
线程池
                                    
            在系统运行后，在线程快照里总是看到线程池的名字为pool-xx，这样导致很不好定位，怎么给线程池一个有意义的名字呢。参照ThreadPoolExecutor类的ThreadFactory，自己实现ThreadFactory接口，重写newThread方法即可。参考代码如下： 
    
public class Named
    
                                
    • 
                                
  • IE 中"HTML Parsing Error:Unable to modify the parent container element before the
                                    周凡杨
html解析errorreadyState
                                    
      
错误：  IE   中"HTML Parsing Error:Unable to modify the parent container element before the child element is closed"      
  
  
现象：  同事之间几个IE 测试情况下，有的报这个错，有的不报。经查询资料后，可归纳以下原因。
    
                                
    • 
                                
  • java上传
                                    g21121
java
                                    
    我们在做web项目中通常会遇到上传文件的情况，用struts等框架的会直接用的自带的标签和组件，今天说的是利用servlet来完成上传。 
我们这里利用到commons-fileupload组件，相关jar包可以取apache官网下载：http://commons.apache.org/ 
下面是servlet的代码： 
//定义一个磁盘文件工厂
DiskFileItemFactory fact
    
                                
    • 
                                
  • SpringMVC配置学习
                                    510888780
springmvc
                                    
    spring MVC配置详解 
现在主流的Web MVC框架除了Struts这个主力 外，其次就是Spring MVC了，因此这也是作为一名程序员需要掌握的主流框架，框架选择多了，应对多变的需求和业务时，可实行的方案自然就多了。不过要想灵活运用Spring MVC来应对大多数的Web开发，就必须要掌握它的配置及原理。 
 
　　一、Spring MVC环境搭建：（Spring 2.5.6 + Hi
    
                                
    • 
                                
  • spring mvc-jfreeChart 柱图(1)
                                    布衣凌宇
jfreechart
                                    
    第一步：下载jfreeChart包，注意是jfreeChart文件lib目录下的，jcommon-1.0.23.jar和jfreechart-1.0.19.jar两个包即可； 
第二步：配置web.xml; 
web.xml代码如下 
<servlet> 
    <servlet-name>jfreechart</servlet-nam
    
                                
    • 
                                
  • 我的spring学习笔记13-容器扩展点之PropertyPlaceholderConfigurer
                                    aijuans
Spring3
                                    
    PropertyPlaceholderConfigurer是个bean工厂后置处理器的实现，也就是BeanFactoryPostProcessor接口的一个实现。关于BeanFactoryPostProcessor和BeanPostProcessor类似。我会在其他地方介绍。PropertyPlaceholderConfigurer可以将上下文（配置文件）中的属性值放在另一个单独的标准java P
    
                                
    • 
                                
  • java 线程池使用 Runnable&Callable&Future
                                    antlove
javathreadRunnablecallablefuture
                                    
    1. 创建线程池 
ExecutorService executorService = Executors.newCachedThreadPool(); 
  
2. 执行一次线程，调用Runnable接口实现 
Future<?> future = executorService.submit(new DefaultRunnable());
System.out.prin
    
                                
    • 
                                
  • XML语法元素结构的总结
                                    百合不是茶
xml树结构
                                    
    1.XML介绍1969年   gml (主要目的是要在不同的机器进行通信的数据规范)1985年   sgml  standard generralized markup language1993年   html(www网)1998年  xml   extensible markup language
    
                                
    • 
                                
  • 改变eclipse编码格式
                                    bijian1013
eclipse编码格式
                                    
    1.改变整个工作空间的编码格式 
        改变整个工作空间的编码格式，这样以后新建的文件也是新设置的编码格式。 
        Eclipse->window->preferences->General->workspace-
    
                                
    • 
                                
  • javascript中return的设计缺陷
                                    bijian1013
JavaScriptAngularJS
                                    
    代码1： 
<script>
var gisService = (function(window) 
{ 

    return
    {
        name:function ()
        {
            alert(1);
        }
    };

})(this);

gisService.name();
&l
    
                                
    • 
                                
  • 【持久化框架MyBatis3八】Spring集成MyBatis3
                                    bit1129
Mybatis3
                                    
    pom.xml配置 
Maven的pom中主要包括： 
 
 MyBatis 
 MyBatis-Spring 
 Spring 
 MySQL-Connector-Java 
 Druid 
 applicationContext.xml配置     
<?xml version="1.0" encoding="UTF-8"?>
&
    
                                
    • 
                                
  • java web项目启动时自动加载自定义properties文件
                                    bitray
javaWeb监听器相对路径
                                    
    创建一个类 
public class ContextInitListener implements ServletContextListener 
使得该类成为一个监听器。用于监听整个容器生命周期的，主要是初始化和销毁的。 
 
类创建后要在web.xml配置文件中增加一个简单的监听器配置，即刚才我们定义的类。 
 

    <listener>
        <des
    
                                
    • 
                                
  • 用nginx区分文件大小做出不同响应
                                    ronin47

                                    
    昨晚和前21v的同事聊天，说到我离职后一些技术上的更新。其中有个给某大客户(游戏下载类)的特殊需求设计，因为文件大小差距很大——估计是大版本和补丁的区别——又走的是同一个域名，而squid在响应比较大的文件时，尤其是初次下载的时候，性能比较差，所以拆成两组服务器，squid服务于较小的文件，通过pull方式从peer层获取，nginx服务于较大的文件，通过push方式由peer层分发同步。外部发布
    
                                
    • 
                                
  • java-67-扑克牌的顺子.从扑克牌中随机抽5张牌，判断是不是一个顺子，即这5张牌是不是连续的.2-10为数字本身，A为1，J为11，Q为12，K为13，而大
                                    bylijinnan
java
                                    
    package com.ljn.base;

import java.util.Arrays;
import java.util.Random;

public class ContinuousPoker {

    /**
     * Q67 扑克牌的顺子 从扑克牌中随机抽5张牌，判断是不是一个顺子，即这5张牌是不是连续的。
     * 2-10为数字本身，A为1，J为1
    
                                
    • 
                                
  • 翟鸿燊老师语录
                                    ccii
翟鸿燊
                                    
    一、国学应用智慧TAT之亮剑精神A 
1. 角色就是人格 
    就像你一回家的时候，你一进屋里面，你已经是儿子，是姑娘啦，给老爸老妈倒怀水吧，你还觉得你是老总呢？还拿派呢？就像今天一样，你们往这儿一坐，你们之间是什么，同学，是朋友。 
    还有下属最忌讳的就是领导向他询问情况的时候，什么我不知道，我不清楚，该你知道的你凭什么不知道
    
                                
    • 
                                
  • [光速与宇宙]进行光速飞行的一些问题
                                    comsci
问题
                                    
     
 
     在人类整体进入宇宙时代，即将开展深空宇宙探索之前，我有几个猜想想告诉大家 
    仅仅是猜想。。。未经官方证实 
 
 
     1：要在宇宙中进行光速飞行，必须首先获得宇宙中的航行通行证，而这个航行通行证并不是我们平常认为的那种带钢印的证书，是什么呢？ 下面我来告诉
    
                                
    • 
                                
  • oracle undo解析
                                    cwqcwqmax9
oracle
                                    
    oracle undo解析2012-09-24 09:02:01     我来说两句       作者：虫师收藏    我要投稿 
 
Undo是干嘛用的？         &nb
    
                                
    • 
                                
  • java中各种集合的详细介绍
                                    dashuaifu
java集合
                                    
    一，java中各种集合的关系图 Collection       接口的接口     对象的集合  ├ List           子接口   &n
    
                                
    • 
                                
  • 卸载windows服务的方法
                                    dcj3sjt126com
windowsservice
                                    
    卸载Windows服务的方法 
在Windows中，有一类程序称为服务，在操作系统内核加载完成后就开始加载。这里程序往往运行在操作系统的底层，因此资源占用比较大、执行效率比较高，比较有代表性的就是杀毒软件。但是一旦因为特殊原因不能正确卸载这些程序了，其加载在Windows内的服务就不容易删除了。即便是删除注册表中的相 应项目，虽然不启动了，但是系统中仍然存在此项服务，只是没有加载而已。如果安装其他
    
                                
    • 
                                
  • Warning: The Copy Bundle Resources build phase contains this target's Info.plist
                                    dcj3sjt126com
iosxcode
                                    
           
      
http://developer.apple.com/iphone/library/qa/qa2009/qa1649.html 
Excerpt: 
 
 You are getting this warning because you probably added your Info.plist file to your Copy Bundle 
    
                                
    • 
                                
  • 2014之C++学习笔记（一）
                                    Etwo
C++EtwoEtwoiterator迭代器
                                    
            已经有很长一段时间没有写博客了，可能大家已经淡忘了Etwo这个人的存在，这一年多以来，本人从事了AS的相关开发工作，但最近一段时间，AS在天朝的没落，相信有很多码农也都清楚，现在的页游基本上达到饱和，手机上的游戏基本被unity3D与cocos占据，AS基本没有容身之处。so。。。最近我并不打算直接转型
    
                                
    • 
                                
  • js跨越获取数据问题记录
                                    haifengwuch
jsonpjsonAjax
                                    
    js的跨越问题，普通的ajax无法获取服务器返回的值。 
 
  第一种解决方案，通过getson，后台配合方式，实现。 
Java后台代码： 
protected void doPost(HttpServletRequest req, HttpServletResponse resp) 
throws ServletException, IOException { 
String ca
    
                                
    • 
                                
  • 蓝色jQuery导航条
                                    ini
JavaScripthtmljqueryWebhtml5
                                    
    效果体验：http://keleyi.com/keleyi/phtml/jqtexiao/39.htmHTML文件代码： 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery鼠标悬停上下滑动导航条 - 柯乐义<
    
                                
    • 
                                
  • linux部署jdk,tomcat,mysql
                                    kerryg
jdktomcatlinuxmysql
                                    
    1、安装java环境jdk: 
    一般系统都会默认自带的JDK,但是不太好用，都会卸载了，然后重新安装。 
   1.1）、卸载： 
     （rpm -qa :查询已经安装哪些软件包； 
       rmp -q 软件包：查询指定包是否已
    
                                
    • 
                                
  • DOMContentLoaded VS onload VS onreadystatechange
                                    mutongwu
jqueryjs
                                    
    1. DOMContentLoaded 在页面html、script、style加载完毕即可触发，无需等待所有资源（image/iframe）加载完毕。（IE9+） 
 
2. onload是最早支持的事件，要求所有资源加载完毕触发。 
 
3. onreadystatechange 开始在IE引入，后来其它浏览器也有一定的实现。涉及以下 document , applet, embed, fra
    
                                
    • 
                                
  • sql批量插入数据
                                    qifeifei
批量插入
                                    
    hi， 
  自己在做工程的时候，遇到批量插入数据的数据修复场景。我的思路是在插入前准备一个临时表，临时表的整理就看当时的选择条件了，临时表就是要插入的数据集，最后再批量插入到数据库中。 
   
WITH tempT AS (
SELECT
item_id AS combo_id,
item_id,
now() AS create_date
FROM
a
    
                                
    • 
                                
  • log4j打印日志文件 如何实现相对路径到 项目工程下
                                    thinkfreer
Weblog4j应用服务器日志
                                    
    最近为了实现统计一个网站的访问量，记录用户的登录信息，以方便站长实时了解自己网站的访问情况，选择了Apache 的log4j,但是在选择相对路径那块 卡主了，X度了好多方法(其实大多都是一样的内用，还一个字都不差的)，都没有能解决问题，无奈搞了2天终于解决了，与大家分享一下 
 
 
需求： 
用户登录该网站时，把用户的登录名,ip,时间。统计到一个txt文档里，以方便其他系统调用此txt。项目名
    
                                
    • 
                                
  • linux下mysql-5.6.23.tar.gz安装与配置
                                    笑我痴狂
mysqllinuxunix
                                    
    1.卸载系统默认的mysql 
 
[root@localhost ~]# rpm -qa | grep mysql 
mysql-libs-5.1.66-2.el6_3.x86_64
mysql-devel-5.1.66-2.el6_3.x86_64
mysql-5.1.66-2.el6_3.x86_64
[root@localhost ~]# rpm -e mysql-libs-5.1
    
                                
    •