搭建公司自己的组件平台

Bootstrap响应式设计模板:专为设计公司打造 Bootstrap是一个开源的前端框架,用于快速开发响应式布局、移动设备优先的web项目。它由Twitter的设计师和开发者创建,并提供了一整套预设的样式和组件,可以轻松地搭建出美观的网页界面。Bootstrap的最新版本是Bootstrap 5,它不仅支持最新的前端技术和工具,还优化了性能和体验。虽然Bootstrap提供了预设的栅格参数,但开发者可能需要根据自己的需求对栅格进行自定义。可以通过覆盖变量来自定义列的总数,或者修改变量来改变列间隔的大小。 阅读详情

组件平台分享

一.组件上传平台sinopia

sinopia不需要些代码只需要你把该配置的东西配置好就行

1.服务器安装node

2.配置软链

ln  -s /../node-v6.10.3-linux-x64/bin/node      /usr/local/bin/node  建立软连接用绝对路劲
ln -s /../node-v6.10.3-linux-x64/bin/npm      /usr/local/bin/npm

3.npm安装sinopia

/root/.config/sinopia/config.yaml 配置文件
storage: /home/{user}/.local/share/sinopia/storage # 库存路径,需要考虑磁盘空间

web: # 自定义web项,即浏览器访问页面


auth:
  htpasswd:
    file: ./htpasswd # 添加用户(npm adduser)后自动创建,保存用户信息,可以初始化用户
    # Maximum amount of users allowed to register, defaults to "+inf".
    # You can set this to -1 to disable registration.
    #max_users: 1000 # 设置为-1不能npm adduser


uplinks: # 可以配置多个上游地址,后面packages中的proxy指定用哪个
  npmjs:
    url: https://registry.npm.taobao.org/ # 更改此上游地址
    # amount of time to wait for repository to respond
    # before giving up and use the local cached copy
    #timeout: 30s # 请求上游地址超时时间

    # maximum time in which data is considered up to date
    #
    # default is 2 minutes, so server won't request the same data from
    # uplink if a similar request was made less than 2 minutes ago
    #maxage: 2m # 包过期时间

    # if two subsequent requests fail, no further requests will be sent to
    # this uplink for five minutes
    #max_fails: 2 # 容许依赖请求最大失败数
    #fail_timeout: 5m # 依赖请求超时时间

packages: # 包的权限管理,$all为所有人,$authenticated为通过验证人
                  # 分布和安装两种权限,值可以特指某几人
  '@*/*': # 跟package.json中的name属性进行匹配
    # scoped packages
    access: $all
    publish: $authenticated

  '*':
    # allow all users (including non-authenticated users) to read and
    # publish all packages
    #
    # you can specify usernames/groupnames (depending on your auth plugin)
    # and three keywords: "$all", "$anonymous", "$authenticated"
    access: $all

    # allow all known users to publish packages
    # (anyone can register by default, remember?)
    publish: $authenticated

    # if package is not available locally, proxy requests to 'npmjs' registry
    proxy: npmjs

# log settings
logs:
  - {type: stdout, format: pretty, level: http}
  #- {type: file, path: sinopia.log, level: info}

listen: 0.0.0.0:4873 # 设置监听地址,0.0.0.0匹配本机地址

/root/.config/sinopia/htpasswd 用户

storage:/usr/local/sinopia/storage 服务器包的存放地址

4.npm安装pm2 pm2托管sinopia进程,保持进程长期开启

5.本地nrm管理npm源

6.开发组件

1.创建目录(统一命名sf<name>)
2.npm init 初始化package.json (版本号是你上传组件的版本号)
3.组件正常开发
类比/Users/zhaozhanhai/Desktop/test/component/sfloadmore
4.登录npm用户
npm login  
Username: sffe  
Password: sffe    
Email: zhanhaizhao@sf-express.com


5.npm publish 发布
 
6.删除发布包
npm unpublish <package> --force
 
7.更新版本
修改package.json version
npm publish

二.组件预览平台
1.使用vuepress


