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)

        

            

                
    
                    
  • Matplotlib 完全指南：从入门到精通
                        老哥不老
pythonmatplotlib
                        
    前言Matplotlib是Python中最基础、最强大的数据可视化库之一。无论你是数据分析师、数据科学家还是研究人员，掌握Matplotlib都是必不可少的技能。本文将带你从零开始学习Matplotlib，帮助你掌握各种图表的绘制方法和高级技巧。目录Matplotlib简介安装与基础配置基础绘图常用图表类型图表样式与美化多子图布局高级技巧实战案例常见问题与解决方案总结与资源Matplotlib简介
    
                    
    • 
                    
  • vue+three.js 加载fbx动画模型
                        资深前端之路
threeJsjavascriptvue.js前端
                        
    嗨，我是小路。今天主要和大家分享的主题是“vue+three.js加载fbx动画模型”。在现代网页开发中，3D图形和动画的应用越来越广泛，从产品展示、虚拟展厅到游戏、教育等领域，三维技术正在不断刷新用户体验。而作为前端开发者，如何将高性能的3D动画无缝集成到Vue项目中？今天从网上找了一个fbx动画模型，然后将其加载出来，并让模型动起来。项目示意图1.FBXLoader加载器定义：主要用来加载fb
    
                    
    • 
                    
  • StreamSaver实现大文件下载解决方案
                        诸葛亮的芭蕉扇
前端vue.jsjavascriptnode.js
                        
    StreamSaver实现大文件下载解决方案web端安装StreamSaver.jsnpminstallstreamsaver#或yarnaddstreamsaver在Vue组件中导入importstreamSaverfrom"streamsaver";//确保导入名称正确完整代码修正下载大文件（带进度）0">下载进度:{{progress}}%importstreamSaverfrom"stre
    
                    
    • 
                    
  • 基于langchain的法律助手工作流的搭建
                        一尾清风915
langchain语言模型python人工智能chatgptai
                        
    该工作流有四个llm组成，包括三个worker以及一个planner。planner用于识别用户输入，将其划分为具体任务并调用相应的worker。worker则根据输入进行工作，三个worker分别用于法条翻译，法条查询以及案例分析。其中planner、lawtrans、lasearch使用的都是gpt4，embedding模型使用的是openai的text-embedding-ada-002。c
    
                    
    • 
                    
  • vue3 - 【完整源码】超详细实现网站 / H5 在线预览 pdf 文件功能，支持缩放、旋转、全屏预览、打印、下载、内容检索、主题色定制、侧边缩略图、页码跳转等等（最好用的pdf预览器，注释详细！）
                        十一猫咪爱养鱼
前端组件与功能(开箱即用)Vue组件与功能(工作经验)vue常见问题解决vue3pdf预览器vue3网页打开pdf文件vue3可自定义界面的pdfvue3pdf网页预览下载vue3项目预览PDF插件组件
                        
    效果图在Vue3.js项目中，实现了快速高效的pdf预览器工具组件，附带详细的使用教程与详细的注释，保证一键复制轻松搞定！详细的注释很容易二次修改，很多实用功能，你也可以自定义界面上的样式、DIY一切！组件源码首先
    
                    
    • 
                    
  • $.post 上传文件_基于 Laravel + Vue 组件实现文件异步上传
                        Clever Liu
$.post上传文件
                        
    我们在上一篇教程中已经演示了如何通过Request请求实例获取各种文本输入数据，但是还有一种输入数据我们没有涉及到，那就是文件上传。我们可以通过Request请求实例提供的file方法获取用户上传文件，并将其保存到指定目录从而完成文件上传，接下来，我们将从前端到后端实现一个完整的用户上传文件功能，包括视图、路由、控制器部分代码。定义文件上传路由首先我们在routes/web.php中定义上传文件涉
    
                    
    • 
                    
  • Ubuntu 22.04 庙算平台训练环境搭建指南
                        笑衬人心。
ubuntulinux深度学习
                        
    本文记录了基于Ubuntu22.04.3LTS的训练环境搭建过程，适用于需要部署庙算推演离线平台的用户，支持GPU（可选）。一、训练环境搭建●硬件要求操作系统：Linux（推荐Ubuntu22.04.3LTS）可选配置：NVIDIAGPU（CUDA支持）1.Linux环境搭建建议双系统安装Ubuntu，具体参考如下教程：参考教程：Windows和Ubuntu双系统的安装和卸载（哔哩哔哩）2.GPU
    
                    
    • 
                    
  • 如何快速开发一个鸿蒙app
                        深山技术宅
