Yu-package-vue2 NPM

yu的简单组件库

用于简单起步自己的vue2组件库，使用vue-cli脚手架搭建的一个工程

使用说明

运行命令

安装依赖

npm i

运行开发环境

npm run serve

这个命令是用来运行组件库本地开发的

打包组件库

npm run build:comp

这个命令是用来打包组件库的，这个命令会生成一个dist文件夹，里面包含了组件库的打包文件。

运行组件文档开发环境

npm run docs:dev

打包组件文档

npm run docs:build

已经做了的

文档打包配置
- 自动获取指定文件结构下的文档并打包
- 资源路径配置
组件开发配置
- 自动获取组件代码文件夹下的所有组件并打包
- 基础开发环境
- 基础打包配置

组件文档

新增

在docs/componentsDos目录下新增xx组件文档.md即可。
引入组件
- 将需要引入的组件vue代码复制一份到docs/.vuepress/components/btn目录下，参考文档：在 Markdown 中使用 Vue
- 参照btn.md引入组件演示
```
### 使用示例代码
```html
<btn-btn>test btn</btn-btn>
```
```

打包

运行打包命令即可

部署

这里给到nginx部署配置参考，将${your path}替换成安装目录即可

  location /doc {
  	    alias 	${your path}\yu-package-vue2\docs\.vuepress\dist;
  	    index  index.html index.htm;
          try_files $uri $uri/ /index.html;
  }

组件开发

都在components这个文件夹下，目录结构参考后面的说明
- 未配置路由，如需可自行添加

文件结构

├── .eslintrc.js  // eslint 配置文件     
├── .gitignore   // git 忽略文件
├── .temp // vuepress热更新时使用的临时缓存文件，不需要提交
├── babel.config.js
├── components // 组件库，核心代码区域
│   ├── css // 组件库的样式
│   │   ├── btn.scss // 各个组件的样式
│   │   └── index.scss // 组件库总的样式
│   └── lib // 组件库的代码
│       ├── btn // 子组件
│       │   ├── index.js
│       │   └── src
│       │       └── main.vue
│       ├── demo // 子组件
│       │   ├── index.js
│       │   └── src
│       │       └── main.vue
│       └── index.js // 组件库的入口文件
├── docs // vuepress 文档
│   ├── .vuepress
│   │   ├── components // 文档中展示的组件
│   │   │   └── btn
│   │   │       ├── btn.scss
│   │   │       └── btn.vue
│   │   ├── config.js // vuepress 配置文件
│   │   └── public // 静态资源
│   │       └── assets
│   │           └── images
│   │               └── Snipaste_2024-06-08_22-56-17.png
│   ├── componentsDos // vuepress的核心文档文件夹，即每个组件的说明文档
│   │   └── btn.md
│   └── README.md // vuepress 的首页
├── example // 示例代码
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   └── main.js
├── gulpfile.js // gulp 配置文件
├── jsconfig.json // tsconfig.json 的替代品
├── package-lock.json // npm 缓存文件
├── package.json // 项目配置文件
├── public  
│   ├── favicon.ico
│   └── index.html
├── README.md // 项目说明
├── vue.config.js // webpack 配置文件
├── webpack.prod.config.js // 自定义的组件库打包配置文件
└── yarn-error.log // yarn 错误日志

components
- 是组件代码的文件夹，里面有css文件夹和lib文件夹，css文件夹是组件的样式，lib文件夹是组件的代码。
docs
- 是组件文档文件夹，里面有componentsDos文件夹和README.md文件，componentsDos文件夹是每个组件的说明文档，README.md是vuepress的首页。
- docs/.vuepress/components 这里是需要展示的组件文件夹，简单复制components里面的组件过来即可，在md文档中可以直接使用标签vuepress会将该标签渲染出来
- 参考vuepress文档
example
- 用于组件库本地开发调试启动，可不关心

参考文档

webpackV4: https://v4.webpack.docschina.org/concepts/
vuepress: https://v1.vuepress.vuejs.org/zh/config/#%E5%9F%BA%E6%9C%AC%E9%85%8D%E7%BD%AE
sass: https://www.sass.hk/guide/
gulp: https://www.gulpjs.com.cn/docs/api/concepts/

1 year ago

1 year ago