├─ docs
│    |   .vuepress
│        ├─ README.md 入口文件结构
│        └─ .vuepress
│        └─ config.js 配置文件(导航栏,侧边栏)
│        └─ enhanceApp.js Vue 插件,注册全局组件,或者添加额外的路由钩子
│        └─override.styl 主题颜色配置
│        └─components  组件模块
│        └─public 公用模块
│   |    baseComponents
│   	  ├─ base
│               ├─ test1.md 三级侧边栏入口文件
│        ├─ README.md 二级顶部菜单首页
└─ package.json
使用
组件使用的时候 从components下边开始  以-分割
支持vue md双语法

三.niginx部署页面

1安装homebrew
sudo ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安装nginx
安装:brew install nginx

安装目录
/usr/local/webserver/nginx/sbin    查看nginx版本 sudo ./nginx
启动:sudo nginx
停止:sudo nginx -s quit
配置软连接 ln -s /usr/local/nginx/sbin/nginx /usr/local/bin/nginx 
配置nginx:
配置nginx 目录 /usr/local/nginx/conf/nginx.conf
错误日志目录 /usr/local/nginx/logs/error.log
配置文件目录 /usr/local/nginx/conf/nginx.conf

自定义配置文件

user  root; //403的解决方案
worker_processes  8;
server {
        listen       80;
        server_name  localhost;
        root /home/sftcwl/www;
        charset  utf-8;

        #access_log  logs/host.access.log  main;

        location / {
            root /home/sftcwl/www/dataCom;
 	    index index.html;
        }
        location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|js|pdf|txt|svg){
              root /home/sftcwl/www;
          }
        location ~* /dataCom/ {
                root /home/sftcwl/www/;
            }

坑:
1.mac 1024以下的端口需要用 sudo nginx给到root权限
2.nginx: [error] open() "/usr/local/var/run/nginx.pid" failed (2: No such file or directory)  每次关闭nginx会删除nginx.pid 执行nginx -c /usr/local/etc/nginx/nginx.conf 回复
Zemax操作33--5倍激光扩束器 5倍扩束 阅读详情

相关推荐

正版63棋牌源代码游戏+728游戏全套带前端源代码解析

这俩天抽时间仔细看了一下这套项目包含完整的前端、后端及后台管理系统。从上传的截图可以看出,前端基于资源目录,后端采用和,后台管理界面提供数据查询与管理功能。本篇文章将从前端结构、后端接口、数据库设计、常见 BUG 及优化方法等方面逐步拆解,并给出相应的代码示例和实践经验。

aa2031171的博客 3578

好文章——Web应用的组件化开发(二)

转载地址:http://blog.jobbole.com/56170/ 原文出处: 徐飞的博客(@民工精髓V) 管控平台 在上一篇中我们提到了组件化的大致思路,这一篇主要讲述在这么做之后,我们需要哪些外围手段去管控整个开发过程。从各种角度看,面对较大规模前端开发团队,都有必要建立这么一个开发阶段的协作平台。 在这个平台上,我们要做哪些事情呢? 1. HTML片段

垃圾程序员_辉 1260

28377D Bootloader

架构

a6100309120的博客 6012

国产自研开源大数据管理平台DataSophon服务组件安装教程

本文安装DDP服务组件,即hadoop,spark,kafka等大数据组件,进一步体验DataSophon平台提供的其它特性。

Gavin_ke的博客 3743

Redis【实战篇】---- 分布式锁-redission

重入问题:重入问题是指 获得锁的线程可以再次进入到相同的锁的代码块中,可重入锁的意义在于防止死锁,比如HashTable这样的代码中,他的方法都是使用synchronized修饰的,假如他在一个方法内,调用另一个方法,那么此时如果是不可重入的,不就死锁了吗?所以可重入锁他的主要意义是防止死锁,我们的synchronized和Lock锁都是可重入的。不可重试:是指目前的分布式只能尝试一次,我们认为合理的情况是:当线程在获得锁失败后,他应该能再次尝试获得锁。

是微风,是晚霞,是无可替代 1万+

Pyside6+qml+Qtcreator项目实战

PYTHON and QT QUICK - Custom Buttons With QML And JavaScript - [MODERN GUI]-#01

u014627020的博客 919

组件分享之后端组件——Redis一站式管理平台Redis Manager

组件分享之后端组件——Redis一站式管理平台Redis Manager 背景 近期正在探索前端、后端、系统端各类常用组件与工具,对其一些常见的组件进行再次整理一下,形成标准化组件专题,后续该专题将包含各类语言中的一些常用组件。欢迎大家进行持续关注。 组件基本信息 组件:redis-manager 开源协议:Apache-2.0 license 使用说明:https://github.com......