鸿蒙harmonyos华为
                        
    快速开发一个鸿蒙（HarmonyOS）App的关键在于利用好官方提供的工具链、模板和资源。以下是一个高效且实用的步骤指南，帮助你快速上手：核心步骤概览：环境搭建创建项目（选择模板）理解核心概念&编写UI实现基础功能预览&调试编译&运行（可选）发布到AppGallery1.环境搭建（基础，必须）操作系统：Windows10(64位)/macOS10.13或更高版本。安装Node.js(>=14.19
    
                    
    • 
                    
  • Vue-pdf预览pdf文件流：让Vue项目中的PDF预览变得简单
                        

                        
    Vue-pdf预览pdf文件流：让Vue项目中的PDF预览变得简单【下载地址】Vue-pdf预览pdf文件流Vue-pdf预览PDF文件流是一个专为Vue项目设计的开源解决方案，旨在帮助开发者轻松实现在线预览PDF文件的功能。通过集成vue-pdf插件，该项目简化了在Vue应用中嵌入和展示PDF文件的过程，支持流式传输，提升用户体验。开发者只需按照简单的步骤将插件引入项目，并根据需求配置文件路径或
    
                    
    • 
                    
  • 我的第一个开源项目：用Python搭建轻量级静态网页服务器—— 零基础也能实现的Web开发初体验
                        

                        
    一、为什么选择静态服务器？极简高效：无需数据库或复杂后端逻辑，适合展示简历、作品集等静态内容学习曲线平缓：是理解HTTP协议和Web服务原理的最佳入门方式资源消耗低：单文件Python脚本即可运行，内存占用小于10MB二、完整开发流程（含代码逐行解析）第一步：创建项目结构PWS/#项目根目录├──static/#静态资源文件夹│├──index.html#主页│├──style.css#样式表│└
    
                    
    • 
                    
  • uniapp中检查版本，提示升级app，安卓下载apk，ios跳转应用商店
                        艾小逗
APPuni-appandroidiosapp升级
                        
    uniapp中检查版本，提示升级app，安卓下载apk，ios跳转应用商店##使用方法：可以在app.vue的onLaunch中调用appUpdate，打开app就会检测onLaunch:function(){appUpdate()},完整代码如下：//APP更新import{queryAppVersion}from"@/apis/app";//比较版本号：v1v2返回1，相等返回0functio
    
                    
    • 
                    
  • 【基础】Golang语言开发环境搭建(Linux主机)
                        锅锅来了
Golang运维开发实战手册linux运维开发golang
                        
    目录1.下载并安装Go语言2.配置环境变量3.验证安装4.配置Go模块5.安装常用开发工具6.配置IDE（可选）7.第一个Go程序在Linux主机上搭建Golang开发环境，你可以按照以下步骤进行操作：1.下载并安装Go语言首先从官网下载Go语言的Linux版本，然后解压到指定目录：#下载Go1.23.10版本（根据需要选择最新稳定版）wgethttps://golang.google.cn/dl
    
                    
    • 
                    
  • nonorepo+turbo实现多项目管理
                        k0933
记录vue.js前端
                        
    运行命令pnpminstallpnpmrundevpnpmrunbuild:pcpnpmrunbuild:h5参考1、Monorepo多项目管理不再难！从零开始：pnpmworkspace手把手教你打造灵活、可扩展的开发环境2、monorepo的理解以及简单实现
    
                    
    • 
                    
  • 人类编程时代即将终结？OpenAI首席产品官预测AI将在今年底全面超越人类程序员
                        
前端javascript
                        
    ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读近日，OpenAI首席产品官KevinWeil在接受采访时表示，人工智能的发展速度远超预期，今年底就有可能在编程领域永久性地超越人类程序员。这一观点立即引发了行业热议，也让程序员们对未来产生了深刻的思考。人工智能的进展速度远超想象在与VarunMayya和TanmayBhat共同主持的YouTube节目《O
    
                    
    • 
                    
  • Python大数据分析&人工智能教程 - Django-Celery异步处理（深入解析与实战案例）
                        AI_DL_CODE
python数据分析DjangoCelery异步处理Celery
                        
    文章目录1.概念介绍1.1Django框架概述1.2Celery异步任务队列1.3AMQP协议与消息路由2.环境搭建2.1安装Django和Celery2.2配置Redis作为消息代理3.Celery架构与工作原理3.1Celery组件介绍3.2任务生命周期3.3任务调度与执行3.3.1定时任务3.3.2异步任务调用3.3.3任务结果查询4.Django与Celery集成4.1创建Celery实例
    
                    
    • 
                    
  • lg kv510 java_LG KV510:手机界面图
                        

                        
    0LGKV510:手机界面图2012-12-1116:35{"info":{"setname":"LGKV510:手机界面图","imgsum_bk":13,"imgsum":13,"lmodify":"2012-12-1116:35:36","prevue":"","channelid":"","reporter":"","source":"","dutyeditor":"","prev":{"
    
                    
    • 
                    
  • 免费文件管理 智能转换GC-Prevue：PDF 转 Word 多种格式 一键完成
                        文哥工具箱2
开源软件电脑软件工程
                        
    前言在现代办公环境中，高效的数据处理和文档管理是提高工作效率的关键。GC-Prevue是一款专为Windows系统设计的办公辅助软件，软件下载地址安装包它通过一系列实用的功能，帮助用户更高效地处理和管理文档，提升整体办公效率。软件介绍GC-Prevue是一款集成了多种办公辅助功能的软件，旨在帮助用户更便捷地处理文档、表格和演示文稿。它支持多种文件格式，包括PDF、Word、Excel和PowerP
    
                    
    • 
                    
  • DMdsc搭建部署过程
                        初禾木
达梦数据库数据库
                        
    DMdsc搭建部署过程环境准备：下列机器事先安装好达梦服务，不用初始化库环境说明：节点一：CentOS7-01：192.168.100.101节点二：CentOS7-02：192.168.100.102关机配置共享磁盘：（使用虚拟机需要在虚拟机路径下xxx.vmx文件中加入disk.locking=“FALSE”）第一台添加磁盘选择创建新磁盘，20G大小差不多，立即分配所有，选择单个存储文件，下一
    
                    
    • 
                    
  • DM8 DSC共享集群搭建部署
                        LeeWen2020
达梦
                        
    DMDSC共享集群属于达梦数据库集群架构产品之一，类似于OracleRAC架构。一、环境说明主机规划：IPAddrDBVersionOSVersion节点1192.168.15.11（外网）192.168.25.11（内网）DMV81-1-72-20.04.03-119959-ENTDSCVeriosn:V2.0中标麒麟6节点2192.168.15.12（外网）192.168.25.12（内网）D
    
                    
    • 
                    
  • Vue 中的 this.$set() 使用详解(一文搞懂)
                        前端页面仔
vue.js前端javascriptreact.js前端框架开发语言ecmascript
                        
    在Vue.js开发中，this.$set()是一个解决响应性问题的关键工具。本文将从基础使用到高级场景，全面解析这个方法的使用技巧和最佳实践。为什么需要this.$set()？——响应性原理的核心问题Vue的响应性系统无法检测对象属性的添加或删除，以及数组索引访问的变化。这是因为Vue2使用Object.defineProperty()实现响应性，它存在以下限制：//对象属性添加问题constob
    
                    
    • 
                    
  • Vue3 工程化实战
                        jay丿
vue.jsjavascripttypescript前端
                        
    Vue3工程化实战引言：构建工具的演进与选择在前端工程化领域，构建工具的选择直接影响开发效率与项目性能。随着Vue3的普及，构建工具生态也发生了显著变化：传统vue-cli逐渐进入维护模式，而新一代构建工具Vite凭借其卓越性能成为官方推荐方案。本文将系统对比两种创建方式，并深入解析基于Vite的Vue3工程化实践。一、传统方案：基于vue-cli创建Vue3工程1.1创建流程#检查版本（需≥4.
    
                    
    • 
                    
  • LeRobot环境搭建与安装（简洁版）
                        贾全
LeRobot系列教程机器人人工智能机器学习ai
                        
    一、引言在上一篇文章（LeRobot入门：开启AI机器人开发之旅）中，我们全面了解了LeRobot的基本概念、核心优势和应用场景。现在，是时候动手实践了！本文将详细指导你完成LeRobot开发环境的搭建，确保你能够顺利开始LeRobot的学习和开发之旅。为了保证易读性，对文章进行了大幅精简，如果需要更加详细的介绍，可以查看详解篇：《LeRobot开发环境搭建详解》，二、准备工作创建专用虚拟环境虚拟
    
                    
    • 
                    
  • 单片机开发全攻略：从零开始，迈向嵌入式开发高手之路
                        DTcode7
学习提升单片机mongodb嵌入式硬件
                        
    单片机开发全攻略：从零开始，迈向嵌入式开发高手之路一、单片机开发基础1.1单片机概述1.2开发环境搭建1.3编程语言与框架二、实战案例：LED闪烁2.1硬件准备2.2代码示例2.3解释三、高级应用：温度监控系统3.1硬件扩展3.2代码实现3.3解释四、开发技巧与问题排查4.1优化内存使用4.2问题排查思路4.3调试工具五、相关项目积分资源5.1在线学习资源5.2社区与论坛5.3开源项目结语与讨论在
    
                    
    • 
                    
  • Python 爬虫实战：抓取哔哩哔哩收藏夹视频（API 逆向 + 视频分类整理）
                        西攻城狮北
python爬虫音视频
                        
    引言哔哩哔哩（B站）作为国内知名的视频分享平台，拥有丰富多样的视频资源和活跃的用户社区。对于视频创作者、数据分析人员或爬虫学习者来说，抓取B站收藏夹中的视频数据，不仅能帮助我们更好地了解用户喜好和视频内容，还能为创作和研究提供有力支持。本文将深入浅出地讲解如何通过Python爬虫实现抓取哔哩哔哩收藏夹视频，并对其进行分类整理，涵盖从环境搭建、API逆向分析到数据处理与存储等关键步骤，旨在为读者提供
    
                    
    • 
                    
  • 2024全新版视频短剧SAAS系统/影视短剧小程序/短剧APP小程序源码
                        酷讯网络_240870160
酷讯部落格小程序
                        
    2024最新版视频短剧SAAS系统源码影视短剧小程序源码附完整搭建教程1.依旧采用saas版本2.目前支持微信小程序和公众号h53.fenxiao商等级自定义价格配置4.二级fenxiao功能5.vip会员功能6.强大的卡密兑换（vip卡密，积分卡密，经销商卡密）7.多个云存储平台配置，自己的视频可自由选择存储平台8.支持批量导入9.支持接口采集![在这里插入图片描述](https://img-b
    
                    
    • 
                    
  • LVS 负载均衡群集
                        2301_80329775
Linux系统管理lvs负载均衡android
                        
    前言在前面已经学习了使用Nginx、LVS做负载均衡群集，它们都具有各自的特点，本章将要介绍另一款比较流行的群集调度工具Haproxy。首先介绍负载均衡常用调度算法，然后介绍Haproxy搭建Web群集的方法，最后介绍Haproxy的参数优化和日志配置。一。案例分析1.案例概述Haproxy是目前比较流行的一种群集调度工具，同类群集调度工具有很多，如LVS和Nginx。相比较而言，LVS性能最好，
    
                    
    • 
                    
  • 清华大学全面JAVA编程课程设计
                        

                        
    本文还有配套的精品资源，点击获取简介：清华大学设计的JAVA编程课程旨在为初学者和有基础的学习者提供全面的教育材料。课程涵盖JAVA编程的核心概念、技术、语法以及面向对象编程思想等，通过系统的讲解和实践操作，使学生能够深入理解JAVA语言，并在实际开发中运用所学知识。课程内容包括JAVA简介、环境搭建、基础语法、面向对象编程、数组与集合框架、异常处理、字符串与IO流、多线程编程、JAVA反射与注解
    
                    
    • 
                    
  • 从零开始：网页设计与制作基础全攻略
                        

                        
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、HTML——网页大厦的基石二、CSS——网页的美妆大师三、过渡和动画——让网页动起来四、原型设计与开发工具——设计师的左膀右臂五、案例分析——排雷避坑六、完整项目开发流程——步步为营前言在网页设计与制作的奇妙世界里，每一个页面都是设计师思想与技术碰撞的结晶。今天，咱们就来唠唠这其中的门道，不管你是初出茅庐的新手，还是想
    
                    
    • 
                    
  • vue3中slot（插槽）的详细使用
                        会飞的鱼先生
vue.js前端javascript
                        
    在Vue3中，slot（插槽）是一种强大的组件内容分发机制，它允许父组件向子组件传递内容，从而使组件的使用更加灵活。以下是关于Vue3中slot的详细介绍一、默认插槽这是最基本的插槽形式。子组件中使用定义一个插槽，父组件可以将内容放置在子组件标签对之间来填充这个插槽。子组件代码示例childTest.vue父组件代码示例parentTest.vue1111importchildTestfrom'.
    
                    
    • 
                    
  • Vue部署Nginx之后，后台请求404
                        zhou_Tian
VueNginxnginxvue.js运维
                        
    部署到Nginx后，配置在vue中的针对某些请求（比如后端请求）的代理会失效（表现为这部分请求会404错误，但是项目css等静态资源都能正常访问），这时需要对Nginx配置相应的请求代理。比如我们Vue项目的vue.config.js配置如下：期望能将/api/为前缀的请求全都代理到http://10.3.0.145:8008/，本地以开发模式运行一切正常，但发布到Nginx后这个代理好像就失效了
    
                    
    • 
                                
  • 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
    
                                
    •