vue2-vant2-components
\r\n\r\n## 介绍\r\n本库基于基值 375PX 开发，并依赖了部分 [vant](https://vant-contrib.gitee.io/vant/v2/#/zh-CN) 的功能。\r\n[组件列表直通车](#components) | [指令列表直通车](#directives) | [浏览器适配直通车](#adapter)\r\n\r\n## 浏览器支持\r\nvue2-vant2-components 支持现代浏览器和 Android>=4.0、iOS>=8.0。\r\n\r\n## 安装\r\n使用 “npm” 安装：\r\n```\r\nnpm i vue2-vant2-components -S\r\n```\r\n\r\n使用 “yarn” 或 “pnpm” ：\r\n```bash\r\n# with yarn\r\nyarn add vue2-vant2-components\r\n\r\n# with pnpm\r\npnpm add vue2-vant2-components\r\n```\r\n\r\n## 引入组件\r\n### 方式一. 自动按需引入组件 (推荐)\r\n[babel-plugin-import](https://github.com/umijs/babel-plugin-import) 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。\r\n```js\r\n# 安装插件\r\nnpm i babel-plugin-import -D\r\n```\r\n```js\r\n# 安装插件\r\n// 在.babelrc 中添加配置\r\n// 注意：webpack 1 无需设置 libraryDirectory\r\n{\r\n \"plugins\": [\r\n [\"import\", {\r\n \"libraryName\": \"vue2-vant2-components\",\r\n \"libraryDirectory\": \"lib\",\r\n \"style\": true\r\n }]\r\n ]\r\n}\r\n\r\n// 对于使用 babel7 的用户，可以在 babel.config.js 中配置\r\nmodule.exports = {\r\n plugins: [\r\n ['import', {\r\n libraryName: 'vue2-vant2-components',\r\n libraryDirectory: 'lib',\r\n style: true\r\n }, 'vue2-vant2-components']\r\n ]\r\n};\r\n```\r\n\r\n```js\r\n// 接着你可以在代码中直接引入 vue2-vant2-components 组件\r\n// 插件会自动将代码转化为方式二中的按需引入形式\r\nimport { vvcTable } from 'vue2-vant2-components';\r\n```\r\n\r\n```js\r\n// 然后在main.js中引入公共样式\r\nimport 'vue2-vant2-components/lib/common';\r\n```\r\n\r\n### 方式二. 手动按需引入组件\r\n在不使用插件的情况下，可以手动引入需要的组件。\r\n```js\r\nimport Button from 'vue2-vant2-components/lib/vvc-table';\r\nimport 'vue2-vant2-components/lib/vvc-table/style';\r\n```\r\n\r\n```js\r\n// 然后在main.js中引入公共样式\r\nimport 'vue2-vant2-components/lib/common';\r\n```\r\n\r\n### 方式三. 导入所有组件\r\n```js\r\nimport Vue from 'vue';\r\nimport vvc from 'vue2-vant2-components';\r\nimport 'vue2-vant2-components/lib/index/style.css';\r\n\r\nVue.use(vvc, [options]);\r\n\r\n// 可选配置，也可使用 Vue.prototype.$VVC.[配置名称] = 配置，如：Vue.prototype.$VVC.loadingImage = ''\r\nconst options = {\r\n loadingImage: \"\", // 加载状态图片\r\n finishedImage: \"\", // 完成状态图片\r\n errorImage: \"\", // 错误状态图片\r\n emptyImage: \"\" // 无数据状态图片\r\n}\r\n```\r\n\r\n查看更多有关信息 [链接](https://github.com/317883224/vue2-vant2-components).\r\n\r\n## 组件列表\r\n| 组件 | 说明 | 文档 |\r\n| :--------: | :---------------------------------------------------------------------------: | :-----------------------------------------: |\r\n| Select | 选择器 | [文档](./markdown/select/select.md) |\r\n| Table | 表格组件，与 TabulationCell 不同， 该组件为一列一列的数据，为 table 标签封装 | [文档](./markdown/table/table.md) |\r\n| Tabulation | 表格组件，与 Table 排版不同，该组件为 key: value 和 flex 组合为一行一行的数据 | [文档](./markdown/tabulation/tabulation.md) |\r\n| datePicker | 日期选择器组件 | [文档](./markdown/datePicker/datePicker.md) |\r\n| upload | 上传文件组件 | [文档](./markdown/upload/upload.md) |\r\n| zoomList | 缩放列表组件 | [文档](./markdown/zoomList/zoomList.md) |\r\n\r\n## 指令列表\r\n| 指令 | 说明 | 文档 |\r\n| :-------: | :----------: | :---------------------------------------: |\r\n| loading | 加载状态指令 | [文档](./markdown/loading/loading.md) |\r\n| longpress | 长按指令 | [文档](./markdown/longpress/longpress.md) |\r\n\r\n## 浏览器适配\r\n\r\n### Viewport 布局\r\n\r\nvue2-vant2-components 默认使用 `px` 作为样式单位，如果需要使用 `viewport` 单位 (vw, vh, vmin, vmax)，推荐使用 [postcss-px-to-viewport](https://github.com/evrone/postcss-px-to-viewport) 进行转换。\r\n\r\n[postcss-px-to-viewport](https://github.com/evrone/postcss-px-to-viewport) 是一款 PostCSS 插件，用于将 px 单位转化为 vw/vh 单位。\r\n\r\n#### PostCSS PostCSS 示例配置\r\n\r\n下面提供了一份基本的 PostCSS 示例配置，可以在此配置的基础上根据项目需求进行修改。\r\n\r\n```js\r\n// postcss.config.js\r\nmodule.exports = {\r\n plugins: {\r\n 'postcss-px-to-viewport': {\r\n viewportWidth: 375,\r\n },\r\n },\r\n};\r\n```\r\n\r\n> Tips: 在配置 postcss-loader 时，应避免 ignore node_modules 目录，否则将导致 vue2-vant2-components 样式无法被编译。\r\n\r\n### Rem 布局适配\r\n\r\n如果需要使用 `rem` 单位进行适配，推荐使用以下两个工具：\r\n\r\n- [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位\r\n- [lib-flexible](https://github.com/amfe/lib-flexible) 用于设置 rem 基准值\r\n\r\n#### PostCSS 示例配置\r\n\r\n下面提供了一份基本的 PostCSS 示例配置，可以在此配置的基础上根据项目需求进行修改。\r\n\r\n```js\r\n// postcss.config.js\r\nmodule.exports = {\r\n plugins: {\r\n 'postcss-pxtorem': {\r\n rootValue: 37.5,\r\n propList: ['*'],\r\n },\r\n },\r\n};\r\n```\r\n\r\n> Tips: 在配置 postcss-pxtorem 时，同样应避免 ignore node_modules 目录，否则会导致 vue2-vant2-components 样式无法被编译。\r\n\r\n#### 其他设计稿尺寸\r\n\r\n如果设计稿的尺寸不是 375，而是 750 或其他大小，可以将 `rootValue` 配置调整为:\r\n\r\n```js\r\n// postcss.config.js\r\nmodule.exports = {\r\n plugins: {\r\n // postcss-pxtorem 插件的版本需要 >= 5.0.0\r\n 'postcss-pxtorem': {\r\n rootValue({ file }) {\r\n return file.indexOf('vue2-vant2-components') !== -1 ? 37.5 : 75;\r\n },\r\n propList: ['*'],\r\n },\r\n },\r\n};\r\n```\r\n\r\n## 补充\r\n当出现解析错误时使用：\r\n```js\r\nmodule.exports = {\r\n transpileDependencies: ['vue2-vant2-components'],\r\n}\r\n```\r\n\r\n## LICENSE\r\nvue2-vant2-components is [MIT](https://en.wikipedia.org/wiki/MIT_License) licensed.\r\n\r\n## 引用\r\n[vant](https://vant-contrib.gitee.io/vant/v2/#/zh-CN)","readmeFilename":"README.md"}