CN華少的博客 1473

Origin画图——获取论文图中数据

有时候需要已发表论文的图的数据,这里使用Origin软件取值,并且可以实现对图形再次画图。 Step 1. 打开origin软件,点击工具,图形数字化工具。 Step 2. 打开要获取数据的图片。拉动红蓝坐标,与图的坐标轴所贴合。 Step 3. 打开要获取数据的图片。拉动红蓝坐标,与图的坐标轴所贴合。 Step 3. 设置参数横轴起始坐标为300-900,纵轴为1.8-2.6. Step 4. 点击第五个手动取点,取出图中数据点。 Step 5. 依次对原图进行取点。点击项目资源查看图。

qq_42278015的博客 5183

推荐10款优秀的组件库(一)

推荐10款优秀的组件库(一)

tuonioooo 2625

高德地图爬虫

高德地图爬虫 工具:Pycharm,win10,Python3.6.4 1.需求分析 这篇爬虫和上一篇百度地图爬虫要求一样,百度地图爬虫我发现有一个auth参数会一直变化,一旦变化则获取的数据是不准确的,所以我上高德地图看了一下,高德地图没有这个反爬机制。但是高德地图大概爬取120个页面就会跳一次验证码,我这里是通过换IP解决这个问题的。 2.数据准备 同样我们需要全国地级市信息,用之前...

123的博客 1万+

Vivado IP核综合失败别慌:除了打补丁,这个TCL命令也能救急(以Video Frame Buffer为例)

本文详细解析了Vivado IP核综合失败的排查方法,特别是针对Video Frame Buffer Read IP的常见问题。从补丁安装到深入分析DCP文件生成机制,再到使用强大的TCL命令`foreach ip_in_proj [get_ips] {compile_c [get_ips $ip_in_proj]}`强制重编译,提供了一套完整的解决方案。帮助开发者快速定位并解决IP核综合失败问题,确保项目顺利进行。

weixin_30892889的博客 424

基于Vue全家桶开发的前端组件管理平台

项目背景 项目背景是外包类建站公司里,设计环节沉淀了大量可复用组件,设计师往往只需要微调组件就拼凑出页面,交付给前端,理论上这些组件在前端也可以复用,但实际上前端每次都要重新实现整个页面,浪费很多人力。 功能需求 这个项目的思路是,将所有组件开发出来,统一录入到一个平台上管理,设计师可以到平台上挑选组件,并实时预览和调整组件,整个过程所见即所得,平台会将调整结果生成一串代码,只要将代码交给前...

weixin_30666753的博客 334

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

从0开始搭建公司后台技术栈,这套架构值得拥有...

来源:ju.outofmemory.cn/entry/351897有点眼晕,以下只是我们会用到的一些语言的合集,而且只是语言层面的一部分,就整个后台技术栈来说,这只是一个开始,从语言开始,...

中生代技术 583

SIMATIC S7-1200, S7-1500 PID 控制[手册]

SIMATIC S7-1200, S7-1500 PID 控制[手册]

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

通俗版讲解:低代码平台是什么,适合谁,以及如何选?

1、看预算每个平台收费模式都不一样,有的是订阅制按年收费,有的是按人头收费,人数越多越贵,比如宜搭按10人来算年费差不多就要5W了。所以挑的时候一定要算好投产比,涉及到定制服务还要考虑运营成本,比如平台升级维护等。2、看使用门槛易用性非常重要,低门槛的平台可以让业务人员和搭建者都更快上手,减少培训成本和时间。但业务复杂度上升时,使用和搭建门槛也必然会更高。比如织信和IVX都不可避免需要IT思维,宜搭更简单直观一些。3、看业务复杂程度业务流程相对简单、标准化程度高,选功能齐全、易扩展的平台就可以了。

weixin_52213728的博客 1329

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

小公司的大数据基础服务集成平台

