# vue相关开源

vue-admin-beautiful

vue3.0,vue3,vue3.x,vue.js,后台管理，github开源admin中最优秀的vue3.0集成框架之一，它是国内首个基于vue3.0 的开源admin项目，同时支持电脑，手机，平板，🔥🔥🔥vue3.0+antdv分支使用vue3.x开发，master分支使用的是vue2.x+element-ui开发

# 功能特性

国内首个vue3+antdv开源admin框架项目；
支持PC、手机端、平板；
vue3.0-antdv分支使用vue3.x开发；
master分支使用vue2.x开发；
支持多主题、多布局切换；
提供超过50余项全局精细化配置；

# xgplayer

xgplayer

由字节跳动西瓜视频开源的带解析器、能节省流量的 HTML5 视频播放器。可以作为 H5 组件、Vue、React 组件单独使用。
它根据组件化的原则设计了一个独立的、可分离的 UI 组件。
更重要的是，它不仅在 UI 层具有灵活性，而且在功能上也很大胆：它摆脱了视频加载、缓冲和格式支持。
在播放器端加载视频、解析视频、转换格式，让不支持分段播放的 MP4 动态支持，这样就无须转换源视频的格式，服务器端也无其他开销。

# ant-design-vue

ant-design-vue

An enterprise-class UI components based on Ant Design and Vue.

# 前后端分离的人力资源管理系统vhr

vhr

该项目采用 SpringBoot + Vue 架构，这两个都是近些年很流行的框架。该项目涉及的场景很多，可作为全栈工程师的入门实践

# 前后端分离的后台管理系统-eladmin

eladmin

项目基于 Spring Boot 2.1.0 、 Jpa、 Spring Security、redis、Vue的前后端分离的后台管理系统，项目采用分模块开发方式，权限控制采用 RBAC，支持数据字典与数据权限管理，支持一键生成前后端代码，支持动态路由

# 跨端开发框架-Hippy

Hippy

A cross platform framework designed for Web developer

# 搭建自己的技术文档库-VuePress

VuePress

Vue 官方出品的静态网站生成器

# 静态文件路径问题

const path = require('path');

module.exports = {
  title: "祎家人",
  description: "一起进步",
  configureWebpack: {
    resolve: {
      alias: {
      '@htring': path.join(__dirname, '../assets'),
      }
    }
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13

【../assets】是相对config.js文件的路径，引用时：则可

![p](~@htring/tool/WebStorm/2020-10-20_093105.jpg)

# 侧边栏根据文档中的h1|h2显示

提示

不准加children属性

# vuepress支持图片放大

借助插件@vuepress/plugin-medium-zoom

Install

yarn add -D @vuepress/plugin-medium-zoom
# OR npm install -D @vuepress/plugin-medium-zoom

1
2

Usage

Simple:

module.exports = {
  plugins: ['@vuepress/medium-zoom']
}

1
2
3

With options:

// .vuepress/config.js
module.exports = {
  plugins: [
    [
      '@vuepress/medium-zoom',
      {
        // selector: '.my-wrapper .my-img',
        delay: 1000,
        options: {
          margin: 24,
          background: '#BADA55',
          scrollOffset: 0,
        },
      },
    ],
  ],
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Options
- selector
  - Type: string
  - Default: .theme-default-content :not(a) > img
    Note that .theme-default-content is the class name of <Content /> component in default theme.
    支持点击缩放的图片元素的选择器，只有符合该选择器的图片才能被缩放。
- options
  - Type: object
  - Default: undefined

# options

The options enable the customization of the zoom. They are defined as an object with the following properties:

Property	Type	Default	Description
margin	number	0	The space outside the zoomed image
background	string	"#fff"	The background of the overlay
scrollOffset	number	40	The number of pixels to scroll to close the zoom
container	`string/HTMLElement/object`	null	The viewport to render the zoom in
template	`string/HTMLTemplateElement`	null	The template element to display on zoom

mediumZoom('[data-zoomable]', {
  margin: 24,
  background: '#BADA55',
  scrollOffset: 0,
  container: '#zoom-container',
  template: '#zoom-template',
})

1
2
3
4
5
6
7

# Motrix

Motrix

桌面下载工具，支持下载 HTTP、FTP、BT、磁力链、百度网盘等资源。
界面简洁易用，采用 Vue + VueX + Element 的技术架构适合学习桌面应用开发

# 聊天室项目genal-chat

genal-chat

阿童木聊天室 nestjs+vue全栈聊天室前后端分离 typescript一把梭

# 单元测试项目vue-unit-test-with-jest

vue-unit-test-with-jest

列出了 Vue 开发时大多需要测试的环节，并附有测试代码及说明文档。现在前端开发的技术越来越多，但是我们只是注意到了开发阶段并没有做好对应的单元测试步骤，我们可以通过这个项目学习如何针对 Vue 项目做单元测试。

# H5

是作者的个人项目，功能是可视化编辑、生成手机 H5 页面的单页应用 WebApp。该项目是一个全栈项目，具有前后端完整服务。并且项目结构清晰。后端服务具有控制器，模型，路由，前端服务具有组件，并且使用 Vuex 做状态管理，麻雀虽小五脏俱全

# vue-sui-demo

vue-sui-demo

用vue 和 SUI-Mobile 写了一个移动端demo，用来反馈学习vue的成果

# 超优秀 Vue+ElementUI 桌面端一站式框架MyUI

文档

npm i element-ui @xdh/my -S

<template>
  <div>
    <Button type="primary">Button</Button>
    <my-panel title="容器标题" icon="el-icon-menu">
      默认风格
      <template v-slot:footer>底部</template>
    </my-panel>
  </div>
</template>

<script>
  import {Button} from 'element-ui'
  import {MyPanel} from '$ui'
  export default {
    components: {
      Button,
      MyPanel
    }
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 超棒 vue+myui 企业级中后台项目模板MyWeb

# 克隆项目
git clone https://gitee.com/newgateway/my-web.git

# 进入目录
cd my-web

# 安装依赖
npm install

# 开发运行
npm run dev

1
2
3
4
5
6
7
8
9
10
11

# 轻量级Vue图片上传插件——Vue-core-image-Upload

https://github.com/Vanthink-UED/vue-core-image-upload

npm install vue-core-image-upload --save