# vue2components-doc

**Repository Path**: null_775_7982/vue2components-doc

## Basic Information

- **Project Name**: vue2components-doc
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-20
- **Last Updated**: 2026-01-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 组件库使用
## npm 安装

使用 npm 的方式安装
```shell
在前端工程的package.json中加入 "ark-comps-share": "^0.1.0"
执行:  
npm install --registry=http://110.83.51.241:62189/repository/npm-group/
```

在公司内网推荐使用
```shell
npm set registry=http://110.83.51.241:62189/repository/npm-group/ （只要执行一次，本地配置修改一次，不用所有的项目都执行一遍）
npm install ark-comps-share
```
## 前端工程引入使用
在 main.js 中写入以下内容：

```shell
import arkCompsShare from 'ark-comps-share';
import 'ark-comps-share/lib/arkCompsShare.css';
Vue.use(arkCompsShare)
```

# 组件开发流程

## npm编译命令
npm run dev 组件工程编译  
npm run build 组件工程打包  
npm run docs:dev 文档工程编译  
npm run docs:build 文档工程打包  
npm version patch 升级组件库版本   
npm run lib 打包成组件   
npm publish 推送

提交git后要记得publish到仓库
```shell
npm adduser -registry http://110.83.51.241:62189/repository/npm-hosted/
admin/lw@2020
npm publish -registry http://110.83.51.241:62189/repository/npm-hosted/
```

##  开发流程
###  组件编写
1. packages目录下新建组件文件夹,例如ark-xx;
2. 在ark-xx目录下新建页面,如ark-xx.vue;
3. **ark-xx.vue文件的name属性必填,以ark开头的驼峰方式,如:arkXx;(重要的事情说三遍!!)**

###  组件样式文件
1. styles 为组件样式目录,styles/index.scss 为样式文件注册入口;
2. 新建ark-xx目录并新建样式文件如:ark-xx/index.scss样式文件,并编写相关样式,注意样式隔壁,命名务必唯一,
3. styles/index.scss中注册ark-xx.scss,如:
```
@import './ark-xx/index.scss';
```

###  组件引入注册
packages/index.js中引入组件,如下:
```
/*导入组件*/
import arkXx from './ark-xx/arkXx.vue';
/*将所有的组件统一放到 components 中*/
const components = {
   // avueView
    arkXx
};
```
###  组件测试

1. src/views/目录下的 testVue.vue 可供测试使用
2. 执行npm run dev 查看组件效果

###  组件推送

1. 开发新组件后推送需要先升级版本号!!!
2. 提交git后要记得publish到仓库
```shell
npm adduser -registry http://110.83.51.241:62189/repository/npm-hosted/
admin/lw@2020
npm publish -registry http://110.83.51.241:62189/repository/npm-hosted/
```

##  组件说明文档编写

1. /docs目录为文档编辑和配置使用
2. /docs/comps目录为组件说明文档.md文件
3. /docs/.vuepress/config/sidebar.js 为组件文档说明侧边菜单栏
4. /docs/.vuepress/components/ 目录为编写组件demo文件,里面所有的编写的.vue文件默认注册为全局通用组件

###  组件说明文档编写步骤
1. comps/目录下写新建如:arkXx.md 文档文件
2. /docs/.vuepress/config/sidebar.js 菜单栏目录写配置菜单路径,title:菜单名字,path:菜单路径(/comps/arkXx,arkXx为comps目录底下的arkXx.md文件名)
```
{
            title: '基础组件',
            collapsable: true, //是否默认展开              
            children: [
                {
                    title: '菜单名称',
                    collapsable: false,
                    path: '/comps/arkXx'

                } 
            ]
        },

```
3. 在.md文件中可以直接写vue代码,可以直接引用自定义组件,请自行查看已有的相关文件内的写法
4. npm run docs:dev 查看文档效果