# yu-package-vue2 **Repository Path**: surfingYu/yu-package-vue2 ## Basic Information - **Project Name**: yu-package-vue2 - **Description**: 用于简单起步自己的vue2组件库，使用vue-cli脚手架搭建的一个工程 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-06-10 - **Last Updated**: 2024-06-12 ## Categories & Tags **Categories**: Uncategorized **Tags**: vue2, vue2组件库搭建 ## README # yu的简单组件库 用于简单起步自己的vue2组件库，使用vue-cli脚手架搭建的一个工程 ## 使用说明 ### 运行命令 **安装依赖** ```shell npm i ``` **运行开发环境** ```shell npm run serve ``` 这个命令是用来运行组件库本地开发的 **打包组件库** ```shell npm run build:comp ``` 这个命令是用来打包组件库的，这个命令会生成一个dist文件夹，里面包含了组件库的打包文件。 **运行组件文档开发环境** ```shell npm run docs:dev ``` **打包组件文档** ```shell npm run docs:build ``` ### 已经做了的 - 文档打包配置 - 自动获取指定文件结构下的文档并打包 - 资源路径配置 - 组件开发配置 - 自动获取组件代码文件夹下的所有组件并打包 - 基础开发环境 - 基础打包配置 ### 组件文档 **新增** - 在`docs/componentsDos`目录下新增`xx组件文档.md`即可。 - 引入组件 - 将需要引入的组件vue代码复制一份到`docs/.vuepress/components/btn`目录下，参考文档：[在 Markdown 中使用 Vue](https://v1.vuepress.vuejs.org/zh/guide/using-vue.html) - 参照btn.md引入组件演示 ````makefile ### 使用示例代码 ```html test 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/