小李学习后搭了一个三节点的大数据分析平台,集成Hadoop、Hive、HBase、zookeeper等,老板很开心,给小李涨了1000块工资,小李也很开森;12、国内厂商也都在开发相关平台,星环TDH、曙光方舟大数据融合分析平台、Ucloud等等,但是都大几十万,稍微一些定制功能上百万,产品卖的乐此不疲。19、生存与杀熟,cloudera推出社区版,付费不多,要生存,你习惯了CDH,用户量上来了,开始割韭菜。13、这笔钱王老板考虑许久,不能花,招这帮人就是压榨的,必须自己干、苦了干大数据的兄弟们。

百老讲数据 1283

大数据平台常用组件_京东大数据平台进化之路

本文内容来自由msup主办的第七届TOP100summit大会。分享者王哲涵,时任京东离线平台研发团队负责人。2015年加入京东,于大数据平台研发部工作, 负责京东大数据平台的架构与研发工作。导读时下大数据技术趋于成熟与稳定的今天, hadoop相关服务也不再高高在上, 已是作为如同数据库般的作为基础软件设施提供计算与存储服务, 京东大数据平台从无到有, 从量到质, 从微创到革新经历五年的时间, ...

weixin_33230532的博客 206

【Project】基于OpenStack的公司云平台建设与管理方案

openstack+jumpserver项目

Freesia_2350的博客 1420

vue2结合element-ui使用tsx格式实现formily自定义组件

使用vue2结合@formily/element,使用tsx文件格式编写,实现自定义formily组件

m0_73761441的博客 1215

《大数据平台架构指南》阅读思考

1.大数据平台 三大功能:海量数据的存储 、计算、查询 许多大数据团队的运作方式-运维性质:完成CDH或者HDP的搭建 日常维护 组件Bug 集群故障 业务方科普 纠正使用姿势

abcCL6的专栏 198

J2ME移动开发平台搭建篇

<!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--><script type="text/javascript"

zgqtxwd的专栏 2032

使用Bootstrap快速搭建安防监控公司官网

平台提供的可视化编辑器和实时预览让调整布局变得非常直观,无需搭建本地环境就能完成整个网站的开发和上线。我在实际操作中发现,即使没有前端经验,通过简单的描述也能生成可用的基础框架,再逐步完善细节即可。关键页面结构通常包括:首页banner展示核心业务,服务项目分类展示,成功案例板块增强说服力,关于我们建立信任,以及显眼的联系方式入口。栅格系统能轻松实现内容区块的整齐排列,预定义的组件如轮播、卡片等可以直接调用。选择专业感强的模板,替换内容后调整配色方案即可快速上线,大幅降低开发成本和时间。

PearlOwl67的博客 249

openstack云平台构建方案

本文是近期公司有云平台搭建需求,我给出的一个方子。纯粹是纸上谈兵,希望后期我可以亲自部署,此方案才有细化的可能。

海棠花的博客 1774

十大低代码开发平台排行榜,国内低代码有哪些?

本文主要介绍了低代码平台的优劣,并推荐了几个优秀的低代码开发平台,包括织信Informat、活字格和智拓等。这些平台均支持本地私有化部署,并具备丰富的功能,如逻辑实现能力、应用场景与复杂度、前后台能力、系统支持和用户体验等。

weixin_52213728的博客 1377

公司内部openStack环境信息

公司内部openStack环境信息yrzl内部openStack云平台平台访问地址,openStack云平台版本为Juno版本内网地址:  http://192.168.3.5:9090/horizon公网地址:  http://61.132.233.138:9090/horizon云平台系统账号登陆信息:超级管理员账号:    普通租户账号:   1.openStack环境主机节点ip,账号登陆...

weixin_34304013的博客 131

私有部署ELK,搭建自己的日志中心(一)-- 概述

最后一篇不出意外是我们本系统文章的总结。

天草二十六 1034

ArcgisEngine10.2安装包:助力开发者高效搭建GIS开发环境

ArcgisEngine10.2安装包:助力开发者高效搭建GIS开发环境 【下载地址】ArcgisEngine10.2安装包 Arcgis Engine10.2安装包是Esri公司推出的一款强大工具,专为开发者设计,提供丰富的接口支持,助力二次开发与功能扩展。通过此安装包,您可以快速搭建稳定的开发环境,享受便捷的安装体验...

gitblog_06771的博客 1112
上一篇: Vue-cli开发多页面应用
下一篇: 微信公众号获取用户头像
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值