Showing preview only (3,464K chars total). Download the full file or copy to clipboard to get everything.
Repository: airyland/vux
Branch: v2
Commit: d66ec01d2a76
Files: 971
Total size: 3.1 MB
Directory structure:
gitextract_8ntehtvf/
├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .github/
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE.md
│ └── PULL_REQUEST_TEMPLATE.md
├── .gitignore
├── .npmignore
├── .travis.yml
├── LICENSE
├── README.md
├── build/
│ ├── build-components.js
│ ├── build-docs.js
│ ├── build-main.js
│ ├── build-styles.js
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-doc.js
│ ├── document.js
│ ├── fetch-github.js
│ ├── less.js
│ ├── pre-publish.js
│ ├── simulate.sh
│ ├── umd-helper.js
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── vux-config.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ ├── webpack.prod.conf.js
│ └── webpack.test.conf.js
├── circle.yml
├── config/
│ ├── dev.env.js
│ ├── index.js
│ ├── prod.env.js
│ └── test.env.js
├── docs/
│ ├── 404.md
│ ├── about/
│ │ └── version.md
│ ├── compile.js
│ ├── component-contributors.js
│ ├── en/
│ │ ├── .gitkeep
│ │ ├── README.md
│ │ ├── about/
│ │ │ ├── before-using-vux.md
│ │ │ ├── contributors.vue
│ │ │ ├── showcase.md
│ │ │ └── thanks.md
│ │ ├── contribution/
│ │ │ ├── donate.md
│ │ │ ├── issue.md
│ │ │ ├── pr.md
│ │ │ └── vux-development.md
│ │ ├── css/
│ │ │ ├── 1px.md
│ │ │ └── close.md
│ │ ├── css.md
│ │ ├── development/
│ │ │ ├── i18n.md
│ │ │ ├── remove-click-delay-fastclick.md
│ │ │ ├── router.md
│ │ │ ├── theme.md
│ │ │ ├── typescript.md
│ │ │ ├── vue-ajax.md
│ │ │ ├── vue-global-method.md
│ │ │ ├── vue-google-analytics.md
│ │ │ ├── vue-loader-autoprefix.md
│ │ │ ├── vue-loader-disable-eslint.md
│ │ │ ├── vue-router-page-transition.md
│ │ │ ├── vue-show-loading.md
│ │ │ ├── vue-webpack-code-splitting-async.md
│ │ │ ├── vue-webpack-env.md
│ │ │ └── vux-nuxt-ssr.md
│ │ ├── directives/
│ │ │ └── v-transfer-dom.md
│ │ ├── faq/
│ │ │ ├── $t-is-not-defined.md
│ │ │ ├── Uncaught-SyntaxError-Unexpected-token-export.md
│ │ │ ├── can-vux-used-in-weapp.md
│ │ │ ├── cannot-resolve-inline-desc.md
│ │ │ ├── difference-between-vux-template-and-webpack-template.md
│ │ │ ├── document-framework.md
│ │ │ ├── does-vux-support-weex.md
│ │ │ ├── dupicate-style.md
│ │ │ ├── is-vux-wechat-official-project.md
│ │ │ ├── vux-build-issue.md
│ │ │ ├── vux-server-render-support.md
│ │ │ ├── what-is-vux-virtual-component.md
│ │ │ ├── why-cannot-i-import-all-components.md
│ │ │ ├── why-cannot-i-use-vux-with-cdn.md
│ │ │ ├── why-close-my-issue.md
│ │ │ ├── why-delete-my-issue-comment.md
│ │ │ ├── why-use-vue-file-for-distribution.md
│ │ │ ├── why-use-x-prefix-for-components.md
│ │ │ ├── why-using-vux-loader.md
│ │ │ └── will-vux-stop-maintaining.md
│ │ ├── install/
│ │ │ ├── biolerplate.md
│ │ │ ├── manual-usage.md
│ │ │ ├── npm.md
│ │ │ ├── umd.md
│ │ │ ├── upgrade-to-vux2.md
│ │ │ └── usage.md
│ │ ├── lab/
│ │ │ └── index.md
│ │ ├── production/
│ │ │ └── inline-manifest.md
│ │ ├── tools/
│ │ │ ├── base64.md
│ │ │ ├── cookie.md
│ │ │ ├── date.md
│ │ │ ├── debounce-throttle.md
│ │ │ ├── md5.md
│ │ │ ├── number.md
│ │ │ ├── querystring.md
│ │ │ └── string.md
│ │ ├── umd.md
│ │ ├── upgrade-to-2.md
│ │ ├── vux-loader/
│ │ │ ├── about.md
│ │ │ ├── how-vux-loader-works.md
│ │ │ ├── install.md
│ │ │ └── plugins.md
│ │ ├── vux-loader.md
│ │ └── wechat/
│ │ ├── other.md
│ │ ├── vue-wechat-jssdk.md
│ │ └── wechat-document-title.md
│ ├── examples/
│ │ ├── loading.html
│ │ ├── umd_component_include_all.html
│ │ ├── umd_component_include_single.html
│ │ ├── umd_plugin_include_all.html
│ │ └── umd_plugin_include_single.html
│ ├── i18n.js
│ ├── index.html
│ ├── package.json
│ ├── ream.config.js
│ ├── server.js
│ ├── src/
│ │ ├── App.vue
│ │ ├── algolia-search.vue
│ │ ├── app.css
│ │ ├── component.vue
│ │ ├── index.js
│ │ ├── summary.js
│ │ ├── tool-routes-en.json
│ │ └── tool-routes-zh-CN.json
│ ├── watch.js
│ └── zh-CN/
│ ├── README.md
│ ├── about/
│ │ ├── before-using-vux.md
│ │ ├── contributors.vue
│ │ ├── showcase.md
│ │ └── thanks.md
│ ├── contribution/
│ │ ├── donate.md
│ │ ├── issue.md
│ │ ├── pr.md
│ │ └── vux-development.md
│ ├── css/
│ │ ├── 1px.md
│ │ └── close.md
│ ├── css.md
│ ├── development/
│ │ ├── i18n.md
│ │ ├── remove-click-delay-fastclick.md
│ │ ├── router.md
│ │ ├── theme.md
│ │ ├── typescript.md
│ │ ├── vue-ajax.md
│ │ ├── vue-global-method.md
│ │ ├── vue-google-analytics.md
│ │ ├── vue-loader-autoprefix.md
│ │ ├── vue-loader-disable-eslint.md
│ │ ├── vue-router-page-transition.md
│ │ ├── vue-show-loading.md
│ │ ├── vue-webpack-code-splitting-async.md
│ │ ├── vue-webpack-env.md
│ │ └── vux-nuxt-ssr.md
│ ├── directives/
│ │ └── v-transfer-dom.md
│ ├── faq/
│ │ ├── $t-is-not-defined.md
│ │ ├── Uncaught-SyntaxError-Unexpected-token-export.md
│ │ ├── can-vux-used-in-weapp.md
│ │ ├── cannot-resolve-inline-desc.md
│ │ ├── difference-between-vux-template-and-webpack-template.md
│ │ ├── document-framework.md
│ │ ├── does-vux-support-weex.md
│ │ ├── dupicate-style.md
│ │ ├── is-vux-wechat-official-project.md
│ │ ├── vux-build-issue.md
│ │ ├── vux-server-render-support.md
│ │ ├── what-is-vux-virtual-component.md
│ │ ├── why-cannot-i-import-all-components.md
│ │ ├── why-cannot-i-use-vux-with-cdn.md
│ │ ├── why-close-my-issue.md
│ │ ├── why-delete-my-issue-comment.md
│ │ ├── why-use-vue-file-for-distribution.md
│ │ ├── why-use-x-prefix-for-components.md
│ │ ├── why-using-vux-loader.md
│ │ └── will-vux-stop-maintaining.md
│ ├── install/
│ │ ├── biolerplate.md
│ │ ├── manual-usage.md
│ │ ├── npm.md
│ │ ├── umd.md
│ │ ├── upgrade-to-vux2.md
│ │ └── usage.md
│ ├── lab/
│ │ └── index.md
│ ├── production/
│ │ └── inline-manifest.md
│ ├── tools/
│ │ ├── base64.md
│ │ ├── cookie.md
│ │ ├── date.md
│ │ ├── debounce-throttle.md
│ │ ├── md5.md
│ │ ├── number.md
│ │ ├── querystring.md
│ │ └── string.md
│ ├── umd.md
│ ├── upgrade-to-2.md
│ ├── vux-loader/
│ │ ├── about.md
│ │ ├── how-vux-loader-works.md
│ │ ├── install.md
│ │ └── plugins.md
│ ├── vux-loader.md
│ └── wechat/
│ ├── other.md
│ ├── vue-wechat-jssdk.md
│ └── wechat-document-title.md
├── index.html
├── index.js
├── package.json
├── packages/
│ ├── loader/
│ │ ├── README.md
│ │ ├── libs/
│ │ │ ├── get-i18n-block.js
│ │ │ ├── parse-i18n-function.js
│ │ │ └── replace-i18n-for-script.js
│ │ ├── package.json
│ │ ├── parse.js
│ │ ├── plugins/
│ │ │ ├── duplicate-style/
│ │ │ │ └── index.js
│ │ │ └── html-build-callback/
│ │ │ └── index.js
│ │ ├── src/
│ │ │ ├── after-less-loader.js
│ │ │ ├── before-template-compiler-loader.js
│ │ │ ├── i18n-loader.js
│ │ │ ├── index.js
│ │ │ ├── js-loader.js
│ │ │ ├── libs/
│ │ │ │ ├── babel-transform-imports/
│ │ │ │ │ ├── .babelrc
│ │ │ │ │ ├── .gitignore
│ │ │ │ │ ├── README.md
│ │ │ │ │ ├── index.js
│ │ │ │ │ ├── package.json
│ │ │ │ │ └── test/
│ │ │ │ │ ├── invalidTransform.js
│ │ │ │ │ ├── tests.js
│ │ │ │ │ └── transform.js
│ │ │ │ ├── get-less-variables.js
│ │ │ │ ├── getTag.js
│ │ │ │ ├── import-parser-v2.js
│ │ │ │ ├── import-parser.js
│ │ │ │ ├── parse-demo-code.js
│ │ │ │ ├── parse-virtual-component.js
│ │ │ │ ├── parse-x-icon.js
│ │ │ │ ├── report.js
│ │ │ │ └── stripe-attributes.js
│ │ │ ├── noop-loader.js
│ │ │ ├── script-loader.js
│ │ │ ├── style-loader.js
│ │ │ └── template-loader.js
│ │ └── test/
│ │ ├── fixtures/
│ │ │ ├── basic.vue
│ │ │ ├── css-modules.vue
│ │ │ ├── es2015.vue
│ │ │ ├── extend.vue
│ │ │ ├── extract-css.vue
│ │ │ ├── inject.js
│ │ │ ├── inject.vue
│ │ │ ├── media-query.vue
│ │ │ ├── postcss.vue
│ │ │ ├── pre.vue
│ │ │ ├── resolve.vue
│ │ │ ├── scoped-css.vue
│ │ │ ├── script-import.js
│ │ │ ├── script-import.vue
│ │ │ ├── service.js
│ │ │ ├── style-import-scoped.css
│ │ │ ├── style-import.css
│ │ │ ├── style-import.vue
│ │ │ ├── template-import.pug
│ │ │ └── template-import.vue
│ │ ├── test.js
│ │ └── vux-fixtures/
│ │ ├── less-theme-001.less
│ │ ├── less-theme-002.less
│ │ ├── less-theme-basic.less
│ │ ├── less-theme-basic.vue
│ │ ├── less-theme-import.less
│ │ ├── option-vux-dir.vue
│ │ ├── script-parser-fn.vue
│ │ ├── style-parser-basic.vue
│ │ ├── template-feature-switch-basic.vue
│ │ └── template-parser-fn.vue
│ └── vue-cli-3-example/
│ ├── .browserslistrc
│ ├── .editorconfig
│ ├── .eslintrc.js
│ ├── .gitignore
│ ├── README.md
│ ├── babel.config.js
│ ├── package.json
│ ├── postcss.config.js
│ ├── public/
│ │ └── index.html
│ ├── src/
│ │ ├── App.vue
│ │ ├── components/
│ │ │ ├── HelloWorld.js
│ │ │ └── HelloWorld.vue
│ │ ├── main.js
│ │ ├── router.js
│ │ ├── store.js
│ │ ├── theme.less
│ │ └── views/
│ │ ├── About.vue
│ │ └── Home.vue
│ └── vue.config.js
├── src/
│ ├── App.vue
│ ├── components/
│ │ ├── actionsheet/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── agree/
│ │ │ ├── index.vue
│ │ │ └── test.js
│ │ ├── alert/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── badge/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── blur/
│ │ │ ├── blur.js
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── box/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── button-tab/
│ │ │ ├── button-tab-item.vue
│ │ │ ├── button-tab.vue
│ │ │ ├── index.js
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── calendar/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── card/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── cell/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ ├── props.js
│ │ │ ├── test/
│ │ │ │ └── wrapper.vue
│ │ │ └── test.js
│ │ ├── cell-box/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── cell-form-preview/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── check-icon/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── checker/
│ │ │ ├── checker-item.vue
│ │ │ ├── checker.vue
│ │ │ ├── index.js
│ │ │ └── metas.yml
│ │ ├── checklist/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ ├── object-filter.js
│ │ │ └── test.js
│ │ ├── clocker/
│ │ │ ├── clocker.js
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── color-picker/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── confirm/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── countdown/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── countup/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── datetime/
│ │ │ ├── datetimepicker.js
│ │ │ ├── format.js
│ │ │ ├── index.vue
│ │ │ ├── makeData.js
│ │ │ ├── metas.yml
│ │ │ ├── style.less
│ │ │ ├── test.js
│ │ │ └── util.js
│ │ ├── datetime-range/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── datetime-view/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── dev-tip/
│ │ │ └── index.vue
│ │ ├── divider/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── drawer/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── flexbox/
│ │ │ ├── flexbox-item.vue
│ │ │ ├── flexbox.vue
│ │ │ ├── index.js
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── flow/
│ │ │ ├── flow-line.vue
│ │ │ ├── flow-state.vue
│ │ │ ├── flow.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── form-preview/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── fullpage/
│ │ │ ├── DemoBasic.vue
│ │ │ ├── index.vue
│ │ │ └── lib.js
│ │ ├── grid/
│ │ │ ├── grid-item.vue
│ │ │ ├── grid.vue
│ │ │ ├── index.js
│ │ │ └── metas.yml
│ │ ├── group/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── group-title/
│ │ │ ├── index.vue
│ │ │ └── test.js
│ │ ├── icon/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── inline-calendar/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ ├── props.js
│ │ │ ├── test.js
│ │ │ └── util.js
│ │ ├── inline-desc/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── inline-loading/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── inline-x-number/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── inline-x-switch/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── style.less
│ │ ├── load-more/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── loading/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── map.json
│ │ ├── marquee/
│ │ │ ├── marquee-item.vue
│ │ │ ├── marquee.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── masker/
│ │ │ ├── converter.js
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── metas.yml
│ │ ├── msg/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── number-roller/
│ │ │ ├── index.vue
│ │ │ └── lib.js
│ │ ├── orientation/
│ │ │ ├── index.js
│ │ │ └── orientation.js
│ │ ├── panel/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── picker/
│ │ │ ├── animate.js
│ │ │ ├── chain.js
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ ├── scroller.css
│ │ │ ├── scroller.js
│ │ │ ├── test.js
│ │ │ └── util.js
│ │ ├── popover/
│ │ │ ├── DemoIndex.vue
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── popup/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ ├── popup.js
│ │ │ └── test.js
│ │ ├── popup-header/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── popup-picker/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── popup-radio/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── previewer/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── qrcode/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── radio/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ ├── props.js
│ │ │ └── test.js
│ │ ├── range/
│ │ │ ├── index.vue
│ │ │ ├── lib/
│ │ │ │ ├── classes.js
│ │ │ │ ├── closest.js
│ │ │ │ ├── delegate.js
│ │ │ │ ├── emitter.js
│ │ │ │ ├── event.js
│ │ │ │ ├── events.js
│ │ │ │ ├── matches-selector.js
│ │ │ │ ├── mouse.js
│ │ │ │ └── query.js
│ │ │ ├── metas.yml
│ │ │ ├── powerange.js
│ │ │ ├── powerange.less
│ │ │ └── utils.js
│ │ ├── rater/
│ │ │ ├── index.vue
│ │ │ └── metas.yml
│ │ ├── scroller/
│ │ │ ├── index.vue
│ │ │ └── metas.yml
│ │ ├── search/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── selector/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── shake/
│ │ │ └── index.vue
│ │ ├── spinner/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ ├── requestAnimationFrame.js
│ │ │ └── spinner.js
│ │ ├── step/
│ │ │ ├── index.js
│ │ │ ├── metas.yml
│ │ │ ├── step-item.vue
│ │ │ └── step.vue
│ │ ├── sticky/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── sticky.js
│ │ ├── swipeout/
│ │ │ ├── index.js
│ │ │ ├── metas.yml
│ │ │ ├── swipeout-button.vue
│ │ │ ├── swipeout-item.vue
│ │ │ └── swipeout.vue
│ │ ├── swiper/
│ │ │ ├── index.js
│ │ │ ├── metas.yml
│ │ │ ├── swiper-item.vue
│ │ │ ├── swiper.js
│ │ │ └── swiper.vue
│ │ ├── tab/
│ │ │ ├── index.js
│ │ │ ├── metas.yml
│ │ │ ├── tab-item.vue
│ │ │ └── tab.vue
│ │ ├── tabbar/
│ │ │ ├── index.js
│ │ │ ├── metas.yml
│ │ │ ├── tabbar-item.vue
│ │ │ └── tabbar.vue
│ │ ├── timeline/
│ │ │ ├── index.js
│ │ │ ├── metas.yml
│ │ │ ├── timeline-item.vue
│ │ │ └── timeline.vue
│ │ ├── tip/
│ │ │ └── index.vue
│ │ ├── toast/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── uploader/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── utils.js
│ │ ├── v-chart/
│ │ │ ├── metas.yml
│ │ │ ├── mixin.js
│ │ │ ├── util.js
│ │ │ ├── v-area.vue
│ │ │ ├── v-axis.vue
│ │ │ ├── v-bar.vue
│ │ │ ├── v-chart.vue
│ │ │ ├── v-guide.vue
│ │ │ ├── v-legend.vue
│ │ │ ├── v-line.vue
│ │ │ ├── v-pie.vue
│ │ │ ├── v-point.vue
│ │ │ ├── v-scale.vue
│ │ │ └── v-tooltip.vue
│ │ ├── video/
│ │ │ ├── index.vue
│ │ │ ├── zy.media.css
│ │ │ └── zy.media.js
│ │ ├── view-box/
│ │ │ ├── index.vue
│ │ │ └── metas.yml
│ │ ├── wechat-emotion/
│ │ │ ├── index.vue
│ │ │ └── metas.yml
│ │ ├── week-calendar/
│ │ │ └── index.vue
│ │ ├── wepay-input/
│ │ │ └── index.vue
│ │ ├── x-address/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── x-button/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── x-circle/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── x-dialog/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── x-form/
│ │ │ ├── field.vue
│ │ │ ├── form.vue
│ │ │ ├── index.js
│ │ │ └── metas.yml
│ │ ├── x-header/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── x-hr/
│ │ │ └── index.vue
│ │ ├── x-icon/
│ │ │ └── metas.yml
│ │ ├── x-img/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── x-input/
│ │ │ ├── fixtures/
│ │ │ │ └── Mask.vue
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── x-number/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── x-progress/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── x-switch/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── x-table/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ └── x-textarea/
│ │ ├── index.vue
│ │ ├── metas.yml
│ │ └── test.js
│ ├── datas/
│ │ ├── china_address.json
│ │ ├── china_address_v1.json
│ │ ├── china_address_v2.json
│ │ ├── china_address_v3.json
│ │ ├── china_address_v4.json
│ │ └── vux_component_list.json
│ ├── demo_list.json
│ ├── demos/
│ │ ├── Actionsheet.vue
│ │ ├── Agree.vue
│ │ ├── Alert.vue
│ │ ├── AppTest.vue
│ │ ├── Badge.vue
│ │ ├── Blur.vue
│ │ ├── ButtonTab.vue
│ │ ├── Calendar.vue
│ │ ├── Card.vue
│ │ ├── Cell.vue
│ │ ├── CellBox.vue
│ │ ├── CellFormPreview.vue
│ │ ├── Center.vue
│ │ ├── CheckIcon.vue
│ │ ├── Checker.vue
│ │ ├── Checklist.vue
│ │ ├── Clocker.vue
│ │ ├── Close.vue
│ │ ├── ColorPicker.vue
│ │ ├── Comment.vue
│ │ ├── Confirm.vue
│ │ ├── Countdown.vue
│ │ ├── Countup.vue
│ │ ├── Datetime.vue
│ │ ├── DatetimeRange.vue
│ │ ├── DatetimeView.vue
│ │ ├── Demo.vue
│ │ ├── DemoList.vue
│ │ ├── Device.vue
│ │ ├── Divider.vue
│ │ ├── Donate.vue
│ │ ├── Drawer.vue
│ │ ├── Flexbox.vue
│ │ ├── Flow.vue
│ │ ├── FormPreview.vue
│ │ ├── FormatTime.vue
│ │ ├── Grid.vue
│ │ ├── GridComponent.vue
│ │ ├── GridNumber.vue
│ │ ├── Group.vue
│ │ ├── Home.vue
│ │ ├── Icon.vue
│ │ ├── IconLoading.vue
│ │ ├── Inline-calendar-start-date.vue
│ │ ├── InlineCalendar.vue
│ │ ├── InlineCalendarEachDaySlot.vue
│ │ ├── InlineCalendarMulti.vue
│ │ ├── InlineLoading.vue
│ │ ├── InlineXNumber.vue
│ │ ├── InlineXSwitch.vue
│ │ ├── Issue1211.vue
│ │ ├── Issue189.vue
│ │ ├── Issue2365.vue
│ │ ├── Issue2960.vue
│ │ ├── Issue461.vue
│ │ ├── Issue471.vue
│ │ ├── Issue598.vue
│ │ ├── Issue624.vue
│ │ ├── Issue649.vue
│ │ ├── Issue702.vue
│ │ ├── Issue833.vue
│ │ ├── Issue865.vue
│ │ ├── Line.vue
│ │ ├── LoadMore.vue
│ │ ├── Loading.vue
│ │ ├── Marquee.vue
│ │ ├── Masker.vue
│ │ ├── Msg.vue
│ │ ├── NotFoundComponent.vue
│ │ ├── NumberRoller.vue
│ │ ├── OnePx.vue
│ │ ├── Panel.vue
│ │ ├── Picker.vue
│ │ ├── Popover.vue
│ │ ├── Popup.vue
│ │ ├── PopupHeader.vue
│ │ ├── PopupPicker.vue
│ │ ├── PopupRadio.vue
│ │ ├── Previewer.vue
│ │ ├── Pulldown.vue
│ │ ├── PulldownPullup.vue
│ │ ├── Pullup.vue
│ │ ├── Qrcode.vue
│ │ ├── Querystring.vue
│ │ ├── Radio.vue
│ │ ├── Range.vue
│ │ ├── Rater.vue
│ │ ├── Reddot.vue
│ │ ├── Scroller.vue
│ │ ├── ScrollerFull.vue
│ │ ├── ScrollerHeader.vue
│ │ ├── ScrollerSwiper.vue
│ │ ├── Search.vue
│ │ ├── SearchStatic.vue
│ │ ├── Selector.vue
│ │ ├── Shake.vue
│ │ ├── Spinner.vue
│ │ ├── Step.vue
│ │ ├── Sticky.vue
│ │ ├── Swipeout.vue
│ │ ├── Swiper.vue
│ │ ├── Tab.vue
│ │ ├── Tabbar.vue
│ │ ├── TabbarIcon.vue
│ │ ├── TabbarLink.vue
│ │ ├── TabbarSimple.vue
│ │ ├── Test.vue
│ │ ├── Thanks.vue
│ │ ├── Timeline.vue
│ │ ├── Toast.vue
│ │ ├── ToggleText.vue
│ │ ├── Uploader.vue
│ │ ├── ViewBox.vue
│ │ ├── Wechat.vue
│ │ ├── WechatEmotion.vue
│ │ ├── WeekCalendar.vue
│ │ ├── WepayInput.vue
│ │ ├── XAddress.vue
│ │ ├── XButton.vue
│ │ ├── XCircle.vue
│ │ ├── XDialog.vue
│ │ ├── XForm.vue
│ │ ├── XHeader.vue
│ │ ├── XHr.vue
│ │ ├── XIcon.vue
│ │ ├── XImg.vue
│ │ ├── XImgPopup.vue
│ │ ├── XImgScroller.vue
│ │ ├── XInput.vue
│ │ ├── XNumber.vue
│ │ ├── XProgress.vue
│ │ ├── XSwitch.vue
│ │ ├── XTable.vue
│ │ ├── XTextarea.vue
│ │ ├── countdown/
│ │ │ ├── basic.vue
│ │ │ └── manually.vue
│ │ ├── style.css
│ │ ├── v-chart/
│ │ │ ├── area_basic.vue
│ │ │ ├── area_compare.json
│ │ │ ├── area_compare.vue
│ │ │ ├── area_empty.json
│ │ │ ├── area_empty.vue
│ │ │ ├── area_gradient.vue
│ │ │ ├── area_negative.vue
│ │ │ ├── area_stack.vue
│ │ │ ├── bar_basic.vue
│ │ │ ├── bar_percent.vue
│ │ │ ├── bar_series.vue
│ │ │ ├── bar_stack.vue
│ │ │ ├── line_basic.vue
│ │ │ ├── line_color.json
│ │ │ ├── line_color.vue
│ │ │ ├── line_gradient.vue
│ │ │ ├── line_realtime.vue
│ │ │ ├── line_smooth_with_dot.vue
│ │ │ ├── line_with_dot.vue
│ │ │ ├── pie_annular.vue
│ │ │ ├── pie_basic.vue
│ │ │ ├── point.json
│ │ │ ├── point.vue
│ │ │ └── prevent_render.vue
│ │ └── x-circle/
│ │ ├── basic.vue
│ │ └── gradient.vue
│ ├── directives/
│ │ ├── click-outside/
│ │ │ └── index.js
│ │ ├── inview/
│ │ │ ├── index.js
│ │ │ └── inview.js
│ │ └── transfer-dom/
│ │ ├── index.js
│ │ └── metas.yml
│ ├── faq-routes.json
│ ├── filters/
│ │ ├── array2String.js
│ │ ├── format-time.js
│ │ ├── friendly-time.js
│ │ ├── name2value.js
│ │ └── value2name.js
│ ├── libs/
│ │ ├── base.js
│ │ ├── clean-style.js
│ │ ├── dom.js
│ │ ├── eventor.js
│ │ ├── get-parent-prop.js
│ │ ├── is-array.js
│ │ ├── mixin_uuid.js
│ │ ├── passive_supported.js
│ │ ├── plugin_helper.js
│ │ ├── router.js
│ │ ├── trim.js
│ │ └── webp-support.js
│ ├── lints/
│ │ └── shouleBeInGroup.js
│ ├── locales/
│ │ ├── all.yml
│ │ ├── en.yml
│ │ └── zh-CN.yml
│ ├── main.js
│ ├── mixins/
│ │ ├── calendar-marks.js
│ │ ├── multi-items.js
│ │ ├── prevent-body-scroll.js
│ │ ├── safari-fix.js
│ │ └── uuid.js
│ ├── plugins/
│ │ ├── ajax/
│ │ │ ├── index.js
│ │ │ └── metas.yml
│ │ ├── alert/
│ │ │ ├── index.js
│ │ │ ├── module.js
│ │ │ └── util.js
│ │ ├── app/
│ │ │ └── index.js
│ │ ├── bus/
│ │ │ ├── index.js
│ │ │ └── metas.yml
│ │ ├── close-dialogs/
│ │ │ ├── index.js
│ │ │ └── metas.yml
│ │ ├── config/
│ │ │ └── index.js
│ │ ├── confirm/
│ │ │ └── index.js
│ │ ├── datetime/
│ │ │ ├── index.js
│ │ │ └── metas.yml
│ │ ├── device/
│ │ │ ├── doc.md
│ │ │ └── index.js
│ │ ├── loading/
│ │ │ ├── index.js
│ │ │ ├── metas.yaml
│ │ │ ├── module.js
│ │ │ └── util.js
│ │ ├── locale/
│ │ │ └── index.js
│ │ ├── toast/
│ │ │ ├── index.js
│ │ │ └── metas.yaml
│ │ └── wechat/
│ │ ├── 1.3.0.js
│ │ ├── 1.3.2.js
│ │ ├── index.js
│ │ ├── metas.yml
│ │ ├── origin.1.3.0.js
│ │ └── origin.1.3.2.js
│ ├── styles/
│ │ ├── 1px.less
│ │ ├── 1px.yml
│ │ ├── blank.less
│ │ ├── center.less
│ │ ├── close.less
│ │ ├── close.yml
│ │ ├── doc.md
│ │ ├── index.less
│ │ ├── index.vue
│ │ ├── loading.less
│ │ ├── reddot.less
│ │ ├── reset.less
│ │ ├── tap.less
│ │ ├── transition.less
│ │ ├── variable.less
│ │ ├── vux-modal.css
│ │ └── weui/
│ │ ├── base/
│ │ │ ├── fn.less
│ │ │ ├── mixin/
│ │ │ │ ├── mobile.less
│ │ │ │ ├── setArrow.less
│ │ │ │ ├── setChecked.less
│ │ │ │ ├── setOnepx.less
│ │ │ │ └── text.less
│ │ │ ├── reset.less
│ │ │ └── variable/
│ │ │ ├── color.less
│ │ │ ├── global.less
│ │ │ ├── weui-cell.less
│ │ │ ├── weui-dialog.less
│ │ │ ├── weui_button.less
│ │ │ ├── weui_grid.less
│ │ │ ├── weui_msg.less
│ │ │ └── weui_progress.less
│ │ ├── icon/
│ │ │ ├── weui_font.less
│ │ │ └── weui_icon_font.less
│ │ ├── weui.less
│ │ └── widget/
│ │ ├── weui-agree/
│ │ │ └── weui-agree.less
│ │ ├── weui-animate/
│ │ │ └── weui-animate.less
│ │ ├── weui-button/
│ │ │ ├── weui-btn_default.less
│ │ │ ├── weui-btn_disabled.less
│ │ │ ├── weui-btn_global.less
│ │ │ ├── weui-btn_loading.less
│ │ │ ├── weui-btn_plain.less
│ │ │ ├── weui-btn_primary.less
│ │ │ ├── weui-btn_warn.less
│ │ │ └── weui-button.less
│ │ ├── weui-flex/
│ │ │ └── weui-flex.less
│ │ ├── weui-footer/
│ │ │ └── weui-footer.less
│ │ ├── weui-grid/
│ │ │ └── weui-grid.less
│ │ ├── weui-loading/
│ │ │ └── weui-loading.less
│ │ ├── weui-picker/
│ │ │ └── weui-picker.less
│ │ ├── weui-slider.less/
│ │ │ └── weui-slider.less
│ │ ├── weui-uploader/
│ │ │ └── index.less
│ │ ├── weui_cell/
│ │ │ ├── weui-gallery.less
│ │ │ ├── weui_access.less
│ │ │ ├── weui_cell_global.less
│ │ │ ├── weui_check/
│ │ │ │ ├── weui_check_common.less
│ │ │ │ ├── weui_checkbox.less
│ │ │ │ └── weui_radio.less
│ │ │ ├── weui_check.less
│ │ │ ├── weui_form/
│ │ │ │ ├── weui-form-preview.less
│ │ │ │ ├── weui_form_common.less
│ │ │ │ ├── weui_select.less
│ │ │ │ └── weui_vcode.less
│ │ │ ├── weui_form.less
│ │ │ ├── weui_switch.less
│ │ │ └── weui_uploader.less
│ │ ├── weui_media_box/
│ │ │ └── weui_media_box.less
│ │ ├── weui_page/
│ │ │ ├── weui_article.less
│ │ │ └── weui_msg.less
│ │ ├── weui_panel/
│ │ │ └── weui_panel.less
│ │ ├── weui_progress/
│ │ │ └── weui_progress.less
│ │ ├── weui_searchbar/
│ │ │ └── weui_searchbar.less
│ │ ├── weui_tab/
│ │ │ ├── navbar.less
│ │ │ ├── vux-tabbar.less
│ │ │ ├── weui-tabbar.less
│ │ │ ├── weui_tab.less
│ │ │ └── weui_tab_tabbar.less
│ │ └── weui_tips/
│ │ ├── weui-badge.less
│ │ ├── weui-loadmore.less
│ │ ├── weui_actionsheet.less
│ │ ├── weui_dialog.less
│ │ ├── weui_mask.less
│ │ └── weui_toast.less
│ ├── theme.less
│ ├── tools/
│ │ ├── base64/
│ │ │ └── index.js
│ │ ├── cookie/
│ │ │ ├── index.js
│ │ │ └── metas.yml
│ │ ├── date/
│ │ │ ├── format.js
│ │ │ ├── metas.yml
│ │ │ └── range.js
│ │ ├── debounce/
│ │ │ ├── index.js
│ │ │ └── metas.yml
│ │ ├── md5/
│ │ │ ├── index.js
│ │ │ └── metas.yml
│ │ ├── number/
│ │ │ ├── comma.js
│ │ │ ├── metas.yml
│ │ │ ├── pad.js
│ │ │ ├── random.js
│ │ │ └── range.js
│ │ ├── querystring/
│ │ │ └── index.js
│ │ ├── string/
│ │ │ ├── metas.yml
│ │ │ └── trim.js
│ │ ├── throttle/
│ │ │ ├── index.js
│ │ │ └── metas.yml
│ │ └── validator/
│ │ └── chinaMobile.js
│ └── vuex/
│ └── store.js
├── ssr/
│ └── nuxt/
│ ├── .babelrc
│ ├── layouts/
│ │ └── default.vue
│ ├── nuxt.config.js
│ ├── package.json
│ ├── pages/
│ │ └── index.vue
│ ├── plugins/
│ │ ├── vux-components.js
│ │ └── vux-plugins.js
│ └── styles/
│ └── theme.less
├── static/
│ └── .gitkeep
└── test/
└── unit/
├── dateFormat.spec.js
├── index.js
└── karma.conf.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .babelrc
================================================
{
"presets": [
["es2015", { "modules": false }],
"stage-2"
],
"plugins": ["transform-runtime"],
"comments": false,
"env": {
"test": {
"plugins": [ "istanbul" ]
}
}
}
================================================
FILE: .editorconfig
================================================
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
================================================
FILE: .eslintignore
================================================
build/*.js
src/assets/*/*.js
src/libs/eventor.js
config/*.js
src/tools/*/*.js
src/components/video/zy.media.js
src/plugins/wechat/1.3.0.js
src/plugins/wechat/1.3.2.js
src/plugins/wechat/origin.1.3.0.js
src/plugins/wechat/origin.1.3.2.js
================================================
FILE: .eslintrc.js
================================================
module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module'
},
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
extends: 'standard',
globals: {'expect': true, 'it': true, 'describe': true, 'ga': true, 'window': true, 'document': true, 'alert': true, 'api': true, 'apiready': true},
env: {
browser: true
},
// required to lint *.vue files
plugins: [
'html'
],
// add your custom rules here
'rules': {
'eol-last': 0,
// allow paren-less arrow functions
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
}
}
================================================
FILE: .github/FUNDING.yml
================================================
github: [airyland]
================================================
FILE: .github/ISSUE_TEMPLATE.md
================================================
<!--
中文用户请注意：
提高处理效率，请说明具体需求/代码/重现步骤，不要截图代码。
-->
================================================
FILE: .github/PULL_REQUEST_TEMPLATE.md
================================================
Please makes sure the items are checked before submitting your PR, thank you!
* [ ] `Rebase` before creating a PR to keep commit history clear.
* [ ] `Only One commit`
* [ ] No `eslint` errors
================================================
FILE: .gitignore
================================================
.DS_Store
node_modules/
bower_components/
npm-debug.log
/demo
build/milestone.json
examples/webpack/
.idea
dist/components-commonjs/
/site
/docs/changes
/docs/demos
/docs/**/faq/index.md
/docs/**/components
/docs/**/demos
/docs/**/changelog
/docs/.ream/
*.vue.vux.*
src/locales/components.yml
/dist/**/*
src/components/index.js
test/unit/coverage/
docs/*.map
v2/
changes.json
.nuxt/
docs/releases.json
docs/src/routes.json
docs/src/faq-routes.json
docs/src/tool-routes.json
docs/src/_index.js
docs/sitemap.txt
docs/algolia.json
/src/demos/**/_index.vue
yarn-error.log
.vscode
================================================
FILE: .npmignore
================================================
build/
demo/
dist/
docs/
node_modules/
packages/
examples/
test/
/src/*.vue
/src/*.js
/src/*.html
/src/assets/
/src/demos/
favicon.ico
logo.png
CNAME
circle.yml
bower.json
/assets/
.babelrc
docs/
*.vue.vux.*
nuxt/
yarn.lock
================================================
FILE: .travis.yml
================================================
language: node_js
node_js:
- 7
os: linux
cache:
yarn: true
branches:
only:
- v2
install:
- |
yarn install
script:
- |
npm run lint && npm run test
after_success:
- |
cat ./test/unit/coverage/lcov.info | ./node_modules/.bin/codecov
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2016-present, Airyland
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
<p align="center">
<a href="http://vux.li">
<img src="https://i.loli.net/2017/11/20/5a12187ebf2e0.png" width="175">
</a>
</p>
<p align="center">Be Cool with Vue@^2.3.0 and WeUI.</p>
<p align="center">
<a href="https://vux.li/demos/v2?x-page=github">
<img src="https://static.vux.li/demo_v2_doc_home.png" width="100" alt="">
</a>
<br>
<a href="https://vux.li/demos/v2?x-page=github">
Live Demo >>
</a>
<br>
<br>
<a href="https://github.com/airyland/vux">
<img src="https://img.shields.io/github/stars/airyland/vux.svg?style=social&label=Star" alt="">
</a>
<a href="https://github.com/airyland/vux">
<img src="https://img.shields.io/github/forks/airyland/vux.svg?style=social&label=Fork" alt="">
</a>
<a href="https://github.com/airyland/vux">
<img src="https://img.shields.io/github/watchers/airyland/vux.svg?style=social&label=Watch" alt="">
</a>
<br>
<br>
<a href="https://travis-ci.org/airyland/vux">
<img src="https://api.travis-ci.org/airyland/vux.svg?branch=v2" alt="">
</a>
<a href="https://codecov.io/gh/airyland/vux/branch/v2">
<img src="https://img.shields.io/codecov/c/github/airyland/vux/v2.svg" alt="">
</a>
<br>
<a href="https://github.com/airyland/vux/issues">
<img src="https://img.shields.io/github/issues/airyland/vux.svg?style=flat-square" alt="">
</a>
<a href="https://github.com/airyland/vux/issues">
<img src="http://isitmaintained.com/badge/resolution/airyland/vux.svg?style=flat-square" alt="">
</a>
<a href="https://github.com/airyland/vux/graphs/contributors">
<img src="https://img.shields.io/github/contributors/airyland/vux.svg?style=flat-square" alt="">
</a>
<br>
<a href="https://www.npmjs.com/package/vux">
<img src="https://img.shields.io/npm/l/vux.svg?style=flat-square" alt="">
</a>
<a href="https://www.npmjs.com/package/vux">
<img src="https://img.shields.io/npm/v/vux.svg?style=flat-square" alt="">
</a>
<a href="https://www.npmjs.com/package/vux">
<img src="https://img.shields.io/npm/dm/vux.svg?style=flat-square" alt="">
</a>
<a href="https://www.npmjs.com/package/vux">
<img src="https://img.shields.io/npm/dt/vux.svg?style=flat-square" alt="">
</a>
<br>
<br>
</p>
## Sponsors
<p align="center">
<a href="https://www.upyun.com/">
<img src="https://ww1.sinaimg.cn/large/663d3650gy1fs3l83hokej20b4040weg.jpg" height="80">
</a>
</p>
## Requirements
+ vue@^2.3.0(for .sync modifier)
+ webpack@^2.0
+ node@^7.6(development)
## Docs
+ [中文文档](https://vux.li/)
+ English(working)
## Quick Start
> [vux2 template](https://github.com/airyland/vux2) is directly modified from Vue official [webpack template](https://github.com/vuejs-templates/webpack).
``` bash
npm install vue-cli -g
vue init airyland/vux2 projectPath
cd projectPath
npm install // or yarn
npm run dev // or yarn dev
```
## Maintainers
+ [airyland](https://github.com/airyland)
+ [lichunqiang](https://github.com/lichunqiang)
+ [graysheeep](https://github.com/graysheeep)
+ [unclay](https://github.com/unclay)
+ [wg5945](https://github.com/wg5945)
+ [Sapphire2k](https://github.com/Sapphire2k)
## Vux is Inspired or Powered By:
+ [Vue](https://github.com/vuejs/vue)
+ [WeUI](https://github.com/weui/weui)
+ [FrozenUI](https://github.com/frozenui/frozenui)
+ [Ant Design](https://github.com/ant-design/ant-design)
+ [Ant Design Mobile](http://github.com/ant-design/ant-design-mobile)
+ [XScroll](https://github.com/huxiaoqi567/xscroll)
+ [Ionic](https://github.com/driftyco/ionic)
+ [SUI Mobile](https://github.com/sdc-alibaba/SUI-Mobile)
+ [PhotoSwipe](https://github.com/dimsemenov/PhotoSwipe)
+ [WePayUI](https://github.com/wepayui/wepayui)
+ [autosize](https://github.com/jackmoore/autosize)(MIT)
+ [buefy](https://github.com/buefy/buefy)
## License
[MIT](https://github.com/airyland/vux/blob/v2/LICENSE)
================================================
FILE: build/build-components.js
================================================
'use strict'
process.env.NODE_ENV = 'production'
/**
* --locale='zh-CN'
* --namespace='vux'
* --components=Group,Cell
*/
var argv = require('yargs').argv
var namespace = argv.namespace || 'vux'
const { build } = require('./umd-helper')
var isBuildAll = !argv.components
var buildComponents = argv.components ? argv.components.split(',') : []
let config = require('./webpack.prod.conf.js')
const vuxConfig = require('./vux-config')
vuxConfig.plugins.forEach(function (plugin) {
if (plugin.name === 'i18n') {
plugin.vuxStaticReplace = true
plugin.vuxLocale = argv['locale'] || 'zh-CN'
}
})
const webpack = require('webpack')
const mkdirp = require('mkdirp')
const fs = require('fs')
const touch = require('touch')
const path = require('path')
mkdirp.sync(path.resolve(__dirname, '../dist/plugins'))
mkdirp.sync(path.resolve(__dirname, '../dist/styles'))
let list = require(path.resolve(__dirname, '../src/datas/vux_component_list.json'))
const maps = require(path.resolve(__dirname, '../src/components/map.json'))
// 查找在maps里但不在list里的组件
let others = []
for (let i in maps) {
let match = list.filter(function (one) {
return _camelCase(one.name) === i
})
if (match.length === 0 && !/Plugin|Data|Directive|Filter|Item|NOTICE|Demo|Dev|Tool|String|Number|number|format|md5|base64|cookie/.test(i)) {
others.push({
name: toDash(i),
importName: i,
path: maps[i]
})
}
}
others.push({
name: 'swiper-item',
importName: 'SwiperItem',
path: maps['SwiperItem']
})
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var co = require('co')
var thunkify = require('thunkify')
var pkg = require(path.resolve(__dirname, '../package.json'))
var utils = require('./utils')
config.devtool = false
config.plugins = config.plugins.slice(0, -2)
config.plugins.forEach((one, index) => {
if (one.constructor.name === 'HtmlWebpackPlugin') {
config.plugins.splice(index, 1)
}
if (one.constructor.name === 'ExtractTextPlugin') {
config.plugins.splice(index, 1)
}
})
config.output.assetsPublicPath = '/'
let isBuilding = false
co(function* () {
if (!buildComponents.length) {
try {
yield build(buildMainConfig(), 'vux')
} catch (e) {
console.log(e)
}
try {
for (let n = 0; n < others.length; n++) {
yield build(buildConfig(others[n]), others[n].name)
}
} catch (e) {
console.log(e)
}
try {
const pluginList = ['Confirm', 'Toast', 'Device', 'Alert', 'Loading', ' Wechat', 'Ajax']
for (let j = 0; j < pluginList.length; j++) {
yield build(buildPlugin(pluginList[j]), `Plugin ${pluginList[j]}`)
}
} catch (e) {
console.log(e)
}
}
if (buildComponents.length) {
list = list.filter(function (one) {
return buildComponents.indexOf(_camelCase(one.name)) > -1
})
}
try {
for (let i = 0; i < list.length; i++) {
let one = list[i]
const name = list[i].name
if (one.items) {
// build a commonjs bundle
yield build(buildConfig({
name: list[i].name + '-pack',
importName: _camelCase(list[i].name),
path: `src/components/${name}/index.js`
}), `pack: ${list[i].name}`)
for (let j = 0; j < one.items.length; j++) {
one.name = one.items[j]
one.path = maps[_camelCase(one.items[j])]
one.importName = _camelCase(one.items[j])
yield build(buildConfig(one), one.items[j])
}
} else {
yield build(buildConfig(one), one.name)
}
}
} catch (e) {
console.log(e)
}
})
function camelCase(input) {
let str = input.toLowerCase().replace(/-(.)/g, function (match, group1) {
return group1.toUpperCase();
})
str = str.replace(/_(.)/g, function (match, group1) {
return group1.toUpperCase()
});
return str
}
function _camelCase(input) {
let str = camelCase(input)
return str.slice(0, 1).toUpperCase() + str.slice(1)
}
function buildMainConfig() {
// list all components
const list = require('../src/components/map.json')
let code = `const _vux = {}\n
const isBrowser = typeof window !== 'undefined'\n`
code += `isBrowser && (window.vux = _vux)\n\n`
code += `import Style from '../styles/index.vue' // eslint-disable-line\n`
delete list['NOTICE']
delete list['ChinaAddressV1Data']
delete list['vuxTransferDom']
for (let i in list) {
const name = `${namespace}${i}`
code += `import ${name} from '${list[i]}'\n
_vux['${name}'] = ${name}\n`
}
code += `
if (isBrowser) {
for (let i in _vux) {
window[i] = _vux[i]
}
}\n`
fs.writeFileSync(path.resolve(__dirname, '../src/components/index.js'), code)
delete config.entry
config.plugins.forEach((one, index) => {
if (one.constructor.name === 'ExtractTextPlugin') {
config.plugins.splice(index, 1)
}
})
config.plugins.push(new ExtractTextPlugin({
filename: `vux.min.css`
}))
config.entry = config.entry || {}
config.entry['vux'] = 'src/components/index.js'
config.output = {}
config.output.libraryTarget = 'window'
config.output.filename = `vux.min.js`
config.output.path = path.resolve(__dirname, `../dist/`)
delete config.__vueOptions__
return config
}
// build plugins
function buildPlugin(name) {
delete config.entry
config.plugins.forEach((one, index) => {
if (one.constructor.name === 'ExtractTextPlugin') {
config.plugins.splice(index, 1)
}
})
config.plugins.push(new ExtractTextPlugin({
filename: 'index.min.css'
}))
config.entry = config.entry || {}
config.entry['plugin'] = `src/plugins/${name.toLowerCase()}/index.js`
config.output = {}
config.output.libraryTarget = 'umd'
config.output.library = `${namespace}${name}Plugin`
config.output.filename = `index.min.js`
config.output.path = path.resolve(__dirname, `../dist/plugins/${name.toLowerCase()}`)
delete config.__vueOptions__
return config
}
function buildConfig(one, opts) {
opts = opts || {}
one.importName = one.importName || _camelCase(one.name)
one.path = path.resolve(__dirname, '../' + (one.path || maps[one.importName]))
delete config.entry
config.plugins.forEach((one, index) => {
if (one.constructor.name === 'ExtractTextPlugin') {
config.plugins.splice(index, 1)
}
})
config.plugins.push(new ExtractTextPlugin({
filename: 'index.min.css'
}))
config.entry = {}
config.entry[one.name] = one.path
config.output = {}
config.output.libraryTarget = 'umd'
config.output.library = `${namespace}${one.importName}`
config.output.filename = `index.min.js`
config.output.path = path.resolve(__dirname, `../dist/components/${one.name}/`)
delete config.__vueOptions__
return config
}
function toDash(str) {
return str.replace(/([A-Z])/g, function (m, w) {
return '-' + w.toLowerCase();
}).replace('-', '')
}
================================================
FILE: build/build-docs.js
================================================
'use strict'
const glob = require("glob")
const fs = require('fs')
const yaml = require('js-yaml')
const path = require('path')
const _ = require('lodash')
const mkdirp = require('mkdirp')
const rimraf = require('rimraf')
const semver = require('semver')
const sortObj = require('sort-object')
mkdirp.sync(path.resolve(__dirname, '../docs/zh-CN/changelog'))
mkdirp.sync(path.resolve(__dirname, '../docs/en/changelog'))
mkdirp.sync(path.resolve(__dirname, '../docs/zh-CN/components'))
mkdirp.sync(path.resolve(__dirname, '../docs/en/components'))
const aliasMap = {
Base64Tool: 'base64',
Md5Tool: 'md5',
CookieTool: 'cookie',
CommaTool: 'numberComma',
PadTool: 'numberPad',
RandomTool: 'numberRandom',
FormatTool: 'dateFormat',
TrimTool: 'stringTrim',
QuerystringTool: 'querystring',
DebounceTool: 'debounce',
ThrottleTool: 'throttle'
}
let tMaps = {
'组件列表': 'Components',
'该组件已经停止维护。': 'This Component is Deprecated. ',
'名字': 'name',
'类型': 'type',
'参数': 'params',
'默认': 'default',
'说明': 'description',
'该文件为自动生成，请不要修改': 'THIS FILE IS AUTOGENERATED, DONOT EDIT IT',
'进入demo页面': 'Demo page',
'编辑文档': 'Edit document',
'demo源码': 'Demo source',
'版本': 'version'
}
function getPath(dir) {
return path.join(__dirname, dir)
}
let gComponents = []
let maps = {}
saveMaps('numberRange', 'src/tools/number/range.js')
saveMaps('dateRange', 'src/tools/date/range.js')
saveMaps('TransferDom', 'src/directives/transfer-dom/index.js')
saveMaps('trim', 'src/tools/string/trim')
// add AlertModule
saveMaps('AlertModule', 'src/plugins/alert/module')
function saveMaps(key, value) {
if (key === 'RangeTool') {
return
}
if (/test|fixture/.test(value)) {
return
}
if (/vux/.test(value)) {
let index = value.indexOf('src/components')
if (/Filter$/.test(key)) {
index = value.indexOf('src/filters')
}
if (/Data$/.test(key)) {
index = value.indexOf('src/datas')
}
if (/Plugin$/.test(key)) {
index = value.indexOf('src/plugins')
}
if (/Directive$/.test(key)) {
index = value.indexOf('src/directives')
}
if (/Tool$/.test(key)) {
index = value.indexOf('src/tools')
}
value = value.slice(index, value.length)
}
maps[key] = value.replace('../', '')
if (aliasMap[key]) {
maps[aliasMap[key]] = maps[key]
delete maps[key]
}
// sort
const list = []
for (let i in maps) {
list.push([i, maps[i]])
}
list.sort(function (a, b) {
return a[0].toLowerCase() > b[0].toLowerCase() ? 1 : -1
})
list.unshift(['NOTICE', 'THIS FILE IS AUTOGENERATED BY npm run build-docs'])
const _list = {}
list.forEach(function (one) {
_list[one[0]] = one[1]
})
fs.writeFileSync(getPath('../src/components/map.json'), JSON.stringify(_list, null, 2))
}
glob(getPath("../src/plugins/**/index.js"), {}, function (er, files) {
files.forEach(function (file) {
let name = getComponentName(file)
name = _camelCase(name)
saveMaps(name + 'Plugin', file)
})
})
glob(getPath("../src/tools/**/*.js"), {}, function (er, files) {
files.forEach(function (file) {
let name = getComponentName(file)
name = _camelCase(name)
saveMaps(name + 'Tool', file)
})
})
glob(getPath("../src/directives/**/index.js"), {}, function (er, files) {
files.forEach(function (file) {
let name = getComponentName(file)
name = _camelCase(name)
saveMaps(name + 'Directive', file)
})
})
glob(getPath("../src/filters/*.js"), {}, function (er, files) {
files.forEach(function (file) {
let name = getComponentName(file)
name = _camelCase(name)
saveMaps(name + 'Filter', file)
})
})
glob(getPath("../src/datas/*.json"), {}, function (er, files) {
files.forEach(function (file) {
let name = getComponentName(file)
name = _camelCase(name)
saveMaps(name + 'Data', file)
})
})
glob(getPath("../src/components/**/*.vue"), {}, function (er, files) {
// 生成组件路径映射
// 语言配置
let rs = {}
let enRs = {}
let zhCnRs = {}
files.forEach(function (file) {
let name = getComponentName(file)
const importName = _camelCase(name)
saveMaps(importName, file)
let content = fs.readFileSync(file, 'utf-8')
if (content.indexOf('</i18n>') > -1) {
const name = getComponentName(file)
const results = content.match(/<i18n[^>]*>([\s\S]*?)<\/i18n>/)
const json = yaml.safeLoad(results[1])
rs = Object.assign(rs, setKey(json, name))
for (let i in json) {
let enItem = {}
enRs[i] = json[i].en
}
for (let i in json) {
zhCnRs[i] = json[i]['zh-CN']
}
}
})
let dump = yaml.safeDump({
en: enRs,
'zh-CN': zhCnRs
})
fs.writeFileSync(getPath('../src/locales/all.yml'), dump)
fs.writeFileSync(getPath('../src/locales/en.yml'), yaml.safeDump(enRs))
fs.writeFileSync(getPath('../src/locales/zh-CN.yml'), yaml.safeDump(zhCnRs))
})
function setKey(object, name) {
for (let i in object) {
object[`vux.${name}.${i}`] = object[i]
delete object[i]
}
return object
}
glob(getPath('../src/**/metas.yml'), {}, function (err, files) {
render(files)
})
glob(getPath('../src/tools/**/metas.yml'), {}, function (err, files) {
let rs = []
files.forEach(function (file) {
const name = file.split('tools/')[1].replace('/metas.yml', '')
try {
const json = yaml.safeLoad(fs.readFileSync(file, 'utf-8'))
rs.push({
name: name,
metas: json
})
} catch (e) {
console.log('yml 出错')
}
})
fs.writeFileSync(getPath('../src/tools/changes.json'), JSON.stringify(rs, null, 2))
})
glob(getPath('../src/plugins/**/metas.yml'), {}, function (err, files) {
let rs = []
files.forEach(function (file) {
const name = file.split('plugins/')[1].replace('/metas.yml', '')
const json = yaml.safeLoad(fs.readFileSync(file, 'utf-8'))
rs.push({
name: name,
metas: json
})
})
fs.writeFileSync(getPath('../src/plugins/changes.json'), JSON.stringify(rs, null, 2))
})
glob(getPath('../src/directives/**/metas.yml'), {}, function (err, files) {
let rs = []
files.forEach(function (file) {
const name = file.split('directives/')[1].replace('/metas.yml', '')
const json = yaml.safeLoad(fs.readFileSync(file, 'utf-8'))
rs.push({
name: name,
metas: json
})
})
fs.writeFileSync(getPath('../src/directives/changes.json'), JSON.stringify(rs, null, 2))
})
function getComponentName(path) {
let list = path.split('/')
if (list[list.length - 1] === 'index.vue' || list[list.length - 1] === 'index.js') {
return list[list.length - 2]
} else if (list[list.length - 1] === 'metas.yml') {
return list[list.length - 2]
} else if (/\.json/.test(path)) {
return list[list.length - 1].replace('.json', '')
} else if (/\.js/.test(path)) {
return list[list.length - 1].replace('.js', '')
} else {
return list[list.length - 1].replace('.vue', '')
}
}
function render(files, tag) {
let components = []
let infos = []
files.forEach(function (file) {
const name = getComponentName(file)
const content = fs.readFileSync(file, 'utf-8')
let json = {}
try {
json = yaml.safeLoad(content)
} catch (e) {
console.log('错误', e)
}
let rs = {
name: name,
importName: _camelCase(name),
deprecatedInfo: json.deprecated_info || '',
props: json.props,
events: json.events,
methods: json.methods,
slots: json.slots,
extra: json.extra,
after_extra: json.after_extra,
tags: json.tags,
items: json.items,
json: json
}
let item = {
name: name,
icon: json.icon,
color: json.color,
importName: json.importName,
items: json.items,
}
if (json.category) {
item = {
...item,
category_en: json.category.en,
'category_zh-CN': json.category['zh-CN'],
category_order: json.category_order || 998
}
}
if (!tag && item.icon && item.name) {
const isDir = fs.existsSync(path.join(__dirname, `../src/demos/${item.name}/`))
item.hasHome = isDir
gComponents.push(item)
}
if (json.icon) {
infos.push({
name,
icon: json.icon,
importName: json.importName,
metas: json
})
}
if (tag && json.tags && json.tags.en && json.tags.en.indexOf(tag) === -1) {
return
}
if (tag && json.tags && !json.tags.en) {
return
}
if (tag && !json.tags) {
return
}
if (json.icon) {
rs.icon = json.icon
}
if (json.color) {
rs.color = json.color
}
if (json.import_code) {
rs.import_code = json.import_code
}
rs.status = json.status || 'maintaining'
if (rs.icon && rs.name) {
components.push(rs)
} else {}
})
if (!tag) {
gComponents = _.uniqBy(gComponents, 'name')
fs.writeFileSync(getPath('../src/datas/vux_component_list.json'), JSON.stringify(gComponents, null, 2))
}
buildChanges(infos)
buildChanges(infos, 'en')
let langs = ['zh-CN', 'en']
for (var i = 0; i < langs.length; i++) {
let lang = langs[i]
let docs = ''
if (!tag) {
// 生成docs
docs += `---
nav: ${lang}
---
<!--${t('该文件为自动生成，请不要修改')}-->
\n## ${t('组件列表')}`
} else {
// 生成docs
docs += `---
nav: ${lang}
---
<!--${t('该文件为自动生成，请不要修改')}-->
\n## ${tag}`
}
components.forEach(function (one) {
docs += '\n\n---\n'
docs += `\n### ${one.importName}_COM`
docs += `\n<span style="color: #999;font-size:12px;"><a href="https://github.com/airyland/vux/blob/v2/src/components/${one.name}/metas.yml" target="_blank">${t('编辑文档', lang)}</a></span>`
docs += `\n <span style="color: #999;font-size:12px;"><a href="#" router-link="/zh-CN/demos/${(one.name || name).replace('-item', '')}">${t("进入demo页面", lang)}</a></span>`
docs += `\n <span style="color: #999;font-size:12px;"><a href="https://vux.li/demos/v2/#/component/${one.name}" target="_blank">${t("demo 原始链接", lang)}</a></span>`
docs += `\n <span style="color: #999;font-size:12px;"><a href="https://github.com/airyland/vux/blob/v2/src/demos/${one.importName}.vue" target="_blank">${t("demo源码", lang)}</a></span>\n`
if (one.status === 'deprecated') {
docs += `\n<p class="warning">${t('该组件已经停止维护。')}${one.deprecatedInfo ? one.deprecatedInfo[lang] : ''}</p>\n`
}
if (one.import_code) {
if (one.import_code !== ' ') {
docs += '\n``` js'
docs += `\n${one.import_code}`
docs += '\n```\n'
}
} else {
docs += '\n``` js'
docs += `\nimport { ${one.importName} } from 'vux'`
docs += '\n```\n'
}
if (one.extra && typeof one.extra === 'string' && lang === 'zh-CN') {
docs += '\n' + one.extra + '\n'
}
if (one.extra && typeof one.extra === 'object' && one.extra[lang]) {
docs += '\n' + one.extra[lang] + '\n'
}
if (one.props || one.slots) {
docs = getComponentInfo(one, lang, docs)
}
if (one.items) {
docs = getComponentInfo({
name: one.name,
hideDemo: one.items.length > 1,
props: one.json[one.items[0]].props,
sub_extra: one.json[one.items[0]].sub_extra,
slots: one.json[one.items[0]].slots,
events: one.json[one.items[0]].events,
methods: one.json[one.items[0]].methods
}, lang, docs, one.items[0])
docs = getComponentInfo({
name: one.name,
json: one.json,
hideDemo: one.items.length > 2,
props: one.json[one.items[1]].props,
sub_extra: one.json[one.items[1]].sub_extra,
slots: one.json[one.items[1]].slots,
events: one.json[one.items[1]].events,
methods: one.json[one.items[1]].methods
}, lang, docs, one.items[1])
if (one.items.length === 3) {
docs = getComponentInfo({
name: one.name,
json: one.json,
props: one.json[one.items[2]].props,
sub_extra: one.json[one.items[2]].sub_extra,
slots: one.json[one.items[2]].slots,
events: one.json[one.items[2]].events,
methods: one.json[one.items[2]].methods
}, lang, docs, one.items[2])
}
}
// after extra
if (one.after_extra) {
docs += '\n' + (one.after_extra[lang] || one.after_extra) + '\n'
}
/**
docs += `\n<div id="play-${one.importName}" class="component-play-box">
Playground is coming soon
</div>\n`
*/
docs += `\n\n\n`
})
}
}
glob(getPath("../src/styles/*.yml"), {}, function (er, files) {
let infos = []
files.forEach(function (file) {
const content = fs.readFileSync(file, 'utf-8')
const info = yaml.safeLoad(content)
infos.push(info)
})
buildCssDocs(infos)
})
function buildCssDocs(infoList) {
let docs = `---
nav: zh-CN
---\n`
infoList.forEach(function (one) {
docs += `\n## ${one.name.en}\n`
docs += `${one.doc}\n\n`
})
fs.writeFileSync(getPath(`../docs/zh-CN/css.md`), docs)
}
function getVersion(version) {
let rs = ''
if (!version) {
rs = ''
} else if (version === 'next') {
rs = '下个版本'
} else {
rs = version
}
return `<span style="font-size:12px;white-space:nowrap;">${rs}</span>`
}
function getComponentInfo(one, lang, docs, name) {
if (one.props || one.slots) {
if (name) {
docs += `\n<span class="vux-component-name">${_camelCase(name)}</span>\n`
}
}
if (one.sub_extra) {
docs += `\n${one.sub_extra}\n`
}
if (one.props) {
// prop title
docs += `\n<span class="vux-props-title">Props</span>\n`
docs += `\n| ${t('名字')} | ${t('类型')} | ${t('默认')} | version | ${t('说明')} |
|-------|-------|-------|-------|-------|
`
for (let i in one.props) {
let prop = one.props[i][lang]
docs += `| ${getKeyHTML(i)} | ${getTypeHTML(one.props[i].type)} | ${getColorHTML(one.props[i])} | ${getVersion(one.props[i].version)} | ${prop} |\n`
}
}
if (one.slots) {
// slot title
docs += `\n<span class="vux-props-title">Slots</span>\n`
docs += `\n| ${t('名字')} | ${t('说明')} | ${t('版本')} |
|-------|-------|-------|
`
for (let i in one.slots) {
let slot = one.slots[i][lang]
docs += `| ${getKeyHTML(i)} | ${slot} | ${getVersion(one.slots[i].version)} |\n`
}
}
if (one.events) {
// slot title
docs += `\n<span class="vux-props-title">Events</span>\n`
docs += `\n| ${t('名字')} | ${t('参数')} | ${t('说明')} | ${t('版本')} |
|-------|-------|-------|-------|
`
for (let i in one.events) {
let intro = one.events[i][lang]
let params = one.events[i]['params']
docs += `| ${getKeyHTML(i)} | ${params || ' '} | ${intro} | ${getVersion(one.events[i].version)} |\n`
}
}
if (one.methods) {
// slot title
docs += `\n<span class="vux-props-title">Methods</span>\n`
docs += `\n| ${t('名字')} | ${t('参数')} | ${t('说明')} | ${t('版本')} |
|-------|-------|-------|-------|
`
for (let i in one.methods) {
let intro = one.methods[i][lang]
let params = one.methods[i]['params']
docs += `| ${getKeyHTML(i)} | ${params || ' '} | ${intro} |${getVersion(one.methods[i].version)} | \n`
}
}
// docs += `<div></div>`
// docs += `\n`
// docs += `\n\n<span class="vux-props-title">Demo</span>\n`
// docs += `\n<div id="play-${one.importName}" class="component-play-box"><a class="vux-demo-link" href="#" router-link="/zh-CN/demos/${one.name}">进入demo页面</a></div>\n`
docs += `\n`
// docs += `\n\n<span class="vux-props-title">Demo</span>\n`
if (one.name || name) {
if (one.hideDemo !== true) {
docs += `\n<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/${(one.name || name).replace('-item', '')}">${t("进入demo页面")}</a>\n`
}
}
// do not show change log in component list
if (one.json && one.json.changes && one.hideDemo !== true && false) {
let lastestVersion = Object.keys(one.json.changes)[0]
docs += `\n<br><span class="vux-props-title">Changes (${lastestVersion})</span>\n`
docs += `<ul>`
one.json.changes[lastestVersion]['zh-CN'].forEach(one => {
docs += `${getChangeTagHTML(one, '14px')}`
})
docs += `</ul>\n`
}
return docs
}
function getKeyHTML(key) {
return `<span class="prop-key" style="white-space:nowrap;">${key}</span>`
}
function getTypeHTML(type) {
type = type || 'String'
if (/,/.test(type)) {
const list = type.split(',').map(function (one) {
return one.replace(/^\s+|\s+$/g, '')
}).map(function (one) {
return `<span class="type type-${one ? one.toLowerCase() : 'string'}">${one}</span>`
})
return list.join('<br>')
} else {
return `<span class="type type-${type ? type.toLowerCase() : 'string'}">${type}</span>`
}
}
function getChangeTagHTML(str, fontSize = '15px') {
const _split = str.split(']')
const type = _split[0].replace('[', '')
const content = _split[1]
return `<li><span style="font-size:${fontSize};"><span class="change change-${type}">${type}</span> ${content}</span></li>`
}
function getColorHTML(one) {
one.default = typeof one.default === 'undefined' ? '' : one.default
let value = one.default
if (value === false) {
return 'false'
}
if (!/#/.test(value)) {
return value
} else {
return `<span class="type" style="width:65px;background-color:${value}">${value}</span>`
}
}
function t(key, lang) {
if (lang === 'zh-CN') {
return key
}
return tMaps[key] || key
}
/**
function transform (object, name) {
let rs = {
en: {},
'zh-CN': {}
}
for(let i in object) {
rs['en'][`vux.${name}.${i}`] = object[i]['en']
rs['zh-CN'][`vux.${name}.${i}`] = object[i]['zh-CN']
}
return rs
}
**/
function camelCase(input) {
let str = input.toLowerCase().replace(/-(.)/g, function (match, group1) {
return group1.toUpperCase();
});
str = str.replace(/_(.)/g, function (match, group1) {
return group1.toUpperCase();
});
return str
}
function _camelCase(input) {
let str = camelCase(input)
return str.slice(0, 1).toUpperCase() + str.slice(1)
}
function parseChange(str) {
str = str.replace(/#(\d+)\s?/g, function (a, b) {
return `<a href="https://github.com/airyland/vux/issues/${b}" target="_blank">#${b}</a> `
})
str = str.replace(/@(\w+)\s?/g, function (a, b) {
return `<a href="https://github.com/${b}" target="_blank">${a}</a>`
})
return str
}
const strMap = {
en: 'not release yet',
'zh-CN': '未发布'
}
function parseTag(firstTag, tag, lang) {
if (tag === 'next') {
return `${tag} (${strMap[lang]})`
}
return tag
}
function buildChanges(infos, lang = 'zh-CN') {
const toolInfos = require(getPath('../src/tools/changes.json'))
const pluginInfos = require(getPath('../src/plugins/changes.json'))
const directiveInfos = require(getPath('../src/directives/changes.json'))
infos = infos.concat(toolInfos)
infos = infos.concat(pluginInfos)
infos = infos.concat(directiveInfos)
let rs = {}
infos.forEach(one => {
let name = one.name
let metas = one.metas
if (metas && metas.changes) {
for (let i in metas.changes) {
if (!rs[i]) {
rs[i] = {}
}
rs[i][name] = metas.changes[i][lang]
}
}
})
const titleMapSum = {
en: 'releases',
'zh-CN': '发布日志'
}
const suffixMap = {
en: ' | VUX - Vue.js Mobile UI Component Framework',
'zh-CN': ' | VUX - 基于 WeUI 和 Vue 的移动端组件库'
}
let str = `---
title: VUX ${titleMapSum[lang]}${suffixMap[lang]}
---\n
# VUX ${titleMapSum[lang]}`
rs = sortObj(rs, {
sort: function (a, b) {
if (a === 'next') {
return -1
}
if (b === 'next') {
return 1
}
return semver.gt(a, b) ? -1 : 1
}
})
let firstTag = Object.keys(rs)[0]
let releases = {}
let n = 0
for (let i in rs) {
releases[i] = {}
// releases += `\n # ${i}\n`
if (/next/.test(parseTag(firstTag, i, lang))) {
str += `\n<h2>${parseTag(firstTag, i, lang)}</h2>\n`
} else {
str += `\n<h2><a href="/${lang}/changelog/${parseTag(firstTag, i)}.html">${parseTag(firstTag, i)}</a></h2>\n`
}
for (let j in rs[i]) {
// releases += `\n## ${_camelCase(j)}\n`
releases[i][j] = []
rs[i][j] && rs[i][j].forEach(one => {
releases[i][j].push(one)
})
if (n <= 2) {
str += `\n### ${_camelCase(j)}\n`
str += `<ul>`
rs[i][j] && rs[i][j].forEach(one => {
str += `${parseChange(getChangeTagHTML(one))}`
})
str += `</ul>`
str += `\n`
}
}
n++
}
const titleMap = {
en: 'released',
'zh-CN': '发布日志'
}
for (let i in releases) {
const release = releases[i]
let file = getPath(`../docs/${lang}/changelog/${i}.md`)
let htmlFile = getPath(`../docs/changes/${lang}/${i}.html`)
let data = {
lang: lang,
version: i,
title: `${i}发布`,
components: []
}
let content = `---
title: VUX ${_camelCase(i)} ${titleMap[lang]}${suffixMap[lang]}
---\n
# VUX ${_camelCase(i)} ${titleMap[lang]}`
for (let j in release) {
content += `\n<h2><a href="/${lang}/components/${j}.html">${_camelCase(j)}</a></h2>\n`
content += '<ul>'
release[j].forEach(function (line) {
content += `<li>${line}</li>\n`
})
content += '</ul>'
data.components.push({
name: j,
list: release[j].map(one => {
return {
change: one
}
})
})
fs.writeFileSync(file, content)
}
}
str += '\n'
fs.writeFileSync(getPath(`../docs/${lang}/changelog/changelog.md`), str)
}
================================================
FILE: build/build-main.js
================================================
'use strict'
const fs = require('fs')
const path = require('path')
const maps = require(path.resolve(__dirname, '../src/components/map.json'))
delete maps.NOTICE
const target = path.resolve(__dirname, '../index.js')
let str = `// THIS FILE IS ONLY FOR IDE ENTRY CHECKING NOT FOR REAL USAGE\n\n`
str += `console.warn('VUX: 如果你看到这一行，说明 vux-loader 配置有问题或者代码书写规范的原因导致无法解析成按需引入组件，会导致打包体积过大。请升级到最新版本 vux-loader，建议开启 eslint(standard)。')\n\n`
for (let i in maps) {
str += `import ${i} from './${maps[i]}'\n`
}
str += '\nexport {\n'
for (let i in maps) {
str += ` ${i}${i === 'XTextarea' ? '' : ','}\n`
}
str += '}'
fs.writeFileSync(target, str)
================================================
FILE: build/build-styles.js
================================================
const postcss = require('postcss')
const syntax = require('postcss-less')
const path = require('path')
const fs = require('fs')
const less = require('less')
const shell = require('shelljs')
const distPath = path.resolve(__dirname, `../dist/styles/`)
shell.rm('-rf', distPath)
shell.mkdir('-p', distPath)
var pkg = require(path.join(__dirname, '../package.json'))
const p = path.resolve(__dirname, '../src/styles/')
fs.readdir(p, function (err, files) {
if (err) {
throw err
}
files.filter(function (file) {
return !fs.statSync(path.join(p, file)).isDirectory() && /less/.test(file) && !/index|variable|theme/.test(file)
}).forEach(function (file) {
parse(file)
})
})
const getPath = function (name) {
return path.resolve(__dirname, `../dist/styles/${name}`)
}
function parse (file) {
var code = fs.readFileSync(path.resolve(__dirname, `../src/styles/${file}`), 'utf-8')
less.render(code, {
compress: true,
paths: [path.resolve(__dirname, '../src/styles')]
},function (e, output) {
if (e) {
throw e
} else {
postcss([require('autoprefixer')(['iOS >= 7', 'Android >= 4.1'])])
.process(output.css, {
syntax: syntax
})
.then(function (result) {
const dist = getPath(file.replace('less', 'css'));
fs.writeFileSync(dist, result.css);
})
.catch(function(e){
console.log(e)
})
}
})
}
================================================
FILE: build/build.js
================================================
// https://github.com/shelljs/shelljs
require('./check-versions')()
process.env.NODE_ENV = 'production'
var ora = require('ora')
var path = require('path')
var chalk = require('chalk')
var shell = require('shelljs')
var webpack = require('webpack')
var config = require('../config')
var webpackConfig = require('./webpack.prod.conf')
var spinner = ora('building for production...')
spinner.start()
var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
shell.rm('-rf', assetsPath)
shell.mkdir('-p', assetsPath)
shell.config.silent = true
shell.cp('-R', 'static/*', assetsPath)
shell.config.silent = false
webpack(webpackConfig, function (err, stats) {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '\n\n')
console.log(chalk.cyan(' Build complete.\n'))
console.log(chalk.yellow(
' Tip: built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n'
))
})
================================================
FILE: build/check-versions.js
================================================
var chalk = require('chalk')
var semver = require('semver')
var packageConfig = require('../package.json')
function exec (cmd) {
return require('child_process').execSync(cmd).toString().trim()
}
var versionRequirements = [
{
name: 'node',
currentVersion: semver.clean(process.version),
versionRequirement: packageConfig.engines.node
},
{
name: 'npm',
currentVersion: exec('npm --version'),
versionRequirement: packageConfig.engines.npm
}
]
module.exports = function () {
var warnings = []
for (var i = 0; i < versionRequirements.length; i++) {
var mod = versionRequirements[i]
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
warnings.push(mod.name + ': ' +
chalk.red(mod.currentVersion) + ' should be ' +
chalk.green(mod.versionRequirement)
)
}
}
if (warnings.length) {
console.log('')
console.log(chalk.yellow('To use this template, you must update following to modules:'))
console.log()
for (var i = 0; i < warnings.length; i++) {
var warning = warnings[i]
console.log(' ' + warning)
}
console.log()
process.exit(1)
}
}
================================================
FILE: build/dev-doc.js
================================================
const watch = require('node-watch')
const path = require('path')
const dir = path.resolve(__dirname, '../src/components')
watch(dir, function (filename) {
if (/metas\.yml/.test(filename)) {
delete require.cache[require.resolve('./build-docs.js')]
require('./build-docs.js')
}
})
================================================
FILE: build/document.js
================================================
'use strict'
const glob = require("glob")
const path = require('path')
const yaml = require('js-yaml')
const fs = require('fs')
function getPath(dir) {
return path.join(__dirname, dir)
}
glob(getPath('../src/**/metas.yml'), {}, function (err, files) {
for(let file of files) {
console.log(file)
let content = fs.readFileSync(file, 'utf-8')
let doc = yaml.safeLoad(content)
for (let prop in doc.props) {
console.log(prop)
let info = doc.props[prop]
if (!info['en'] || !info['zh-CN']) {
throw('缺少多语言文档')
}
}
}
})
================================================
FILE: build/fetch-github.js
================================================
'use strict'
const fetch = require('node-fetch')
const path = require('path')
const fs = require('fs')
const relesesPath = path.resolve(__dirname, '../docs/releases.json')
const get = async function () {
const res =await fetch('https://api.github.com/repos/airyland/vux/releases')
return await res.json()
}
get().then(res => {
fs.writeFileSync(relesesPath, JSON.stringify(res, null, 2))
})
================================================
FILE: build/less.js
================================================
const less = require('less')
const path = require('path')
const fs = require('fs')
const file = path.resolve(__dirname, '../src/styles/reset.less')
less.render(fs.readFileSync(file, 'utf8'), {
paths: [path.resolve(__dirname, '../src/styles')]
},function (e, output) {
console.log(e, output)
})
================================================
FILE: build/pre-publish.js
================================================
const glob = require('glob')
const path = require('path')
const fs = require('fs')
function getPath(dir) {
return path.join(__dirname, dir)
}
const argv = require('yargs').argv
console.log('argv', argv)
const version = argv.version
if (!version) {
throw('no version specified')
}
const pkg = require(getPath('../package.json'))
const pkgContent = fs.readFileSync(getPath('../package.json'), 'utf-8')
fs.writeFileSync(getPath('../package.json'), pkgContent.replace(pkg.version, version.replace('v', '')))
glob(getPath('../src/**/**/metas.yml'), {}, function (err, files) {
let rs = []
files.forEach(function (file) {
console.log(file)
let content = fs.readFileSync(file, 'utf-8')
content = content.split('\n')
content = content.map(line => {
console.log(line)
if (/next:/.test(line)) {
return line.replace('next', `${version}`)
} else if (/version: next/.test(line)) {
return line.replace('next', `${version}`)
}
return line
})
fs.writeFileSync(file, content.join('\n'))
})
})
================================================
FILE: build/simulate.sh
================================================
mkdir node_modules/vux
mkdir node_modules/vux/src
rm node_modules/vux/package.json
cp package.json node_modules/vux/
cp -r src/ node_modules/vux/src/
================================================
FILE: build/umd-helper.js
================================================
'use strict'
const webpack = require('webpack')
const mkdirp = require('mkdirp')
const fs = require('fs')
const touch = require('touch')
const path = require('path')
var co = require('co')
var thunkify = require('thunkify')
var build = thunkify(function (config, name, cb) {
let start = new Date().getTime()
console.log(`start:${name}`)
webpack(config, function (err, stats) {
if (!config.entry.vux) {
mkdirp.sync(path.resolve(config.output.path))
touch.sync(path.resolve(config.output.path, './index.min.css'))
}
var jsonStats = stats.toJson()
var assets = jsonStats.assets[0]
var size = assets.size / 1024
size = size.toFixed(2) + 'k'
console.log('size', size)
console.log('time', (new Date().getTime() - start) / 1000 + 's')
console.log('----------------')
cb && cb(err)
})
})
var ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
build,
ExtractTextPlugin
}
================================================
FILE: build/utils.js
================================================
'use strict'
const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const pkg = require('../package.json')
exports.assetsPath = function (_path) {
const assetsSubDirectory = process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path)
}
exports.cssLoaders = function (options) {
options = options || {}
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
var postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
const output = []
const loaders = exports.cssLoaders(options)
for (const extension in loaders) {
const loader = loaders[extension]
output.push({
test: new RegExp('\\.' + extension + '$'),
use: loader
})
}
return output
}
exports.createNotifierCallback = function () {
const notifier = require('node-notifier')
return (severity, errors) => {
if (severity !== 'error') {
return
}
const error = errors[0]
const filename = error.file && error.file.split('!').pop()
notifier.notify({
title: pkg.name,
message: severity + ': ' + error.name,
subtitle: filename || '',
icon: path.join(__dirname, 'logo.png')
})
}
}
================================================
FILE: build/vue-loader.conf.js
================================================
var utils = require('./utils')
var config = require('../config')
var isProduction = process.env.NODE_ENV === 'production'
module.exports = {
loaders: utils.cssLoaders({
sourceMap: isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap,
extract: isProduction
}),
postcss: [
require('autoprefixer')({
browsers: ['iOS >= 7', 'Android >= 4.1']
})
]
}
================================================
FILE: build/vux-config.js
================================================
'use strict'
const path = require('path')
const fs = require('fs')
const demoPath = path.resolve(__dirname, '../src/demo_list.json')
const glob = require('glob')
const match = path.join(__dirname, '../src/demos/*/*.vue')
const dir = path.join(__dirname, '../src/demos/')
const yaml = require('js-yaml')
const reg = /<demo[^>]*>([\s\S]*?)<\/demo>/g
const argv = require('yargs').argv
argv.simulate = argv.simulate || false
const isInclude = function (name, include) {
let list = include.split(',')
for (let i = 0; i < list.length; i++) {
if (name.includes(list[i])) {
return true
}
}
return false
}
module.exports = {
options: {
vuxDev: !argv.simulate, // true
vuxSetBabel: argv.simulate, // false
vuxWriteFile: false,
env: 'dev'
},
plugins: [
'vux-ui', 'inline-manifest',
{
name: 'duplicate-style',
options: {
cssProcessorOptions : {
safe: true,
zindex: false,
autoprefixer: {
add: true,
"browsers": [
"iOS >= 7",
"Android >= 4.1"
]
}
}
}
},
{
name: 'progress-bar',
envs: ['development']
},
{
name: 'js-parser',
test: /main\.js/,
fn: function (source) {
this.addDependency(demoPath)
let list = fs.readFileSync(demoPath, 'utf-8')
list = JSON.parse(list)
let groupList = []
let dirs = {}
const listDir = glob.sync(match).filter(one => {
return !one.includes('_index.vue')
}).map(one => {
one = path.normalize(one)
const component = one.replace(dir, '').replace('.vue', '').replace(path.sep, '/')
let title = {
en: 'EXAMPLE',
'zh-CN': 'EXAMPLE'
}
let order = 999
const urlpath = '/components/' + component
let name = one.replace(dir, '').split(path.sep)[0]
if (!Array.isArray(dirs[name])) {
dirs[name] = []
}
const code = fs.readFileSync(path.join(__dirname, `../src/demos/${component}.vue`), 'utf-8')
const rs = code.match(reg)
if (rs) {
let meta = yaml.safeLoad(rs[0].replace('<demo>', '').trim().replace('</demo>', ''))
if (typeof meta.title === 'string') {
title.en = meta.title
title['zh-CN'] = meta.title
} else if (typeof meta.title === 'object') {
title.en = meta.title.en
title['zh-CN'] = meta.title['zh-CN']
}
if (meta.order) {
order = meta.order * 1
}
}
dirs[name].push({
title,
path: urlpath,
order
})
return component + '#' + urlpath
})
list = list.concat(listDir)
for (let dir in dirs) {
dirs[dir].sort((a, b) => {
return a.order > b.order ? 1 : -1
})
const file = `<template>
<!-- THIS FILE IS AUTO-GENERATED BY build/vux-config.js -->
<group>
<cell v-for="demo in list" :key="demo.path" is-link :link="demo.path" :title="demo.title[lang]"></cell>
</group>
</template>
<script>
/* eslint-disable */
export default {
created () {
this.lang = this.$locale.get()
},
data () {
return {
lang: 'en',
list: ${JSON.stringify(dirs[dir], null, 2)}
}
}
}
</script>
`
fs.writeFileSync(path.join(__dirname, `../src/demos/${dir}/_index.vue`), file)
groupList.push(`${dir}/_index#/components/${dir}/home`)
}
list = list.concat(groupList)
if (argv.demo) {
list = list.filter(item => {
return item.indexOf(argv.demo) > -1
})
}
let str = []
list.forEach(one => {
let filename = one
let path = `/component/${toDash(one)}`
if (/#/.test(one)) {
filename = one.split('#')[0]
path = one.split('#')[1]
}
let shouldIncluded = true
if (path !== '/demo' && argv.env && argv.env.include) {
shouldIncluded = isInclude(path, argv.env.include)
}
if (shouldIncluded) {
str.push(`{
path: '${path}',
component: () => import('./demos/${filename}.vue').then(m => m.default)
}`)
}
})
// 404 page
str.push(`{
path: '*',
component: () => import('./demos/NotFoundComponent.vue').then(m => m.default)
}`)
str = `[${str.join(',\n')}]`
source = source.replace('const routes = []', 'const routes = ' + str)
return source
}
},
{
name: 'i18n',
vuxStaticReplace: false,
staticReplace: false,
extractToFiles: 'src/locales/components.yml',
localeList: ['en', 'zh-CN']
},
{
name: 'less-theme',
path: 'src/theme.less'
}
]
}
function toDash(str) {
return str.replace(/([A-Z])/g, function (m, w) {
return '-' + w.toLowerCase();
}).replace('-', '')
}
================================================
FILE: build/webpack.base.conf.js
================================================
var path = require('path')
var config = require('../config')
var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../')
var fs = require('fs')
var vueLoaderConfig = require('./vue-loader.conf')
var argv = require('yargs').argv
argv.simulate = argv.simulate || false
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
const webpackConfig = {
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
modules: [
resolve('src'),
resolve('node_modules')
],
alias: {
'vue$': 'vue/dist/vue.common.js',
'src': resolve('src'),
'assets': resolve('src/assets'),
'components': resolve('src/components'),
'@': resolve('src')
}
},
module: {
rules: [
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: "pre",
include: [resolve('src'), resolve('test')],
exclude: /vue.vux.js$/,
options: {
formatter: require('eslint-friendly-formatter')
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.(yaml|yml)$/,
loader: 'js-yaml-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}
const vuxLoader = require('vux-loader')
const vuxConfig = require('./vux-config')
module.exports = vuxLoader.merge(webpackConfig, vuxConfig)
================================================
FILE: build/webpack.dev.conf.js
================================================
'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
const devWebpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
},
// cheap-module-eval-source-map is faster for development
devtool: config.dev.devtool,
// these devServer options should be customized in /config/index.js
devServer: {
clientLogLevel: 'warning',
historyApiFallback: true,
hot: true,
compress: true,
host: process.env.HOST || config.dev.host,
port: process.env.PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay ? {
warnings: false,
errors: true,
} : false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
poll: config.dev.poll,
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
]
})
module.exports = new Promise((resolve, reject) => {
portfinder.basePort = process.env.PORT || config.dev.port
portfinder.getPort((err, port) => {
if (err) {
reject(err)
} else {
// publish the new Port, necessary for e2e tests
process.env.PORT = port
// add port to devServer config
devWebpackConfig.devServer.port = port
// Add FriendlyErrorsPlugin
devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
compilationSuccessInfo: {
messages: [`Your application is running here: http://${config.dev.host}:${port}`],
},
onErrors: config.dev.notifyOnErrors
? utils.createNotifierCallback()
: undefined
}))
resolve(devWebpackConfig)
}
})
})
================================================
FILE: build/webpack.prod.conf.js
================================================
var path = require('path')
var config = require('../config')
var utils = require('./utils')
var webpack = require('webpack')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var env = process.env.NODE_ENV === 'testing'
? require('../config/test.env')
: require('../config/prod.env')
var argv = require('yargs').argv
var webpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true
})
},
devtool: false, // config.build.productionSourceMap ? '#source-map' : false,
output: {
path: config.build.assetsRoot,
publicPath: argv.cdn ? 'https://upcdn.vux.li/demos/v2/' : './',
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
// extract css into its own file
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css')
}),
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing'
? 'index.html'
: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module, count) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
chunks: ['vendor']
})
]
})
if (config.build.productionGzip) {
var CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
if (config.build.bundleAnalyzerReport) {
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig
================================================
FILE: build/webpack.test.conf.js
================================================
// This is the webpack config used for unit tests.
var utils = require('./utils')
var webpack = require('webpack')
var merge = require('webpack-merge')
var baseConfig = require('./webpack.base.conf')
var webpackConfig = merge(baseConfig, {
// use inline sourcemap for karma-sourcemap-loader
module: {
rules: utils.styleLoaders()
},
devtool: '#inline-source-map',
resolveLoader: {
alias: {
// necessary to to make lang="scss" work in test when using vue-loader's ?inject option
// see discussion at https://github.com/vuejs/vue-loader/issues/724
'scss-loader': 'sass-loader'
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/test.env')
})
]
})
// no need for app entry during tests
delete webpackConfig.entry
const vuxLoader = require('vux-loader')
// set i18n dynamic to false
module.exports = vuxLoader.merge(webpackConfig, {
plugins: [{
name: 'i18n',
vuxStaticReplace: true,
staticReplace: true,
extractToFiles: 'src/locales/components.yml',
localeList: ['en', 'zh-CN']
}]
})
================================================
FILE: circle.yml
================================================
machine:
node:
version: 5.3.0
================================================
FILE: config/dev.env.js
================================================
var merge = require('webpack-merge')
var prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
})
================================================
FILE: config/index.js
================================================
'use strict'
// Template version: 1.2.3
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
// Use Eslint Loader?
// If true, your code will be linted during bundling and
// linting errors and warnings will be shown in the console.
useEslint: true,
// If true, eslint errors and warnings will also be shown in the error overlay
// in the browser.
showEslintErrorsInOverlay: false,
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false,
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../docs/demos/temp/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../docs/demos/temp'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
/**
* Source Maps
*/
productionSourceMap: false,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}
================================================
FILE: config/prod.env.js
================================================
module.exports = {
NODE_ENV: '"production"'
}
================================================
FILE: config/test.env.js
================================================
var merge = require('webpack-merge')
var devEnv = require('./dev.env')
module.exports = merge(devEnv, {
NODE_ENV: '"testing"'
})
================================================
FILE: docs/404.md
================================================
Page is being translated...
================================================
FILE: docs/about/version.md
================================================
## 版本发布
<p class="tip">
`0.x` 版本文档不完整，并且已经不再维护。请更新或者直接使用`2.x`。
</p>
当前开发分支为 [v2](https://github.com/airyland/vux)。
`2.1.0` ~ `3.0.0` 之间版本不会有影响升级的 `break change`，请放心及时更新版本。
================================================
FILE: docs/compile.js
================================================
'use strict'
const glob = require('glob')
const path = require('path')
const fs = require('fs')
const yaml = require('js-yaml')
const hljs = require('highlight.js')
const MD = require('markdown-it')
const argv = require('yargs').argv
let langs = ['en', 'zh-CN']
const t = require('./i18n')
const pkg = require('../package.json')
const variables = {}
const variableMap = {}
const variablePath = path.join(__dirname, '../src/styles/variable.less')
const variableContent = fs.readFileSync(variablePath, 'utf-8').split('\n')
const isInclude = function (name, include) {
let list = include.split(',')
for (let i = 0; i < list.length; i++) {
if (name.includes(list[i])) {
return true
}
}
return false
}
variableContent.forEach((line, index) => {
if (/^@/.test(line)) {
let temp = line.split(':')
let component = temp[0].replace('@', '').split('-')[0]
if (component === 'button' && /button-tab/.test(line)) {
component = 'button-tab'
}
if (!variables[component]) {
variables[component] = []
}
const name = temp[0].replace('@', '')
let value = temp[1].replace(';', '').trim().replace(/\/\*(.*?)\*\//, '')
if (value.includes('//')) {
value = value.split(' ')[0].trim()
}
let inherited_name = ''
let is_inherited = false
if (/@/.test(value)) {
is_inherited = true
inherited_name = value
value = variableMap[value.replace('@', '')]
}
let t = {}
if (variableContent[index - 1] === '*/' && /:/.test(variableContent[index - 2])) {
let stop = false
let i = 2
while (!stop) {
const temp = variableContent[index - i]
if (/:/.test(temp)) {
let pair = temp.split(':')
t[pair[0].replace('*', '').trim()] = pair[1].trim()
} else {
stop = true
}
i++
}
}
variables[component].push({
name,
value,
is_inherited,
inherited_name,
desc: t
})
variableMap[name] = value
}
})
let contents = []
const getAlternate = function (lang, route) {
return langs.filter(_lang => _lang !== lang).map(_lang => {
return {
rel: 'alternate',
hreflang: _lang,
href: route.replace(lang, _lang)
}
})
}
const getPath = function (dir) {
return path.join(__dirname, dir)
}
// for faster test with few languages
if (argv.langs) {
langs = argv.langs.split(',')
}
// filters routes
let include
if (argv.include) {
include = argv.include
}
const customContainer = require('markdown-it-container')
const md = new MD({
html: true,
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return '<pre class="hljs"><code>' +
hljs.highlight(lang, str, true).value +
'</code></pre>';
} catch (__) {}
}
return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
}
})
.use(customContainer, 'tip', {
validate: function(params) {
return params.trim() === 'tip'
}
})
.use(customContainer, 'warning', {
validate: function(params) {
return params.trim() === 'warning'
}
})
.use(customContainer, 'danger', {
validate: function(params) {
return params.trim() === 'danger'
}
})
function getComponentName(path) {
let list = path.split('/')
if (list[list.length - 1] === 'index.vue' || list[list.length - 1] === 'index.js') {
return list[list.length - 2]
} else if (list[list.length - 1] === 'metas.yml') {
return list[list.length - 2]
} else if (/\.json/.test(path)) {
return list[list.length - 1].replace('.json', '')
} else if (/\.js/.test(path)) {
return list[list.length - 1].replace('.js', '')
} else {
return list[list.length - 1].replace('.vue', '')
}
}
let paths = []
langs.forEach(lang => {
const faqs = glob.sync(getPath(`./${lang}/faq/*.md`))
const faqRoutes = []
const commonTitle = `${t('title', lang)}`
let faqMd = `
---
title: ${t('faq', lang)} | ${commonTitle}
---
# ${t('faq', lang)}
`
faqs.forEach(one => {
one = '.' + one.replace(__dirname, '')
const content = fs.readFileSync(getPath(one), 'utf-8')
const titleRs = content.match(/\n#(.*?)\n/)
if (titleRs && titleRs[1] && one.indexOf('index.md') === -1) {
faqRoutes.push({
title: titleRs[1].trim(),
path: one.replace('./', '/').replace('.md', '.html')
})
contents.push({
lang,
category: '常见问题',
title: titleRs[1].trim(),
url: one.replace('./', '/').replace('.md', '.html'),
content: md.render(content)
})
}
})
faqRoutes.forEach(one => {
faqMd += `
* <router-link to="${one.path}">${one.title}</router-link>
`
})
fs.writeFileSync(getPath('./src/faq-routes.json'), JSON.stringify(faqRoutes, null, 2))
fs.writeFileSync(getPath(`./${lang}/faq/index.md`), faqMd)
})
/**
* tools
*/
langs.forEach(lang => {
let toolRoutes = []
const tools = glob.sync(getPath(`./${lang}/tools/*.md`))
tools.forEach(one => {
one = '.' + one.replace(__dirname, '')
const content = fs.readFileSync(getPath(one), 'utf-8')
let titleRs = content.match(/\n#(.*?)\n/)
if (titleRs && titleRs[1] && one.indexOf('index.md') === -1) {
titleRs[1] = titleRs[1].replace(/#/g, '')
toolRoutes.push({
title: titleRs[1].trim(),
path: one.replace('./', '/').replace('.md', '.html')
})
contents.push({
lang,
category: t('Toolkit', lang),
title: t(titleRs[1].trim(), lang),
url: one.replace('./', '/').replace('.md', '.html'),
content: md.render(content)
})
}
})
fs.writeFileSync(getPath(`./src/tool-routes-${lang}.json`), JSON.stringify(toolRoutes, null, 2))
})
let files = []
langs.forEach(lang => {
files = files.concat(glob.sync(getPath(`./${lang}/**/*.md`)))
})
files = files.map(file => {
return '.' + file.replace(__dirname, '')
})
if (include) {
files = files.filter(file => {
return isInclude(file, include)
})
}
let str = ''
langs.forEach(lang => {
str += `
routes.push({
path: '/${lang}/lab/index.html',
component: () => import('../${lang}/lab/index.md')
})
routes.push({
path: '/${lang}/faq',
component: () => import('../${lang}/faq/index.md')
})
routes.push({
path: '/${lang}/',
component: () => import('../${lang}/README.md')
})
routes.push({
path: '/${lang}/about/contributors.html',
component: () => import('../${lang}/about/contributors.vue')
})`
paths.push('/${lang}/')
paths.push('/${lang}/faq/')
paths.push('/${lang}/about/contributors.html')
})
files.forEach(file => {
let currentPath = `${file.replace(/^.\//, '/').replace('.md', '.html')}`
if (!include || isInclude(currentPath, include)) {
paths.push(currentPath)
str += `
routes.push({
path: '${currentPath}',
component: () => import('.${file}')
})
`
}
})
// components
const components = glob.sync(getPath('../src/components/**/metas.yml'))
const colorCode = function (lang, code) {
return '<pre class="hljs"><code>' +
hljs.highlight(lang, code, true).value +
'</code></pre>'
}
const routesList = require(getPath(`../src/demo_list.json`))
const map = {}
routesList.forEach(route => {
if (/#/.test(route)) {
let pair = route.split('#')
map[pair[0]] = pair[1]
}
})
components.forEach((file) => {
const rawMetas = fs.readFileSync(file, 'utf-8')
const metas = yaml.safeLoad(rawMetas)
const root = getPath('../')
const componentName = file.replace(root, '').replace('src/components/', '').replace('/metas.yml', '')
const importName = _camelCase(componentName)
let importList = [{
componentName: componentName,
importName: importName
}]
if (/meta/.test(componentName)) {
return
}
// 加入样式变量
metas.variables = variables[componentName.replace('x-', '')]
// demo 源码
const demoPath = path.join(__dirname, `../src/demos/${importName}.vue`)
let demoCode = ''
try {
demoCode = encodeURIComponent(colorCode('html', fs.readFileSync(demoPath, 'utf-8')))
} catch (e) {}
if (metas.items) {
importList = []
metas.items.forEach(one=> {
importList.push({
componentName: one,
importName: _camelCase(one)
})
})
}
const parseReg = '`(.*?)`'
const _localImportCode = `import { ${importList.map(one => one.importName).join(', ')} } from 'vux'
export default {
components: {
${importList.map(one => one.importName).join(',\n ')}
}
}`
const localImportCode = colorCode('js', _localImportCode)
let exampleCode = ''
if (metas.example) {
exampleCode = colorCode('html', metas.example)
}
if (metas.tips) {
langs.forEach(lang => {
if (metas.tips[lang]) {
for (let i = 0; i < metas.tips[lang].length; i++) {
metas.tips[lang][i].a = metas.tips[lang][i].a
.replace(/```\s+(css|js|bash|html)/g, '``` $1\n')
.replace(/```/g, '\n```')
metas.tips[lang][i].a = md.render(metas.tips[lang][i].a)
}
}
})
// add tip on last component
if (metas.items) {
const keys = metas.items
const last = keys[keys.length - 1]
metas[last].tips = metas.tips
}
}
// render child component description
if (metas.items) {
metas.items.forEach(item => {
if (metas[item].description) {
metas[item].description = md.render(metas[item].description)
}
})
}
langs.forEach(lang => {
// find demos
let demos = []
const reg = /<demo[^>]*>([\s\S]*?)<\/demo>/g
let demoHeight = '270px'
let commonNoBackgroundColor = 'true'
let demosDir = getPath(`../src/demos/${componentName}/`)
if (fs.existsSync(demosDir)) {
const list = glob.sync(demosDir + '/*.vue').filter(one => !one.includes('_index.vue'))
.map(one => one.replace(getPath(`../src/demos/`), ''))
.map(one => {
const route = map[one.replace('.vue', '')]
const code = fs.readFileSync(getPath(`../src/demos/`) + one, 'utf-8')
let height = demoHeight
let noBackgroundColor = commonNoBackgroundColor
let order = 999
const rs = code.match(reg)
let title = 'EXAMPLE'
if (rs) {
let meta = yaml.safeLoad(rs[0].replace('<demo>\n', '').replace('</demo>', ''))
if (typeof meta.title === 'string') {
title = meta.title
} else if (typeof meta.title === 'object') {
title = meta.title[lang]
}
if (meta.height) {
height = meta.height + 'px'
}
if (meta.noBackgroundColor === false) {
noBackgroundColor === 'false'
}
if (meta.order) {
order = meta.order * 1
}
}
return {
file: one.replace('.vue', ''),
title,
route: route,
code: '<pre class="hljs"><code>' +
hljs.highlight('html', code.replace(reg, ''), true).value +
'</code></pre>',
oriHeight: height,
height: height,
noBackgroundColor,
order
}
})
demos = list.sort((a, b) => {
return a.order > b.order ? 1 : -1
})
}
let url = `https://vux.li/demos/v2/#/component/${componentName}`
if (demos.length) {
url = `https://vux.li/demos/v2/#/components/${componentName}/home`
}
// toc
let toc = []
if (demos.length) {
toc.push({
title: t('Intro', lang),
anchor: 'intro'
})
toc.push({
title: t('Install', lang),
anchor: 'install'
})
toc.push({
title: t('Examples', lang),
anchor: 'examples',
list: demos.map(one => {
return {
title: one.title,
anchor: 'examples:' + one.title
}
}).slice(0, 5)
})
if (metas.items) {
toc.push({
title: 'API',
anchor: 'api',
list: metas.items.map(item => {
return {
title: `<${item}>`,
anchor: 'components:' + item
}
})
})
} else {
toc.push({
title: 'API',
anchor: 'api'
})
}
toc.push({
title: t('Tips', lang),
anchor: 'tips'
})
toc.push({
title: t('Contributors', lang),
anchor: 'contributors'
})
toc.push({
title: t('Changelog', lang),
anchor: 'changelog'
})
}
const needImport = metas.need_import === false ? false : true
const gitMetas = require(`./${lang}/components/${componentName}_git_metas.json`)
// ldjson
const ldjson = {
"@context": "http://schema.org/",
"@type": "SoftwareApplication",
"name": `Vue Component ${componentName}`,
"screenshot": "",
"description": "Vue.js component for VUX",
"url": `/${lang}/components/${componentName}.html`,
"applicationCategory": t('Component', lang),
"author": {
"@type": "Organization",
"name": "VUX",
"url": "https://vux.li"
},
"downloadUrl": "https://vux.li",
"softwareVersion": pkg.version,
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": 5,
"reviewCount": gitMetas.commitCount
},
"operatingSystem": "iOS >= 7, Android >= 4.1",
"offers": {
"@type": "Offer",
"price": 0,
"priceCurrency": t('priceCurrency', lang),
"availability": "http://schema.org/InStock"
}
}
contents.push({
lang: lang,
category: t('Components', lang),
title: importName,
title_alias: componentName,
url: `/${lang}/components/${componentName}.html`
})
const list = ['Props', 'Events', 'Slots', 'Functions']
list.forEach(block => {
const key = block.toLowerCase()
if (metas[key]) {
for (let prop in metas[key]) {
contents.push({
lang: lang,
category: t('Component', lang) + ' ' + importName + ' ' + t(block.replace(/s$/, ''), lang),
title: prop,
url: `/${lang}/components/${componentName}.html#${key}-${prop}`,
content: metas[key][prop][lang]
})
}
}
})
let _globalImportCode = `// ${t('globally register', lang)}\n\nimport Vue from 'vue'\nimport { ${importList.map(one => one.importName).join(', ')} } from 'vux'\n\n`
const urlWithNoTransition = `https://vux.li/demos/v2?locale=${lang}&transition=none/#/component/${componentName}`
importList.forEach(one => {
_globalImportCode += `Vue.component('${one.componentName}', ${one.importName})\n`
})
const globalImportCode = colorCode('js', _globalImportCode)
let str = `
<template>
<div class="component-box" :class="demos.length ? 'components-with-toc' : ''">
<div :class="demos.length ? 'component-header-v2' : 'component-header-v1'">
<a class="anchor" id="intro">${importName}</a>
<div class="title-box">
<el-badge value="Beta" v-if="isBeta">
<h1 class="vux-component-name">${importName}</h1>
</el-badge>
<h1 v-else class="vux-component-name">${importName}</h1>
<p class="component-extra-links">
<a href="${url}" target="_blank">${t('demo url', lang)}</a>
<a v-if="!demos.length" href="https://github.com/airyland/vux/blob/v2/src/demos/${importName}.vue" target="_blank" @click.prevent="showSourceCode">${t('demo source code', lang)}</a>
<a href="https://github.com/airyland/vux/blob/v2/src/components/${componentName}/metas.yml" target="_blank">${t('edit document', lang)}</a>
<a href="https://github.com/airyland/vux/blob/v2/src/components/${componentName}/" target="_blank">${t('component source code', lang)}</a>
<el-popover trigger="hover" v-if="hasReady">
<div style="width:100%;text-align:center;">
<img class="qr" width="100" src="https://qr.vux.li/api.php?text=${encodeURIComponent(url)}"/>
</div>
<a href="javascript:" slot="reference">
${t('qr', lang)}
</a>
</el-popover>
</p>
<div class="component-description">
<template v-if="${!!metas.description}">
${md.render(metas.description || '')}
</template>
</div>
</div>
<div v-if="!demos.length" class="component-demo" style="width:377px;height:600px;display:inline-block;border:1px solid #ececec;border-radius:5px;overflow:hidden;z-index:2500;">
<iframe src="${urlWithNoTransition}" width="375" height="600" border="0" frameborder="0"></iframe>
</div>
<div class="toc">
<ul v-for="t in toc">
<li>
<a :href="'#' + (t.anchor || t.title)">{{ t.title }}</a>
<ul v-if="t.list" v-for="_t in t.list">
<li><a :href="'#' + _t.anchor">{{ _t.title.slice(0, 12) }}</a></li>
</ul>
</li>
</ul>
</div>
<template v-if="needImport">
<a class="anchor" id="install">Install</a>
<h2>${t('Install', lang)}</h2>
<el-tabs>
<el-tab-pane label="${t('Local Registration', lang)}">
<div class="import-code-box">
<el-tooltip content="${t('click to copy', lang)}" placement="top">
<span
v-clipboard:copy="localImportCode"
v-clipboard:success="onCopy"
v-clipboard:error="onCopyError">
<el-icon class="el-icon-document"></el-icon>
</span>
</el-tooltip>
${localImportCode}
</div>
</el-tab-pane>
<el-tab-pane label="${t('Global Registration', lang)}">
<div class="import-code-box">
<el-tooltip content="${t('click to copy', lang)}" placement="top">
<span
v-clipboard:copy="globalImportCode"
v-clipboard:success="onCopy"
v-clipboard:error="onCopyError">
<el-icon class="el-icon-document"></el-icon>
</span>
</el-tooltip>
${globalImportCode}
</div>
</el-tab-pane>
</el-tabs>
</template>
<template v-else>
<div class="tip">
<p>${t('donot need import', lang)}</p>
</div>
</template>
<div class="tip" style="width:600px;" v-if="metas.tip">
${ metas.tip ? metas.tip.replace(/`(.*?)`/g, '<code>$1</code>') : '' }
</div>
<h2 v-if="metas.example">${t('example', lang)}</h2>
<div v-if="metas.example" style="width:600px;">
${exampleCode}
</div>
</div>
<div v-if="metas.extra && metas.extra['${lang}']">
${ metas.extra && metas.extra[lang] ? md.render(metas.extra[lang] || '<div></div>') : '' }
</div>
<div v-if="metas.extra && !metas.extra['${lang}']">
${ metas.extra && !metas.extra[lang] && typeof metas.extra === 'string' ? md.render(metas.extra || '<div></div>') : '' }
</div>
<a v-if="demos.length" class="anchor" id="examples">Examples</a>
<br/>
<template v-if="demos.length" v-for="demo in demos">
<a class="anchor" :id="'examples:' + demo.title">{{ demo.title }}</a>
<br/>
<div class="demo-header">
<span class="demo-title">{{ demo.title }}</span>
</div>
<div class="demos" :style="{height: demo.height}">
<div class="demo-iframe-box">
<lazy-component>
<iframe
:src="domain + '?no-background-color=' + demo.noBackgroundColor +'&locale=${lang}&transition=none&hide-nav=true&hide-tab-bar=true#/components/' + demo.file"
width="375"
height="600"
border="0"
frameborder="0"
style="margin: 0 auto;"></iframe>
</lazy-component>
</div>
<div class="demo-code-box" :style="{overflow: demo.height === demo.oriHeight ? 'hidden' : 'scroll'}">
<div v-html="demo.code" contenteditable></div>
<div v-if="demo.height === demo.oriHeight" class="demo-code-masker" @click="demo.height='auto'">
<div>
<img class="demo-qr" width="100" :src="'https://qr.vux.li/api.php?text=' + encodeURIComponent(domain + '?locale=${lang}#/components/' + demo.file)"/>
<br/>
<span>
<el-icon class="el-icon-arrow-left"/>
<el-icon class="el-icon-arrow-right"/>
Show code
<br/>
<!--<span class="demo-path">src/demos/{{ demo.file }}.vue</span>-->
</span>
</div>
</div>
<span v-if="demo.height === 'auto'" class="hide-code" @click="demo.height=demo.oriHeight">
<el-icon class="el-icon-close"></el-icon>
</span>
</div>
</div>
</template>
<template v-for="component in componentList">
<div>
<a v-if="componentList.length > 1" class="anchor" :id="'components:' + component.name">{{ component.name }}</a>
<a v-else class="anchor" id="api">API</a>
<br/>
<h2
v-show="componentList.length > 1"
class="vux-component-name-sub-item">{{ component.name }}</h2>
<template v-if="component.meta.items && component.meta.description">
<div v-html="component.meta.description"></div>
</template>
<template v-if="component.meta.props">
<h2>${t('Props', lang)}</h2>
<table>
<thead>
<tr>
<td>${t('name', lang)}</td>
<td style="width:48px;">${t('type', lang)}</td>
<td>${t('default value', lang)}</td>
<td>${t('description', lang)}</td>
<td>${t('required version', lang)}</td>
</tr>
</thead>
<tbody>
<tr v-for="(prop, i) in component.meta.props">
<td class="prop-name">
<el-tooltip content="${t('click to copy', lang)}" placement="left" :hide-after="0" :open-delay="50">
<span
v-clipboard:copy="i"
v-clipboard:success="onCopy">{{ i }}</span>
</el-tooltip>
</td>
<td v-html="getTypeHTML(prop.type)"></td>
<td>{{ prop.default}}</td>
<td v-html="prop['${lang}'].replace(/${parseReg}/g, '<code>$1</code>')"></td>
<td>{{ prop.version || '--'}}</td>
</tr>
</tbody>
</table>
</template>
<template v-if="component.meta.events">
<h2>${t('Events', lang)}</h2>
<table>
<thead>
<tr>
<td>${t('name', lang)}</td>
<td>${t('params', lang)}</td>
<td>${t('description', lang)}</td>
<td>${t('required version', lang)}</td>
</tr>
</thead>
<tbody>
<tr v-for="(event, i) in component.meta.events">
<td class="prop-name">
<el-tooltip content="${t('click to copy', lang)}" placement="left" :hide-after="0" :open-delay="50">
<span
v-clipboard:copy="'@' + i"
v-clipboard:success="onCopy">@{{ i }}</span>
</el-tooltip>
</td>
<td v-html="event.params ? event.params.replace(/${parseReg}/g, '<code>$1</code>') : '--'"></td>
<td v-html="event['${lang}'] ? event['${lang}'].replace(/${parseReg}/g, '<code>$1</code>') : '--'"></td>
<td>{{ event['version'] || '--' }}</td>
</tr>
</tbody>
</table>
</template>
<template v-if="component.meta.slots">
<h2>${t('Slots', lang)}</h2>
<table>
<thead>
<tr>
<td>${t('name', lang)}</td>
<td>${t('description', lang)}</td>
<td>${t('required version', lang)}</td>
</tr>
</thead>
<tbody>
<tr v-for="(slot, i) in component.meta.slots" :class="{'slot-disabled': slot['status'] === 'deprecated'}">
<td class="prop-name">
<el-tooltip content="${t('click to copy', lang)}" placement="left" :hide-after="0" :open-delay="50">
<span
v-clipboard:copy="i"
v-clipboard:success="onCopy">{{ i === 'default' ? '${t('default slot', lang)}' : i }}</span>
</el-tooltip>
</td>
<td v-html="slot['${lang}'] ? slot['${lang}'].replace(/${parseReg}/g, '<code>$1</code>') : ''"></td>
<td>{{ slot['version'] || '--' }}</td>
</tr>
</tbody>
</table>
</template>
<template v-if="component.meta.methods">
<h2>${t('Functions', lang)}</h2>
<table>
<thead>
<tr>
<td>${t('name', lang)}</td>
<td>${t('params', lang)}</td>
<td>${t('description', lang)}</td>
<td>${t('required version', lang)}</td>
</tr>
</thead>
<tbody>
<tr v-for="(method, i) in component.meta.methods">
<td class="prop-name">
<el-tooltip content="${t('click to copy', lang)}" placement="left" :hide-after="0" :open-delay="50">
<span
v-clipboard:copy="i"
v-clipboard:success="onCopy">{{ i }}</span>
</el-tooltip>
</td>
<td v-html="method['params'] ? method['params'].replace(/${parseReg}/g, '<code>$1</code>') : ''"></td>
<td v-html="method['${lang}'].replace(/${parseReg}/g, '<code>$1</code>')"></td>
<td>{{ method['version'] }}</td>
</tr>
</tbody>
</table>
</template>
<template v-if="component.meta.variables">
<a class="anchor" id="variables">Variables</a>
<br/>
<h2>${t('Variables', lang)}</h2>
<table>
<thead>
<tr>
<td>${t('name', lang)}</td>
<td>${t('default value', lang)}</td>
<td>${t('description', lang)}</td>
<td>${t('inherited name', lang)}</td>
</tr>
</thead>
<tbody>
<tr v-for="(variable, i) in component.meta.variables">
<td class="prop-name">
<el-tooltip content="${t('click to copy', lang)}" placement="left" :hide-after="0" :open-delay="50">
<span
v-clipboard:copy="'@' + variable.name"
v-clipboard:success="onCopy">@{{ variable.name }}</span>
</el-tooltip>
</td>
<td>
<em
:ref="'propColor' + i"
v-if="!$refs['propColor' + i] || ($refs['propColor' + i][0] && $refs['propColor' + i][0].style.backgroundColor)"
class="prop-color"
:style="{ backgroundColor: variable.value }">
</em>
{{ variable.value }}
</td>
<td>{{ variable['desc']['${lang}'] || '--' }}</td>
<td>{{ variable.inherited_name }}</td>
</tr>
</tbody>
</table>
</template>
<template v-if="component.meta.tips && component.meta.tips['${lang}']">
<a class="anchor" id="tips">${t('Tips', lang)}</a>
<br>
<h2>${t('Tips', lang)}</h2>
<div>
<ul>
<li v-for="tip in component.meta.tips['${lang}']">
<el-tag size="mini" type="success" class="component-tip-tag">Q</el-tag> <span class="component-tip-question">{{ tip.q }}</span>
<div v-html="tip.a" class="tip-answer-box"></div>
</li>
</ul>
</div>
</template>
</div>
</template>
<!--<h2>社区相关讨论</h2>
[即将上线]
-->
<br>
<div v-if="issues.length">
<a class="anchor" id="Issues">Issues</a>
<br/>
<h2>${t('Related issues', lang)}</h2>
<ul>
<li v-for="issue in issues"><a target="_blank" :href="issue.html_url">#{{ issue.number}} <span style="color:#666;">{{ issue.title }}</span></a></li>
</ul>
</div>
<br>
<div v-if="gitMetas">
<a class="anchor" id="contributors">${t('Contributors', lang)}</a>
<h2>${t('Contributors', lang)}</h2>
<p>${t('Total commits quantity:', lang)} {{ gitMetas.commitCount }}，${t('Total contributors quantity:', lang)} {{gitMetas.commitUniqueCount}}
</p>
<a v-for="person in gitMetas.commitMembers" class="contributor-item" :href="'https://github.com/' + person.authorName" target="_blank" :title="'${t('contribute')}' + person.count">{{person.authorName}}</a>
</div>
<br>
<div v-if="metas.changes">
<a class="anchor" id="changelog">Changelog</a>
<br/>
<h2>${t('Releases', lang)}</h2>
<ul v-if="metas.changes">
<template v-for="(changelog, version) in metas.changes">
<li v-for="log in changelog['${lang}']">
<router-link :to="'/${lang}/changelog/' + version + '.html'" class="changelog-version">{{version}}</router-link> {{log}}
</li>
</template>
</ul>
</div>
<h2 v-if="metas.references">${t('Referrences', lang)}</h2>
<ul v-if="metas.references">
<li v-for="link in metas.references['${lang}']">
<a :href="link.link" target="_blank">{{link.title}}</a>
</li>
</ul>
<el-dialog
class="sourcec-code-dialog"
top="0"
width="80%"
:visible.sync="sourceCodeDialogVisibility">
<div class="code-box" contenteditable v-html="demoCode"></div>
</el-dialog>
</div>
</template>
<script>
import Axios from 'axios'
// const metas = require('json-loader!yaml-loader!../../../src/components/${componentName}/metas.yml')
const metas = ${JSON.stringify(metas, null, 2)}
const demos = ${JSON.stringify(demos, null, 2)}
let componentList = []
if (Array.isArray(metas.items)) {
try {
metas.items.forEach((item, index) => {
const meta = {
name: item,
meta: metas[item]
}
if (meta.meta.props === null) {
delete meta.meta.props
}
if (index === metas.items.length - 1) {
if (meta.meta) {
meta.meta.variables = metas.variables
}
}
componentList.push(meta)
})
} catch (e) {
console.log(e)
}
} else {
componentList.push({
meta: metas
})
}
const gitMetas = require('./${componentName}_git_metas.json')
const demoCode = decodeURIComponent(\`${demoCode}\`)
const domainMap = {
'development': 'http://localhost:8080/',
'production': 'https://vux.li/demos/v2/'
}
export default {
head: {
title: '${importName} ${t('component tutorial', lang)} | ${t('title', lang)}',
meta: [{
name: 'description',
content: 'Vue component ${componentName} for the VUX framework.'
}, {
name: 'keywords',
content: '${componentName}, vue-${componentName}, vux-${componentName}, vue mobile components'
}, {
property: 'og:title',
content: '${importName} ${t('component tutorial', lang)} | ${t('title', lang)}'
}, {
property: 'og:description',
content: 'Vue component ${componentName} for the VUX framework.'
}],
// https://support.google.com/webmasters/answer/189077?hl=en
link: ${JSON.stringify(getAlternate(lang, `/${lang}/components/${componentName}.html`))},
script: [
{
innerHTML:'${JSON.stringify(ldjson)}',
type: 'application/ld+json'
}
],
__dangerouslyDisableSanitizers: ['script']
},
filters: {
parseCode (str) {
return str.replace(/${parseReg}/g, '<code>$1</code>')
}
},
async mounted () {
const rs = await Axios.get('https://api.github.com/search/issues?q=repo:airyland/vux%20label:component/' + this.componentName)
this.issues = rs.data.items
this.hasReady = true
},
watch: {
async sourceCodeDialogVisibility (val) {
if (val) {
await this.$nextTick()
const mask = document.querySelector('.v-modal')
mask && mask.addEventListener('click', () => {
this.sourceCodeDialogVisibility = false
})
}
}
},
methods: {
onCopyError () {
this.$message({
type: 'error',
message: '${t('copy fail!', lang)}'
})
},
onCopy () {
this.$message({
type: 'success',
message: '${t('copy done!', lang)}'
})
},
showSourceCode () {
this.sourceCodeDialogVisibility = true
},
getTypeHTML (type) {
type = type || 'String'
if (/,/.test(type)) {
const list = type.split(',').map(function (one) {
return one.replace(/^\s+|\s+$/g, '')
}).map(function (one) {
const type = one ? one.toLowerCase() : 'string'
return '<span class="type">' + type + '</span>'
})
return list.join('<br>')
} else {
type = type ? type.toLowerCase() : 'string'
return '<span class="type">' + type + '</span>'
}
}
},
computed: {
lang () {
if (this.$route.path.indexOf('/en/') !== -1) {
return 'en'
}
if (this.$route.path.indexOf('/zh-CN/') !== -1) {
return 'zh-CN'
}
return 'en'
}
},
data () {
return {
demos,
isBeta: ${metas.beta ? 'true' : 'false'},
hasReady: false,
issues: [],
componentName: '${componentName}',
demoCode,
sourceCodeDialogVisibility: false,
showQr: false,
metas: metas,
gitMetas,
componentList,
localImportCode: \`${_localImportCode}\`,
globalImportCode: \`${_globalImportCode}\`,
needImport: ${needImport},
toc: ${JSON.stringify(toc)},
domain: domainMap[process.env.NODE_ENV]
}
}
}
</script>
<style>
.component-box {
position: relative;
}
.component-demo {
position: absolute;
right: 5px;
top: 15px;
}
.prop-color {
display: inline-block;
width: 10px;
height: 10px;
border: 1px solid #aaa;
}
.changelog-version {
width: 110px;
display: inline-block;
}
.component-extra-links {
position: relative;
font-size: 12px;
}
.component-extra-links a {
padding-right: 10px;
color: #999;
}
</style>
`
fs.writeFileSync(getPath(`./${lang}/components/${componentName}.vue`), str)
})
})
langs.forEach(lang => {
glob.sync(getPath(`./${lang}/components/*.vue`)).forEach(component => {
component = '..' + component.replace(__dirname, '')
const name = component.replace(`../${lang}/components/`, '').replace('.vue', '')
if (!include || isInclude(name, include)) {
str += `
routes.push({
path: '/${lang}/components/${name}.html',
component: () => import('${component}')
})
`
paths.push(`/${lang}/components/${name}.html`)
}
})
})
if (include) {
paths = paths.filter(path => {
return isInclude(path, include)
})
}
str += `
routes.push({
path: '*',
component: () => import('../404.md')
})
`
const ori = fs.readFileSync(getPath('./src/index.js'), 'utf-8')
fs.writeFileSync(getPath('./src/_index.js'), ori.replace('const routes = []', `const routes = []\n${str}`))
fs.writeFileSync(getPath('./src/routes.json'), JSON.stringify(paths, null, 2))
fs.writeFileSync(getPath('./sitemap.txt'), paths.map(path => `https://doc.vux.li${path}`).join('\n'))
fs.writeFileSync(getPath('./algolia.json'), JSON.stringify(contents, null, 2))
function camelCase(input) {
let str = input.toLowerCase().replace(/-(.)/g, function (match, group1) {
return group1.toUpperCase();
});
str = str.replace(/_(.)/g, function (match, group1) {
return group1.toUpperCase();
});
return str
}
function _camelCase(input) {
let str = camelCase(input)
return str.slice(0, 1).toUpperCase() + str.slice(1)
}
================================================
FILE: docs/component-contributors.js
================================================
const shell = require('shelljs')
const path = require('path')
shell.cd(path.join(__dirname + '../../'))
const glob = require('glob')
const fs = require('fs')
const _ = require('lodash')
const componentsPath = path.join(__dirname, '../src/components/**/metas.yml')
const components = glob.sync(componentsPath)
const format = JSON.stringify({
hash: '%H',
authorName: '%an',
authorEmail: '%ae',
date: '%aI',
// subject: '%s'
})
components.map(one => one.replace('/metas.yml', '')).forEach(one => {
const name = one.split('components/')[1]
const metaFile = path.join(__dirname, `./zh-CN/components/${name}_git_metas.json`)
const rs = shell.exec(`git log --pretty='format:${format},' -- ${one}`, {
silent: true
})
let str = `[${rs.stdout.slice(0, -1).replace(/\n/g, ' ').replace(/"/g, '\"')}]`
str = JSON.parse(str)
const result = {
commitCount: str.length,
commitMembers: _.uniqBy(str, function (one) {
return one.authorName.toLowerCase()
}).map(one => {
return {
count: str.filter(_one => _one.authorName.toLowerCase() === one.authorName.toLowerCase()).length,
authorName: one.authorName
}
})
}
result.commitUniqueCount = result.commitMembers.length
fs.writeFileSync(metaFile, JSON.stringify(result, null, 2))
fs.writeFileSync(metaFile.replace('zh-CN', 'en'), JSON.stringify(result, null, 2))
})
================================================
FILE: docs/en/.gitkeep
================================================
================================================
FILE: docs/en/README.md
================================================
---
title: 关于 VUX
---
<p align="center">
<br>
<a href="https://vux.li/demos/v2?x-page=v2-doc-home">
<img src="https://ws1.sinaimg.cn/large/663d3650gy1fq670tkjoij207s07sq2p.jpg" width="100" alt="">
</a>
<br>
<a href="https://vux.li/demos/v2?x-page=v2-doc-home">
预览地址>>
</a>
<br>
<br>
<a href="https://github.com/airyland/vux">
<img src="https://img.shields.io/github/stars/airyland/vux.svg?style=social&label=Star" alt="">
</a>
<a href="https://github.com/airyland/vux">
<img src="https://img.shields.io/github/forks/airyland/vux.svg?style=social&label=Fork" alt="">
</a>
<a href="https://github.com/airyland/vux">
<img src="https://img.shields.io/github/watchers/airyland/vux.svg?style=social&label=Watch" alt="">
</a>
<br>
<br>
<a href="https://github.com/airyland/vux/issues">
<img src="https://img.shields.io/github/issues/airyland/vux.svg?style=flat-square" alt="">
</a>
<a href="https://github.com/airyland/vux/issues">
<img src="https://isitmaintained.com/badge/resolution/airyland/vux.svg?style=flat-square" alt="">
</a>
<a href="https://github.com/airyland/vux/graphs/contributors">
<img src="https://img.shields.io/github/contributors/airyland/vux.svg?style=flat-square" alt="">
</a>
<br>
<a href="https://www.npmjs.com/package/vux">
<img src="https://img.shields.io/npm/l/vux.svg?style=flat-square" alt="">
</a>
<a href="https://www.npmjs.com/package/vux">
<img src="https://img.shields.io/npm/v/vux.svg?style=flat-square" alt="">
</a>
<a href="https://www.npmjs.com/package/vux">
<img src="https://img.shields.io/npm/dm/vux.svg?style=flat-square" alt="">
</a>
<a href="https://www.npmjs.com/package/vux">
<img src="https://img.shields.io/npm/dt/vux.svg?style=flat-square" alt="">
</a>
<br>
<br>
</p>
::: warning
**敲黑板**：VUX 必须配合 `vux-loader` 使用，如果不使用 vux2 模板请按照<router-link to="/zh-CN/install/manual-usage.html">文档</router-link>正确配置。<br>
**less@3.x** 有严重的兼容问题，请暂时使用 **less@^2.7.3**。
:::
## 简介
`VUX`（读音 [v'ju:z]，同 `views`）是基于`WeUI`和`Vue`(2.x)开发的移动端UI组件库，主要服务于微信页面。
基于`webpack + vue-loader + vux`可以快速开发移动端页面，配合`vux-loader`方便你在`WeUI`的基础上定制需要的样式。
`vux-loader`保证了组件按需使用，因此不用担心最终打包了整个vux的组件库代码。
`VUX`并不完全依赖于`WeUI`，`VUX` 在 `WeUI` 的基础上扩展了多个常用组件，但是尽量保持整体UI样式接近`WeUI`的设计规范。
::: warning
VUX 并不是一个能解决所有场景的完美解决方案(实际上也没有一个方案能解决所有问题)，也会出现某些`bug`或者某些特性不支持，所以如果遇到问题麻烦及时**不带情绪正确反馈**，**我们乐于及时解决描述详细方便重现的问题**。<br>
即使你不直接使用 `VUX` 组件代码, 你依然可以参考 VUX 代码来实现自己的组件库。如果一定程度上帮助到了你，那么维护这个项目也就有所意义。
:::
## 订阅版本发布通知
请使用微信扫描
<img src="https://ws1.sinaimg.cn/large/663d3650gy1fpno3msj6wj20dw0dw748.jpg" width="150">
## 提示
::: tip
`VUX` 是`库`而非`框架`，虽然有专用的 `vux-loader`，但并不影响你自由地使用其他组件库或者工具库。<br><br>
`VUX` 使用的 CSS 预处理工具是 `less`(同 WeUI)，但(利益于 .vue 单文件组件的灵活性)这并不影响你使用 `SASS` 等其他预处理器。<br><br>
用以表示该组件库时请使用大写名字 `VUX`，用在说明版本号时使用小写 `vux@2.x`。
:::
================================================
FILE: docs/en/about/before-using-vux.md
================================================
---
title: 开始使用 VUX 之前
---
# 开始使用 VUX 之前
::: warning
如果你刚从后端转到前端，可能会被目前前端(表面的)工程复杂度惊吓到，但是放心，使用 `vue-cli` 从模板创建项目可以快速开始编码、构建，仅仅是几行简单的命令不是么？
:::
在使用 VUX 之前需要你至少已经会使用 `Vue`，同时需要你大概了解 `Node.js`，`npm`，`cnpm`，`yarn` 这些东西。
::: tip
建议 `Node.js` 版本在 `7.6.0` 以上。
:::
## 相关工具
### WeUI
VUX 样式基于 [WeUI](https://github.com/weui/weui)，但是你不必通过使用 VUX 来使用 `WeUI`。简单的页面你可以直接引入 `WeUI` 样式。详细请参考 [WeUI 文档](https://github.com/weui/weui)。
### Vue
VUX 基于 `Vue` 的组件库，意味着你需要有 `Vue` 的基础知识。
如果还没有了解过，建议先看看[Vue 官方文档](https://cn.vuejs.org)。
### Webpack
如果你直接使用 `vux2` 模板，你可以暂时不用了解。当你需要自定义一些配置时自然就能很快了解了。
[Webpack 文档](https://webpack.js.org)
### vue-cli
Vue 官方用于快速创建项目的工具。
``` js bash
npm install vue-cli -g
```
或者使用 yarn
``` bash
yarn global add vue-cli
```
[vue-cli 文档](https://github.com/vuejs/vue-cli)
### vue-loader
webpack loader，用于编译 `.vue` 文件，官方模板已经帮你配置好。
[vue-loader 文档](https://vue-loader.vuejs.org)
### vux-loader
VUX 组件库的 webpack loader，实现按需加载等功能。它不是替代 `vue-loader` 而是配合 `vue-loader` 使用。如果你使用 vux2 模板，暂不需要手动使用它。
================================================
FILE: docs/en/about/contributors.vue
================================================
<template>
<div>
<h1>贡献者列表<span class="count"> (目前有 <code>{{ contributors.length }}</code> 个有为青年贡献了代码)</span></h1>
<div class="tip">
无论是编辑文档还是提交代码都可以帮助 VUX 做得更好。
</div>
<ul class="list">
<li v-for="user in contributors">
<a :href="user.html_url" target="_blank" class="link">
<img :src="user.avatar_url" class="avatar">
<br>
<span>{{ user.login }}</span>
</a>
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios'
import { mapState } from 'vuex'
export default {
preFetch ({ store }) {
return store.dispatch('updateContributors')
},
computed: mapState(['contributors']),
head: {
title: 'VUX 贡献者列表'
}
}
</script>
<style scoped>
.link {
color: #000;
display: inline-block;
width: 120px;
}
.count {
font-size: 14px;
}
.list {
list-style: none;
padding-left: 0;
}
.list li {
margin: 0;
text-align: center;
float: left;
padding: 15px 15px 15px 0;
}
.avatar {
width: 64px;
height: 64px;
border-radius: 40px;
}
</style>
================================================
FILE: docs/en/about/showcase.md
================================================
---
title: VUX 使用案例
---
# 使用案例
> 如果你的产品在使用`VUX`, 请直接发 PR 修改 `docs/zh-CN/about/showcase.md`（置于列表最后，统一格式：二维码必须无白边框）。
<img src="https://ws1.sinaimg.cn/large/663d3650gy1fpwihri9hzj2066066dgb.jpg" width="150">
<img src="https://ws1.sinaimg.cn/large/663d3650gy1fpwii8udl7j2088088jrj.jpg" width="150">
<img src="https://ws1.sinaimg.cn/large/663d3650gy1fpwiiq61ihj207v07vjr8.jpg" width="150">
<img src="https://ws1.sinaimg.cn/large/663d3650gy1fpwij2qezej2066066dfy.jpg" width="150">
<img src="https://ws1.sinaimg.cn/large/663d3650gy1fpwijfw73zj20aa0aaaa9.jpg" width="150">
<img src="https://ws1.sinaimg.cn/large/663d3650gy1fpwijtrvp1j20do0do4gp.jpg" width="150">
<img src="https://ws1.sinaimg.cn/large/663d3650gy1fpwike27c8j207c07cdg4.jpg" width="150">
<img src="https://ws1.sinaimg.cn/large/663d3650gy1fpwikqk1xwj2088088myl.jpg" width="150">
<img src="https://ws1.sinaimg.cn/large/663d3650gy1fpwil30l2oj20b40b4wf0.jpg" width="150">
<img src="https://ws1.sinaimg.cn/large/663d3650gy1fpwilfmz9xj20aa0aaacp.jpg" width="150">
<img src="https://ws1.sinaimg.cn/large/663d3650gy1fpwilte2naj20aa0aajru.jpg" width="150">
<img src="https://ws1.sinaimg.cn/large/663d3650gy1fpwim77oc5j2064066gnh.jpg" width="150">
<img src="https://ws1.sinaimg.cn/large/663d3650gy1fpwimm8dtkj208508cqjf.jpg" width="150">
<img src="https://ws1.sinaimg.cn/large/663d3650gy1fpmuvjf5x6j208c08c74f.jpg" width="150">
<img src="https://common-1251785959.cosbj.myqcloud.com/mdachu.jpg" width="150">
================================================
FILE: docs/en/about/thanks.md
================================================
---
title: 感谢
---
# Thanks
## VUX 参考或者使用了以下开源项目的代码
+ [Vue](https://github.com/vuejs/vue)
+ [WeUI](https://github.com/weui/weui)
+ [FrozenUI](https://github.com/frozenui/frozenui)
+ [Ant Design](https://github.com/ant-design/ant-design)
+ [Ant Design Mobile](http://github.com/ant-design/ant-design-mobile)
+ [XScroll](https://github.com/huxiaoqi567/xscroll)
+ [Ionic](https://github.com/driftyco/ionic)
+ [SUI Mobile](https://github.com/sdc-alibaba/SUI-Mobile)
+ [PhotoSwipe](https://github.com/dimsemenov/PhotoSwipe)
## 工具框架
- 世界上最好的语言 `JavaScript`
- 啥都能做的前端构建工具 [Webpack](https://webpack.js.org/)
- 简单好用的文档展示工具 [Docute](https://docute.js.org/#/)
================================================
FILE: docs/en/contribution/donate.md
================================================
---
title: 捐赠支持 VUX
---
## 捐赠
* [Patreon](https://www.patreon.com/airyland)
* [PayPal](https://paypal.me/airyland)
* 支付宝 airyland@qq.com
================================================
FILE: docs/en/contribution/issue.md
================================================
---
title: 如何提 issue
---
# 如何提 issue
::: tip
使用本项目意味着你也有义务帮助其变得更好。
:::
不要浪费维护者时间。
不要让维护者帮你学习`Vue`，帮你熟悉`vue-loader`，甚至帮你写代码。
不要认为随便一句话就能让维护者明白你的意思，我们没有你想象的那么厉害。
不要提没有任何意义的、代码中带有业务逻辑不方便重现的Issue。
直接关闭你的`issue`不是对你不满，是你提问题方式不对，没有必要再浪费时间说明为什么要关闭你的`issue`。
马虎的提问，缺少上下文和重现步骤是在浪费彼此时间。
================================================
FILE: docs/en/contribution/pr.md
================================================
---
title: 如何贡献
---
# 如何贡献
## 文档更新
如果修改了组件代码，需要在组件目录的`metas.yml`加上changes，直接使用`next`作为版本号(如果已经存在该版本号，则直接添加变更条目即可)。
中括号内为变更类型，可选值 `fix` `enhance` `feature` `change`
比如：
``` yml
changes:
next:
en:
- '[fix] fix *** bug #issueId'
- '[feature] new feature'
zh-CN:
- '[fix] 修复 *** bug #issueId'
```
::: tip
当文档相关的 `PR`被合并后，文档服务器会在`5分钟`内拉取最新代码并执行`npm run build-docs`及`npm run build`实现文档及`demo`更新。
:::
## 为什么使用 next 为版本号
`next` 表示下个版本，未发布时在 `changelog` 里显示 `next`，提醒用户一些开发中的代码尚未发布。
当进行版本发布时，文档中的 `next` 会被脚本代替成真正的版本号，至此发布完毕。
这样的最大好处是更新代码时可以直接写 `changelog` 不用在意要写哪个版本号，在发布时翻 commit 记录写 `changelog` 是件比较浪费时间的事。
================================================
FILE: docs/en/contribution/vux-development.md
================================================
---
title: VUX 源码本地运行
---
# VUX 源码本地运行
::: tip
请更新 `NodeJS` 版本到 `v7.6.0` 以上，`build` 命令逐步使用 `async`。
:::
``` bash
yarn // 使用 yarn.lock 保证依赖版本一致
yarn dev
```
## 本地查看文档
``` bash
npm run doc:build // 构建文档
cd docs
yarn
npm run dev // 耗时较长
```
## 文档相关命令
> docs 目录下的相关命令，它们是 npm run doc:build 的一部分，但是可以单独运行
``` bash
node compile // 生成文档路由
node component-contributions // 从 git 记录里获取每个组件提交历史
npm run doc:dev // 运行
```
## 构建部分文档
文档页面比较多等待 build 命令会长，因此可以只构建部分文档方便快速查看。
``` bash
cd docs
node compile --include datetime // 只构建 datetime 相关文档
npm run dev
```
================================================
FILE: docs/en/css/1px.md
================================================
---
title: 1px 解决方案
---
# 1px 解决方案
::: tip
1px 方案在 VUX 组件内应用广泛，包括 `Grid`, `ButtonTab`, `XTable`, `XButton`, `Cell` 等等。
利用 `Flexbox` + `1px` 你可以实现复杂的宫格布局。
:::
## 引入
在你项目的`App.vue`引入，组件内不需要再重复引入。
``` html
<style lang="less">
@import '~vux/src/styles/1px.less';
</style>
```
## 可用类名：
- `vux-1px-l` 左边框
- `vux-1px-r` 右边框
- `vux-1px-t` 上边框
- `vux-1px-b` 下边框
- `vux-1px-tb` 上下边框
- `vux-1px` 全边框
================================================
FILE: docs/en/css/close.md
================================================
---
title: 纯 css close 图标
---
# 纯 css close 图标
::: tip
关闭图标主要应用于弹窗(dialog)关闭按钮以及弹窗(popup)头部的关闭按钮。
:::
## 使用
在你项目的`App.vue`引入，组件内不需要再重复引入。
``` html
<style lang="less">
@import '~vux/src/styles/close.less';
</style>
```
## 类名
- `vux-close`
``` html
<span class="vux-close"></span>
```
可以参考 `XDialog` 演示。
## 颜色
当你想设置图标颜色时，直接设置 color 即可。
``` html
<span class="vux-close" style="color:red;"></span>
```
================================================
FILE: docs/en/css.md
================================================
---
nav: zh-CN
---
## 1px
::: tip
1px 方案在 VUX 组件内应用广泛，包括 Grid, ButtonTab, XTable, XButton, Cell 等等。
<br>
<br>
利用 flexbox + 1px 你可以实现复杂的宫格布局。
:::
在你项目的`App.vue`引入，组件内不需要再重复引入。
``` html
<style lang="less">
@import '~vux/src/styles/1px.less';
</style>
```
可用类名：
- `vux-1px-l` 左边框
- `vux-1px-r` 右边框
- `vux-1px-t` 上边框
- `vux-1px-b` 下边框
- `vux-1px-tb` 上下边框
- `vux-1px` 全边框
## close
::: tip
关闭图标主要应用于弹窗(popup)的左侧关闭按钮。
:::
在你项目的`App.vue`引入，组件内不需要再重复引入。
``` html
<style lang="less">
@import '~vux/src/styles/close.less';
</style>
```
可用类名：
- vux-close
``` html
<span class="vux-close"></span>
```
可以参考 `XDialog` 演示。
当你想设置图标颜色时，直接设置 color 即可。
``` html
<span class="vux-close" style="color:red;"></span>
```
================================================
FILE: docs/en/development/i18n.md
================================================
---
title: 国际化 i18n
---
# 国际化
::: warning
暂时只支持配合`vux-loader`使用。
如果你只需要默认的中文组件，那么你可以略过下面说明，只要启用`vux-ui`插件即可。
:::
默认不配置此插件时，vux源码会按照默认语言`zh-CN`进行静态编译，和原来的使用没有明显不同。
详细请参照 <a router-link="/zh-CN/vux-loader?id=i18n" style="color:#42b983;">vux-loader的vux-i18n文档</a>
================================================
FILE: docs/en/development/remove-click-delay-fastclick.md
================================================
---
title: Vue 应用移除移动端页面点击延迟
---
# 移除移动端页面点击延迟
::: tip
直接使用 `WeUI` 样式并引入 `fastclick` 会导致一些点击问题，VUX 组件内部已经做了相关处理。
:::
## 引入 fastclick
在`main.js`里引用`fastclick`
``` js
const FastClick = require('fastclick')
FastClick.attach(document.body)
// done
```
================================================
FILE: docs/en/development/router.md
================================================
---
title: vue-router 路由
---
# 路由
推荐直接使用官方 [vue-router](https://github.com/vuejs/vue-router)，`VUX`部分组件支持`link`属性直接支持`vue-router`的路由参数，`vux2`模板内置了`vue-router`。
::: warning
<del>如果使用了过渡(转场动画)，在`iPhone`上使用`左划返回`时动画会再执行一遍，目前没有找到可行的处理方法，如果你有处理方案，欢迎`PR`。</del>
[https://github.com/airyland/vux/pull/2259](https://github.com/airyland/vux/pull/2259)
:::
================================================
FILE: docs/en/development/theme.md
================================================
---
title: 主题颜色配置
---
# 主题颜色配置
## 配置插件
::: warning
暂时只支持配合`vux-loader`使用。
注意的是主题文件不能引入其他less文件，只能为简单变量列表。
:::
请配置vux-loader的`less-theme`插件，指定用以覆盖的less文件路径：
``` js
{
name: 'less-theme',
path: 'src/styles/theme.less' // 相对项目根目录路径
}
```
## 可配置颜色
源码地址：<a href="https://github.com/airyland/vux/blob/v2/src/styles/variable.less">https://github.com/airyland/vux/blob/v2/src/styles/variable.less</a>
::: tip
更多配置需求请通过 issue 提出。
:::
## demo站点的示例配置
源代码地址：[https://github.com/airyland/vux/blob/v2/src/theme.less](https://github.com/airyland/vux/blob/v2/src/theme.less)
## 内部如何实现的？
`vux-loader` 在每个 `less` 文件的编译过程中重写了 `less-loader` 的变量参数，使其能直接覆盖原来变量。
================================================
FILE: docs/en/development/typescript.md
================================================
---
title: TypeScript 支持
---
# TypeScript 支持
> 即将支持
================================================
FILE: docs/en/development/vue-ajax.md
================================================
---
title: Vue 中使用 ajax
---
# 发送 ajax 请求
:::tip
`AjaxPlugin` 插件依赖于 [axios](https://github.com/mzabriskie/axios)
详细 API 文档请查看：[axios](https://github.com/mzabriskie/axios)
:::
## 版本要求
`AjaxPlugin`在`vux@^2.1.0-rc.20`开始支持
## 引入
`main.js` 入口文件中引入：
``` js
import { AjaxPlugin } from 'vux'
Vue.use(AjaxPlugin)
```
## 兼容性问题
需要注意的是`axios`是基于`Promise`的，因此如果你需要兼容低版本浏览器([caniuse](http://caniuse.com/#feat=promises))，需要引入`polyfill`。
`Polyfill` 推荐使用 [es6-promise](https://github.com/stefanpenner/es6-promise)
``` js
require('es6-promise').polyfill()
```
## 全局使用
``` js
Vue.http.post('/api').then()
```
## 组件中使用
``` js
export default {
created () {
this.$http.post('/api').then(({data}) => {
console.log(data)
})
}
}
```
================================================
FILE: docs/en/development/vue-global-method.md
================================================
---
title: Vue 全局公用函数
---
# vue 全局公用函数
如果你需要让一个工具函数在每个组件可用，可以把方法挂载到 `Vue.prototype`上。
## 注册
`main.js` 中
``` js
Vue.prototype.$method = function () {}
```
::: tip
一般建议函数名使用 `$` 前缀。像 `vue-router` 的 `$route` 和 `$router`。
:::
## 使用
那么组件代码里
``` js
export default {
created () {
this.$method()
}
}
```
## 说明
挂载到 `prototype` 上是为了方便组件内直接用 `this.$method` 来使用，你也可以直接用 `Vue.method`，这样同样可以全局使用，不过在组件内就需要再 import 一次 `Vue` 了。
================================================
FILE: docs/en/development/vue-google-analytics.md
================================================
---
title: Vue 中使用谷歌统计
---
# 使用谷歌统计
单页面应用切换时要手动发送页面统计，首先在 `index.html` 或者 `main.js` 里引入谷歌统计代码：
``` js
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-yourID', 'auto')
ga('send', 'pageview') // 是否要统计着陆页面访问，取决于你的需求，这个不一定需要，会和`router`统计有重复
```
``` js
// main.js 里，如果你使用了 vue-router
router.afterEach(function (to) {
if (window.ga) {
window.ga('set', 'page', to.fullPath) // 你可能想根据请求参数添加其他参数，可以修改这里的 to.fullPath
window.ga('send', 'pageview')
}
})
```
================================================
FILE: docs/en/development/vue-loader-autoprefix.md
================================================
---
title: vue-loader autoprefix 推荐配置
---
# autoprefix 推荐配置
`vue`官方模板的设置是`last 2 versions`，可能会导致你在某些`Android`机子上出现问题。
如果你使用 `last 7 versions` 会生成不必要的`-ms`前缀代码.
因此建议同`WeUI`一样，使用配置 `['iOS >= 7', 'Android >= 4.1']`
## 直接在 vux-loader 里配置
如果你没有在 postcss 里配置，你可以直接配置 vux-loader 的 `duplicate-style` 插件：
``` js
{
name: 'duplicate-style',
options: {
cssProcessorOptions : {
safe: true,
zindex: false,
autoprefixer: {
add: true,
"browsers": [
"iOS >= 7",
"Android >= 4.1"
]
}
}
}
}
```
================================================
FILE: docs/en/development/vue-loader-disable-eslint.md
================================================
---
title: vue-loader 禁用 eslint
---
# 禁用 eslint
并不推荐禁用`eslint`, 编码规范可以一定程序上保证代码质量。但是如果你确实想禁用，可以删除`build/webpack.base.conf.js`里的相关代码。
``` js
preLoaders: [
{
test: /\.vue$/,
loader: 'eslint',
include: [
path.join(projectRoot, 'src')
],
exclude: /node_modules/
},
{
test: /\.js$/,
loader: 'eslint',
include: [
path.join(projectRoot, 'src')
],
exclude: /node_modules/
}
]
```
如果你只是想禁用对某一文件的检测，那么可以在`.eslintignore`里添加规则。
如果你是想禁止某一行的检测，那么可以使用`// eslint-disable-line`。
更加灵活的使用参考 [eslint文档](http://eslint.org/docs/user-guide/configuring#disabling-rules-with-inline-comments)。
================================================
FILE: docs/en/development/vue-router-page-transition.md
================================================
---
title: 页面切换转场动画
---
# 页面切换转场动画
你可以注意到 demo 站点的切换动画，本质上是使用 `Vue` 的 `transition` 组件实现的。
- [ ] todo
================================================
FILE: docs/en/development/vue-show-loading.md
================================================
---
title: 页面切换时显示loading
---
# 页面切换显示loading
移动端如果使用异步组件加载那么还是需要一点等待时间的，在网络慢时等待时间会更长。显示`Loading`状态缓解一下用户等待情绪就十分重要。
如果你使用`vue-router`和`vuex`，那么可以很容易实现。
首先，注册一个`module`来保存状态
``` js
const store = new Vuex.Store({}) // 这里你可能已经有其他 module
store.registerModule('vux', { // 名字自己定义
state: {
isLoading: false
},
mutations: {
updateLoadingStatus (state, payload) {
state.isLoading = payload.isLoading
}
}
})
```
然后使用`vue-router`的`beforeEach`和`afterEach`来更改`loading`状态
``` js
router.beforeEach(function (to, from, next) {
store.commit('updateLoadingStatus', {isLoading: true})
next()
})
router.afterEach(function (to) {
store.commit('updateLoadingStatus', {isLoading: false})
})
```
在`App.vue`里使用`loading`组件并从`vuex`获取`isLoading`状态
``` html
<loading v-model="isLoading"></loading>
```
``` js
import { Loading } from 'vux'
import { mapState } from 'vuex'
export default {
components: {
Loading
},
computed: {
...mapState({
isLoading: state => state.vux.isLoading
})
}
}
```
done.
如果你觉得在加载比较快时`Loading`组件一闪而过体验也不大好，那么你可以延迟设置`loading=false`。
================================================
FILE: docs/en/development/vue-webpack-code-splitting-async.md
================================================
---
title: Vue 异步加载组件
---
# 异步加载组件
将所有页面组件一次性加载是一个很浪费资源和考验用户耐心的做法，尤其在移动端。
## 使用方法
`webpack` 提供了[code splitting](https://webpack.js.org/guides/code-splitting-require/)，你可以按照下面写法实现当切换到特定路由时才加载代码。
需要注意的是 `vue-loader@13.0.0` 语法有所变更，具体参照发布说明 [v13.0.0](https://github.com/vuejs/vue-loader/releases/tag/v13.0.0)
``` js
// vue-loader@13.0.0 之前
const Foo = () => import('./Foo.vue') // 在 Vue 2.4 + vue-router 2.7 版本下可以正确运行
// vue-loader@13.0.0
const Foo = () => import('./Foo.vue').then(m => m.default)
```
## 组件打包问题
如果你在不同的进行了代码分割的 .vue 文件引入了相同的组件，在打包时两个路由的代码都会重复打包该组件。
你可以对重复使用的组件在 `main.js` 进行全局注册，以减少相应 chunk file 的大小并提高下载速度。
================================================
FILE: docs/en/development/vue-webpack-env.md
================================================
---
title: Vue + webpack 区分测试环境和生产环境
---
# 区分测试环境和生产环境
如果你使用了 `vux2` 模板或者 `webpack` 模板，默认你可以直接通过判断 `process.env.NODE_ENV` 来区分
比如`统计代码`仅放在 `production` 环境，在不同环境里使用不同的 `API` 接口地址。
``` js
if (process.env.NODE_ENV === 'production') {
// 干一些线上才要做的事情
}
if (process.env.NODE_ENV === 'development') {
// 干一些测试时不可告人的事情
}
```
如果你是自己配置的环境，可以参考 [webpack DefinePlugin 文档](https://webpack.js.org/plugins/define-plugin/)
================================================
FILE: docs/en/development/vux-nuxt-ssr.md
================================================
---
title: vux 使用 nuxt 实现服务端渲染
---
# vux 使用 nuxt 实现服务端渲染
请直接参考源码目录 [/ssr/nuxt](https://github.com/airyland/vux/tree/v2/ssr/nuxt)
================================================
FILE: docs/en/directives/v-transfer-dom.md
================================================
---
title: v-transfer-dom 指令
---
# v-transfer-dom 指令
在移动端应用里，为了便于代码组织，通常我们要将组件放在各个路由的 `.vue` 文件里，但是因为此时组件并不在 `body` 下，加上定位，overflowscrolling 设置等原因，会出现遮罩在弹层之上，z-index 失效等问题。
因此我们推荐在纯弹窗类组件比如 `Alert` `Popup` `XDialog` 等组件上使用 `v-transfer-dom` 实现自动移动到 body 下，解决以上问题。
::: warning
必须有一个 `div` 作为占位元素否则会出错
:::
## 使用
### 注册局部指令
``` js
import { TransferDom } from 'vux'
export default {
directives: {
TransferDom
}
}
```
### 注册全局指令
``` js
import { TransferDom } from 'vux'
Vue.directive('transfer-dom', TransferDom)
```
### 模板使用
``` html
<div v-transfer-dom>
<popup v-model="show"></popup>
<div>
```
================================================
FILE: docs/en/faq/$t-is-not-defined.md
================================================
---
title: $t is not defined
---
# $t is not defined
一般是两个原因：
## cnpm 导致的问题
如果是直接使用模板后并且使用 `cnpm` 报错，请升级到 `vux-loader@1.0.58`。
该问题出现原因是 `cnpm` 安装后 `node_modules` 里的模块为快捷方式，而 `vux-loader` 之前版本没有考虑到这一特殊情况。
## 未正确配置动态 i18n
demo例子使用`$t`是因为demo启用了`i18n`，如果你没有使用`vuex-i18n`等相关`i18n`插件，请不要在代码中使用`$t`函数
================================================
FILE: docs/en/faq/Uncaught-SyntaxError-Unexpected-token-export.md
================================================
---
title: Uncaught SyntaxError: Unexpected token export
---
# Uncaught SyntaxError: Unexpected token export
原因是Vux的js源码没配置babel，你可以在webpack配置的loaders加上
``` js
{
test: /vux.src.*?js$/,
loader: 'babel'
}
```
或者启用`vux-loader`的`vux-ui`插件。
================================================
FILE: docs/en/faq/can-vux-used-in-weapp.md
================================================
---
title: VUX 能否在微信小程序里使用
---
# VUX 能否在微信小程序里使用
Sorry，不能。微信小程序是个相对封闭的平台，无法简单地适配也没有计划支持小程序版本。
目前企业主体用户可以使用 `web-view` 组件直接显示 web 页面，间接地使用 VUX。
## mpvue 解决方案能否直接迁移 VUX
目前 [mpvue](http://mpvue.com/) 还不支持 `slot`、`slot-scope`，因此迁移有难度，并且小程序存在较多差异，暂未计划。
================================================
FILE: docs/en/faq/cannot-resolve-inline-desc.md
================================================
---
title: Can't resolve '../inline-desc' in
---
# Can't resolve '../inline-desc' in
webpack resolve 配置
``` js
resolve: {
extensions: ['', '.js', '.vue', '.json']
}
```
================================================
FILE: docs/en/faq/difference-between-vux-template-and-webpack-template.md
================================================
---
title: vux2 和 Vue 官方 webpack 模板区别是什么？
---
# vux2 和 Vue 官方 webpack 模板区别是什么？
`vux2` 模板 fork 自 `webpack` 模板并进行了配置，和 `webpack` 模板基本同步，因此建议直接使用 vux2 模板。
================================================
FILE: docs/en/faq/document-framework.md
================================================
---
title: 文档是用什么工具编写的？
---
# 文档是用什么工具编写的？
早期版本使用的是 [Docute](https://docute.js.org) by [egoist](https://github.com/egoist)。在`Docute`基础上做了一点样式修改。
2.2.1 后面版本出于 `SEO` 考虑使用 `Vue` 的服务端渲染，使用的框架同样是 [egoist](https://github.com/egoist) 开发的 [ream](https://github.com/ream/ream)。
文档部分样式参照了 [eggjs.org](https://eggjs.org/)，表示感谢。
因此目前无论是组件还是文档都是完全基于 `Vue`，cool right?
================================================
FILE: docs/en/faq/does-vux-support-weex.md
================================================
---
title: Does VUX support weex
---
# Does VUX support weex
No, and not plan to support it.
================================================
FILE: docs/en/faq/dupicate-style.md
================================================
---
title: 样式冗余
---
# 样式冗余
## 调试时
调试时如果你审查元素样式发现有多个重复样式是正常的，因为不同组件可能引用了同样的less源码，而调试时是直接把不同组件样式用`<style>`标签插入页面。
## 打包时
确保在`vux-loader`里使用`duplicate-style`插件来实现对构建css进行冗余压缩。
## 异步路由的样式
一般情况下，打包后异步路由的样式会使用 js 的方式插入到页面，有时候这并不是我们所要的。可以通过配置 `ExtractTextPlugin` 插件的 `allChunks` 实现样式抽离。
``` js
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
allChunks: true
})
```
================================================
FILE: docs/en/faq/is-vux-wechat-official-project.md
================================================
---
title: VUX 是否为微信团队项目
---
# VUX 是否为微信团队项目
否。但是依赖的WeUI是微信团队的开源项目，感谢微信团队。
================================================
FILE: docs/en/faq/vux-build-issue.md
================================================
---
title: VUX 打包体积过大
---
# VUX 打包体积过大
一般是以下原因导致的：
## import 语法使用问题
在 `vux-loader@1.0.61` 以下版本，如果你在 `import` 和 `{` 之前没有空格，将不会被解析成按需引入的，比如：
``` js
import{Group, Cell} from 'vux'
```
如果是这一情况，纠正或者升级到 vux-loader >= 1.0.61 可解决。
::: tip
建议开启 `eslint` 来避免这一情况，即使 `vux-loader` 支持，更严格的编码规范利于开发维护。
:::
## 没有正确配置 vux-loader
参照文档配置或者使用 `airyland/vux2` 模板。
## 不标准的写法
vux-loader 基于代码文本替换实现按需引入，可能有部分奇怪的写法导致不能正确解析。可以建个 repo 联系作者解决。
同时强烈推荐开启 eslint 保证编码质量。
## 注释里有 import 语句
在 `vux-loader@1.0.67` 以下版本，如果存在单行注释里有从 VUX 引入组件会导致出现问题。请升级到最新。
================================================
FILE: docs/en/faq/vux-server-render-support.md
================================================
---
title: VUX 服务端渲染
---
# VUX 服务端渲染
目前支持 `NUXT` 渲染，可以参考例子：[https://github.com/nuxt/nuxt.js/tree/dev/examples/with-vux](https://github.com/nuxt/nuxt.js/tree/dev/examples/with-vux)。
================================================
FILE: docs/en/faq/what-is-vux-virtual-component.md
================================================
---
title: 什么是虚拟组件(virtual component)
---
# 什么是虚拟组件(virtual component)
## 概念
`虚拟组件` 是 `VUX` 组件特有的概念。它指的是一个组件不需要 `import` 就能使用，组件的代码会在编译时被 `vux-loader` 替换成真实的 `html` 代码，比如 `x-icon` 组件。
## 为什么这样实现
它可以解决按需引入的问题，比如不需要把所有 `svg` 引入组件而是在编译时根据属性读取相应的 `svg` 图标直接内联。
它可以解决特殊属性的赋值问题，或者自定义一些特殊写法。
================================================
FILE: docs/en/faq/why-cannot-i-import-all-components.md
================================================
---
title: 为什么不能引入全部组件？
---
# 为什么不能引入全部组件
移动端引入全部组件会导致体积过大，加载速度慢，浪费用户等待时间并且浪费(cdn)带宽。
另一方面随着组件库迭代，组件数量增加，这个体积会逐渐变得不可接受。
因此 `VUX` 没有像其他组件库一样直接提供全部引入的使用方式，按需使用是最佳实践。
如果你只是不想每次在单个 `.vue` 文件里重复地 `import`，那么你可以直接在 `main.js` 里进行全局注册。
``` js
import { Group, Cell } from 'vux'
Vue.component('group', Group)
Vue.component('cell', Cell)
```
::: tip
`VUX@3.0` 将会实现无声明使用组件。
:::
================================================
FILE: docs/en/faq/why-cannot-i-use-vux-with-cdn.md
================================================
---
title: 为什么不能直接引用 cdn 链接
---
# 为什么不能直接引用 cdn 链接
原因见 <router-link to="/zh-CN/faq/why-use-vue-file-for-distribution.html">为什么使用 .vue 源码分发而不是 js 文件</router-link>。因为并不会在源码里提供 umd 脚本也不会在发布时发布 umd 脚本，因此没有 cdn 链接。
================================================
FILE: docs/en/faq/why-close-my-issue.md
================================================
---
title: 为什么作者直接关闭了我提的 issue
---
# 为什么作者直接关闭了我提的 issue
任何不认真提问题，浪费维护者时间的只有这样处理。
维护者其实没有义务做外包一样回答问题，况且部分问题实在是过于马虎，看了简直是让人生气呐：
:::warning
做为程序员，居然能问出这样的问题？！
:::
================================================
FILE: docs/en/faq/why-delete-my-issue-comment.md
================================================
---
title: 为什么作者直接删除了我在 issue 下的评论
---
# 为什么作者直接删除了我在 issue 下的评论
::: warning
被删除评论一般是因为：你在 issue 下写了一条和当前 issue 没有关系的评论，或者提了和 issue 无关的问题。
:::
即使是关于同一个组件，和当前 issue 讨论主题无关的评论也会造成管理麻烦，影响讨论。
作为维护者我们想让每条 issue 讨论主题集中，以便管理追踪。
作为 issue 创建者同样如此，试想你愿意别人在你的网站发无关内容或者垃圾吗？
尊重他人，理解作为维护者管理每条 issue 所花费的时间精力再提问可以得到更好和更快的帮助。
================================================
FILE: docs/en/faq/why-use-vue-file-for-distribution.md
================================================
---
title: 为什么使用 .vue 源码分发而不是 js 文件
---
# 为什么使用 .vue 源码分发而不是 js 文件
代码冗余，无法在构建时优化，出错时难以跟踪，作为组件维护者可能要打包多份代码出来满足不同需求(压缩版，未压缩，不同语言版)。在webpack中如果不加配置还会被多次打包。
整体打包成一个js和一个css在移动端属于严重浪费，降低体验和性能。
就上面的问题来说，源码分发的方式完美解决。
源码分发的最大好处是可以实现源码编译时处理，这也是 `vux-loader` 的用处。
================================================
FILE: docs/en/faq/why-use-x-prefix-for-components.md
================================================
---
title: 为什么部分组件要加`x-`前缀
---
# 为什么部分组件要加`x-`前缀
若不更名，可能在开发时与标准 html 标签相同而导致冲突或者 bug，比如 `Dialog`, `Switch` 等。从Vue@2.x开始已经强制不能使用原生html标签。
================================================
FILE: docs/en/faq/why-using-vux-loader.md
================================================
---
title: 为什么一定要使用 vux-loader
---
在部分用户看来这是一个使用门槛，实际上它本意是为了让用户更方便地开发。
它是为了实现按需引用组件及定义 less 变量以及编译时优化代码而开发的，并不会造在配置上的麻烦，具体使用时仅仅是需要调用 `merge` 方法合并原有 webpack 配置。
================================================
FILE: docs/en/faq/will-vux-stop-maintaining.md
================================================
---
title: 担心停止维护
---
# 担心停止维护
一个项目会停止维护主要原因是社区不活跃，用户量不够多，而且没有人愿意贡献。
VUX 和 Vue 一样正在发展中，越多越多的开发者在使用，在可预见的时间内不会突然停止维护。
希望大家能帮助完善文档，完善代码，帮助项目发展。
能贡献代码的贡献代码，<del>不能贡献代码直接用钱也可以 :)</del> 。
================================================
FILE: docs/en/install/biolerplate.md
================================================
---
title: VUX 入门教程
---
# 快速入门
::: warning
vux@2.x 推荐`webpack+vue-loader`方式的开发，如果要使用`umd`文件，请参照<router-link to="/zh-CN/install/umd.html">文档</router-link>。不建议使用引入`script`的方式进行开发，因为它会带来一系列的开发、维护、效率、部署问题。<br>
**Life is short, use webpack.**
:::
## vux2 模板
::: tip
[vux2](http://github.com/airyland/vux2) 模板 fork 自 [webpack](https://github.com/vuejs-templates/webpack) 模板，基本和官方同步。
:::
默认为 webpack2 模板
``` bash
npm install vue-cli -g # 如果还没安装
vue init airyland/vux2 projectPath
cd projectPath
npm install --registry=https://registry.npm.taobao.org # 或者 cnpm install 或者 yarn
npm run dev # 或者 yarn dev
```
## 使用淘宝 npm 镜像
### cnpm
你可以直接使用 `cnpm` 来加速模块下载。
### yarn
或者如果你已经用上了 `yarn`，建议配置淘宝源：
``` bash
yarn config set registry https://registry.npm.taobao.org
yarn
```
================================================
FILE: docs/en/install/manual-usage.md
================================================
---
title: VUX 手动配置使用
---
# 手动配置使用
[https://github.com/airyland/vux/tree/v2/packages/vue-cli-3-example](https://github.com/airyland/vux/tree/v2/packages/vue-cli-3-example)
::: tip
注意的是下面事项并非表示 VUX 使用繁琐，部分只是出于确保有正确的依赖和配置，而部分是出于优化。
:::
::: warning
请将 `babel-loader` 的配置写到 `.babelrc` 里而不是使用 `options`，否则可能会出错。
:::
折腾能力强的同学参考一下，下面即`airyland/vux2`模板主要处理的事项:
- 引入 `reset.less`，默认样式不包含reset，并且部分用户自己有一套reset样式，因此需要在`App.vue`进行手动引入
``` html
<style lang="less">
@import '~vux/src/styles/reset.less';
</style>
```
- 配置 `vue-loader`（通过配置vux-loader实现）
``` js
// vux-loader
module.exports = {
configureWebpack: config => {
require('@vux/loader').merge(config, {
plugins: ['vux-ui', {
name: 'less-theme',
path: 'src/theme.less'
}]
})
}
}
```
- 配置`babel-loader`以正确编译 VUX 的js源码（通过配置vux-loader实现）
``` js
module.exports = {
configureWebpack: config => {
require('@vux/loader').merge(config, {
plugins: ['vux-ui', {
name: 'less-theme',
path: 'src/theme.less'
}]
})
}
}
```
- 安装`less-loader`以正确编译less源码
``` bash
npm install less less-loader --save-dev
```
- 安装 `yaml-loader` 以正确进行语言文件读取
``` bash
npm install yaml-loader --save-dev
```
- 添加 `viewport` meta
``` html
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
```
- 添加 `Fastclick` 移除移动端点击延迟
``` js
const FastClick = require('fastclick')
FastClick.attach(document.body)
```
- 添加 `vue-router`（如果不需要前端路由，可忽略）
``` js
import VueRouter from 'vue-router'
Vue.use(VueRouter)
```
- 添加 webpack plugin, 在构建后去除重复css代码（通过配置vux-loader实现）
``` js
plugins: [{
name: 'duplicate-style'
}]
```
- 如果你使用 `webpack-simple` 模板或者 webpack 配置里缺少 .vue extension 配置，请记得配置：
``` js
resolve: {
extensions: ['.js', '.vue', '.json']
```
================================================
FILE: docs/en/install/npm.md
================================================
---
title: VUX 安装使用
---
# 安装使用(webpack)
::: warning
如果你从没使用过 `VUX`，请参考 <router-link to="/zh-CN/install/biolerplate.html">快速入门</router-link>。<br>
不推荐使用 `umd` 方式引用组件，但是如果不得不使用，可以参考 <router-link to="/zh-CN/install/umd.html">umd 构建</router-link>
:::
直接安装或者更新：
``` js
npm install vux --save
```
或者使用 `yarn`
``` js
yarn add vux // 安装
yarn upgrade vux // 更新
```
如果你想直接从 Github 安装，请指定 `v2` 分支
``` bash
npm install git://github.com/airyland/vux.git#v2
```
如果你是从`0.x`更新，请参考： <router-link to="/zh-CN/install/upgrade-to-vux2.html" style="color:#42b983;">更新到`2.x`</router-link>
::: warning
vux2必须配合`vux-loader`使用, 请在`build/webpack.base.conf.js`里参照如下代码进行配置：
:::
``` js
const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig
module.exports = vuxLoader.merge(webpackConfig, {
plugins: ['vux-ui']
})
```
::: warning
vux@0.x 已经停止维护，请尽快迁移到 vue@2.x & vuex@2.x & vux@2.x，虽然要花点时间，但是完全值得。
:::
================================================
FILE: docs/en/install/umd.md
================================================
---
title: umd 组件构建及使用
---
# umd 组件构建及使用
::: tip
从`2.0`开始，推荐使用`webpack`来调用组件，因此不再在`repo`中保存`umd`文件，但提供了生成命令。
请更新 `NodeJS` 到版本 `7.6.0`及以上。
例子可查看：[https://github.com/airyland/vux/tree/v2/docs/examples](https://github.com/airyland/vux/tree/v2/docs/examples)
:::
::: danger
强烈建议使用 `webpack` 的方式开发，在 3.0 之后可能不再提供支持。
:::
## 生成命令
``` bash
git clone https://github.com/airyland/vux.git --depth=1 // or just update: git pull
cd vux
npm install
npm run build-components
```
默认生成的语言是`zh-CN`，模块命名空间为`vux`，如`vuxGroup`，`vuxCell`，你可以在命令行中配置。
```
npm run build-components -- --locale='en' --namespace='X'
```
## 目录结构
生成的文件夹结构如：
::: tip
出于目录结构一致性考虑，即使是子组件也是一个文件夹，并且会有一个空的`index.min.css`样式文件。
:::
```
|- dist/
|- vux.min.js ------------ 所有组件打包，仅用于测试，不推荐在生产环境使用
|- vux.min.css ----------- 所有组件样式打包，同样仅用于测试
|- components
|- actionsheet
|- index.min.js -------- 组件js代码
|- index.min.css ------- 组件css代码
```
::: tip
vux.min.js 包括了所有的组件、插件及默认地址库，都挂载在全局变量vux上。当然为了使用方便同样直接挂载到了`window`上。
组件调用举例: `vuxCell`
插件调用举例：`vuxAlertPlugin`
默认地址库调用：`vuxChinaAddressData`
:::
## 组件使用
``` html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scripts</title>
<link rel="stylesheet" href="../dist/vux.min.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="demo">
<group>
<cell title="Vue" :value="how"></cell>
</group>
</div>
<script src="../dist/components/group/index.js"></script>
<script src="../dist/components/cell/index.js"></script>
<script>
Vue.component('group', vuxGroup)
Vue.component('cell', vuxCell)
new Vue({
el: '#demo',
data: {
how: 'Cool'
}
})
</script>
</body>
</html>
```
## 插件使用
``` html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>scripts</title>
<link rel="stylesheet" href="../../dist/styles/reset.css">
<link rel="stylesheet" href="../../dist/plugins/alert/index.min.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="demo">
</div>
<script src="../../dist/plugins/alert/index.min.js"></script>
<script>
Vue.use(vuxAlertPlugin)
new Vue({
el: '#demo',
data: {
how: 'Cool'
},
mounted () {
this.$vux.alert.show('hello')
}
})
</script>
</body>
</html>
```
## 生成css工具样式
包括`1px`解决方案，构建文件位于`dist/styles/*.css`,构建方式：
``` bash
npm run build-styles
```
::: tip
为了使用方便，可以使用`npm run xbuild`来执行`build-components` 及 `build-styles`
:::
================================================
FILE: docs/en/install/upgrade-to-vux2.md
================================================
---
title: 升级到 vux@2.x
---
# 升级到 vux@2.x
### Vue@2.x 主要变更
参考[Vue官方文档](https://cn.vuejs.org/v2/guide/migration.html)进行迁移, 这也是Vux组件的代码更新部分，主要包括：
- `:value.sync` 已经废弃
- `broadcast` 方法已经废弃
- `@click` 需要更改为 `@click.native`
- `v-for`的`(index, item)` => `(item, index)`
### vue-router 更新
配合vue2, `vue-router`同样需要更新到2.0版本以上
原来的路由配置修改为：
``` js
const routes = [{
path: '/vux/2.0',
component: Vux2Demo
}]
const router = new VueRouter({
routes
})
```
原来的路由挂载修改为：
``` js
new Vue({
router,
render: h => h(App)
}).$mount('#app')
```
`go` 已经不是过去的 `go`了，要用`push`方法来跳转
``` js
this.$router.go('/somewhere')
```
`v-link`也废弃了，使用`router-link`组件来代替
其他请参考官方升级文档: [https://cn.vuejs.org/v2/guide/migration-vue-router.html](https://cn.vuejs.org/v2/guide/migration-vue-router.html)
### 不再生成`umd`文件
但是你可以使用`npm run build-components`来生成，请参考文档首页。
### 双向绑定修改为 `v-model`
所有相关Vux调用的 `:value.sync`都需要更改成 `v-model`
``` js
// 0.x
<component :value.sync="someValue"></component>
// 2.x
<component v-model="someValue"></component>
```
### 使用 vux-loader
原来你可能在webpack中做了这样的配置以正确编译vux的js源码：
``` js
{
test: /vux.src.*?js$/,
loader: 'babel'
}
```
或者你也可能使用了低版本`vux-loader`的`getBabelLoader`方法。
现在你可以直接删除这一句了，直接使用vux-loader。
在`webpack.base.conf.js`中这样配置：
``` js
const vuxLoader = require('vux-loader')
module.exports = vuxLoader.merge(webpackConfig, {
options: {},
plugins: [
{
name: 'vux-ui'
}
]
})
```
### 引入方式变更
原来你可能是单个组件引入，现在在`vux-loader`的支持下你可以直接这样写：
``` js
import { Group, Cell } from 'vux'
```
### 组件名字变更
<p class="tip">
为什么不参照其他组件库全部加上`X`前缀，主要是因为觉得总要写个`X`相当不顺手。
</p>
因Vue2.0限制组件名不能与原有的html5标签一样，因此部分组件进行了重命名，加上 `x-`前缀，所有需要加前缀的组件如下：
- `Progress` => `XProgress`
- `Switch` => `XSwitch`
- `Dialog` => `XDialog`
- `Address` => `XAddress`
- `Circle` => `XCircle`
- `XButton`
- `XImg`
- `XInput`
- `XTextarea`
- `XHeader`
### 各个组件变更：
#### Swiper 引入路径变化
目录结构变化，与其他有子组件的统一，导致引入方式变化：
``` js
// 0.x
import Swiper from 'vux/src/components/swiper'
import SwiperItem from 'vux/src/components/swiper-item'
// 2.0
import Swiper from 'vux/src/components/swiper/swiper'
import SwiperItem from 'vux/src/components/swiper/swiper-item'
// 或者
import { Swiper, SwiperItem } from 'vux/src/components/swiper' // with vux-loader
```
#### ColorPicker 废弃
<p class="tip">
`2.0.0`可用用，但是后面不再维护。
</p>
这个组件可以由`cell`配合`slot`扩展出来，而且更灵活。没有做过统计，但是感觉使用人数应该挺少。
#### Countdown 废弃
<p class="tip">
`2.0.0`可用，但是后面不再维护。
</p>
功能薄弱，比较鸡肋。
#### Scroller reset方法更新
由于 Vue@2.x 的`broadcast`方法已经废弃，并且之前的设计也并不是很好，uuid的绑定也其实是没必要的。
- reset方法变成使用ref的`reset()`方法
- pullup reset 变成 ref 的 `donePullup()`方法
- pullup disable 变成 ref 的 `disablePullup()`方法
- pullup enable 变成 ref 的 `enablePullup()`方法
- pulldown reset 变成 ref 的 `donePulldown()`方法
- pullup和pulldown的status绑定变成`v-model="status"`绑定，示例
``` js
status: {
pullupStatus: 'default',
pulldownStatus: 'default'
}
```
详细参照<a href="#" router-link="/zh-CN/components?id=scroller">Scroller文档</a>进行更新
#### 表单默认required为true
保持和`html`规范一致, 影响的组件有 `XInput` `Checklist`
#### Checklist 不显示错误提示
考虑到错误样式目前并不优雅，而用户有自定义错误样式的需要，因此处理成emit一个错误事件+底部slot， 用户可自行处理。
#### XInput 的valid获取
由于Vue2的$ref不再是响应的，因此不能直接在模板中通过ref调用组件的valid值(会报undefined)，所以需要变成在提交时再进行ref来获取valid值。
#### XAddress 默认地址数据更新
目前引用方式：
``` js
import { XAddress, ChinaAddressData } from 'vux'
```
如果你想继续使用旧版本数据
``` js
import { XAddress, ChinaAddressV1Data } from 'vux'
```
按照[最新统计局数据](http://www.stats.gov.cn/tjsj/tjbz/xzqhdm/201608/t20160809_1386477.html)进行更新，部分区域已经不存在，部分id做了更新。因此请*谨慎*更新，评估后端数据存储设计和前端交互再进行更新，避免错误更新用户数据或者导致数据丢失。
完整更新如下图:
<p align="center">
<img src="https://github.com/airyland/china-area-data/raw/master/v2.0.0.changes.png" alt="">
</p>
================================================
FILE: docs/en/install/usage.md
================================================
---
title: VUX 调用例子
---
# 调用示例
## .vue文件中调用组件
``` html
<template>
<div>
<group>
<cell title="title" value="value"></cell>
</group>
</div>
</template>
<script>
import { Group, Cell } from 'vux'
export default {
components: {
Group,
Cell
}
}
</script>
```
## main.js中调用plugin
``` js
import { AlertPlugin, ToastPlugin } from 'vux'
Vue.use(AlertPlugin)
Vue.use(ToastPlugin)
// 详细使用请参考对应组件文档
```
================================================
FILE: docs/en/lab/index.md
================================================
---
title: 实验室
---
# 实验室
> beta 测试组件将出现在这里。
- [VChart](/en/components/v-chart.html)
================================================
FILE: docs/en/production/inline-manifest.md
================================================
---
title: Vue 打包优化：使用 inline manifest
---
# inline manifest
::: tip
`manifest` 文件为路径配置和异步组件名字列表，该做法可以减少一个`http`请求。
确保 `vux-loader`更新到 `^1.0.35`。
:::
## 修改 index.html 模板
首先在页面的`</body>`前加入代码：
``` html
<%=htmlWebpackPlugin.files.webpackManifest%>
```
## 配置 vux-loader
在`vux-loader`配置的 `plugins` 列表中加入`inline-manifest`插件
``` js
plugins:[{
name: 'inline-manifest'
}]
```
或者简化写法直接使用名字：
``` js
plugins:['inline-manifest']
```
================================================
FILE: docs/en/tools/base64.md
================================================
---
title: base64
---
# base64
``` js
import { base64 } from 'vux'
base64.encode('VUX')
base64.decode('VlVY')
```
================================================
FILE: docs/en/tools/cookie.md
================================================
---
title: cookie
---
# cookie
``` js
import { cookie } from 'vux'
```
`get *cookie.get(name, [options])*`
获取 cookie 值。`options` 参数可选，取值如下：
1. `converter` 转换函数。如果所获取的 cookie 有值，会在返回前传给 `converter`
函数进行转换。
1. 选项对象。对象中可以有两个属性：`converter` 和 `raw`. `raw` 是布尔值，为真时，不会对获取到的
cookie 值进行 URI 解码。
**注**：如果要获取的 cookie 键值不存在，则返回 `undefined`.
例子：
```js
// setup
document.cookie = 'foo=1'
document.cookie = 'bar=2'
cookie.get('foo')
// returns '1'
cookie.get('bar', function(s) { return parseInt(s); } )
// returns 2
```
`set *cookie.set(name, value, [options])`
设置 cookie 值。参数 `options` 可选，可以有以下属性：`path`（字符串）、`domain`（字符串）、
`expires`（数值或日期对象）、`raw`（布尔值）。当 `raw` 为真值时，在设置 cookie 值时，不会进行
URI 编码。
例子：
```js
cookie.set('foo', 3)
cookie.set('bar', 4, {
domain: 'example.com',
path: '/',
expires: 30
})
````
`remove *cookie.remove(name, [options])`
移除指定的 cookie.
例子：
```js
cookie.remove('foo')
cookie.remove('bar', {
domain: 'example.com',
path: '/'
})
```
================================================
FILE: docs/en/tools/date.md
================================================
---
title: vue date format
---
# date format
Built-in dateFormat is much smaller size than `moment`。
## Usage
``` js
import { dateFormat } from 'vux'
dateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss')
```
## Used as Vue filter
``` js
import { dateFormat } from 'vux'
export default {
filters: {
dateFormat
}
}
```
================================================
FILE: docs/en/tools/debounce-throttle.md
================================================
---
title: debounce
---
## debounce
::: warning
请注意了解 `debounce` 和 `throttle` 的区别。如果尚不清楚，请`google`之。
:::
``` js
import { debounce } from 'vux'
debounce(func, [wait=0], [options={}])
```
[详细文档](https://lodash.com/docs/#debounce)
## throttle
``` js
import { throttle } from 'vux'
throttle(func, [wait=0], [options={}])
```
[详细文档](https://lodash.com/docs/#throttle)
================================================
FILE: docs/en/tools/md5.md
================================================
---
title: md5
---
# md5
::: tip
该工具直接依赖于 [blueimp-md5](https://github.com/blueimp/JavaScript-MD5)
注意: `md5`是消息摘要算法并非加密算法，用于需要加密的场景会有安全问题。
:::
``` js
import { md5 } from 'vux'
md5('VUX')
```
================================================
FILE: docs/en/tools/number.md
================================================
---
title: vue number format
---
# number format
`numberComma`用于分割数字，默认为3位分割，一般用于格式化`金额`。
`numberPad`用于按照位数补0
`numberRandom`用于生成两个整数范围内的随机整数
``` js
import { numberComma, numberPad, numberRandom } from 'vux'
numberComma(21342132) // 21,342,132
numberComma(21342132, 4) // 2134,2132
numberComma(21342132.234) // 21,342,132.234
numberPad(1) // 01
numberPad(234, 4) // 0234
numberRandom(1, 7) // 2
```
================================================
FILE: docs/en/tools/querystring.md
================================================
---
title: Vue querystring url
---
# url querystring
```js
import { querystring } from 'vux'
querystring.parse('a=b&c=d') // {a:'b',c:'d'}, 默认参数为 location.search
querystring.stringify({a:'b',c:'d'}) // 'a=b&c=d'，注意不支持复杂嵌套的结构
```
================================================
FILE: docs/en/tools/string.md
================================================
---
title: Vue trim string
---
# trim string
``` js
import { trim } from 'vux'
trim(' 1024 ') // 1024
```
================================================
FILE: docs/en/umd.md
================================================
---
nav: zh-CN
---
## 组件 umd 文件
<p class="tip">
从`2.0`开始，推荐使用`webpack`来调用组件，因此不再在`repo`中保存`umd`文件，但提供了生成命令。
<br>
请更新 `NodeJS` 到版本 `7.6.0`及以上。
<br>
例子可查看：[https://github.com/airyland/vux/tree/v2/docs/examples](https://github.com/airyland/vux/tree/v2/docs/examples)
</p>
### 生成命令
``` bash
git clone https://github.com/airyland/vux.git --depth=1 // or just update: git pull
cd vux
npm install
npm run build-components
```
默认生成的语言是`zh-CN`，模块命名空间为`vux`，如`vuxGroup`，`vuxCell`，你可以在命令行中配置。
```
npm run build-components -- --locale='en' --namespace='X'
```
### 目录结构
生成的文件夹结构如：
<p class="tip">
出于目录结构一致性考虑，即使是子组件也是一个文件夹，并且会有一个空的`index.min.css`样式文件。
</p>
```
|- dist/
|- vux.min.js ------------ 所有组件打包，仅用于测试，不推荐在生产环境使用
|- vux.min.css ----------- 所有组件样式打包，同样仅用于测试
|- components
|- actionsheet
|- index.min.js -------- 组件js代码
|- index.min.css ------- 组件css代码
```
<p class="tip">
vux.min.js 包括了所有的组件、插件及默认地址库，都挂载在全局变量vux上。当然为了使用方便同样直接挂载到了`window`上。
<br>
组件调用举例: `vuxCell`
<br>
插件调用举例：`vuxAlertPlugin`
<br>
默认地址库调用：`vuxChinaAddressData`
</p>
### 组件使用
``` html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scripts</title>
<link rel="stylesheet" href="../dist/vux.min.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="demo">
<group>
<cell title="Vue" :value="how"></cell>
</group>
</div>
<script src="../dist/components/group/index.js"></script>
<script src="../dist/components/cell/index.js"></script>
<script>
Vue.component('group', vuxGroup)
Vue.component('cell', vuxCell)
new Vue({
el: '#demo',
data: {
how: 'Cool'
}
})
</script>
</body>
</html>
```
### 插件使用
``` html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>scripts</title>
<link rel="stylesheet" href="../../dist/styles/reset.css">
<link rel="stylesheet" href="../../dist/plugins/alert/index.min.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="demo">
</div>
<script src="../../dist/plugins/alert/index.min.js"></script>
<script>
Vue.use(vuxAlertPlugin)
new Vue({
el: '#demo',
data: {
how: 'Cool'
},
mounted () {
this.$vux.alert.show('hello')
}
})
</script>
</body>
</html>
```
### 生成css工具样式
包括`1px`解决方案，构建文件位于`dist/styles/*.css`,构建方式：
``` bash
npm run build-styles
```
<p class="tip">为了使用方便，可以使用`npm run xbuild`来执行`build-components` 及 `build-styles`</p>
================================================
FILE: docs/en/upgrade-to-2.md
================================================
---
nav: zh-CN
---
### Vue@2.x 主要变更
参考[Vue官方文档](https://cn.vuejs.org/v2/guide/migration.html)进行迁移, 这也是Vux组件的代码更新部分，主要包括：
- `:value.sync` 已经废弃
- `broadcast` 方法已经废弃
- `@click` 需要更改为 `@click.native`
- `v-for`的`(index, item)` => `(item, index)`
### vue-router 更新
配合vue2, `vue-router`同样需要更新到2.0版本以上
原来的路由配置修改为：
``` js
const routes = [{
path: '/vux/2.0',
component: Vux2Demo
}]
const router = new VueRouter({
routes
})
```
原来的路由挂载修改为：
``` js
new Vue({
router,
render: h => h(App)
}).$mount('#app')
```
`go` 已经不是过去的 `go`了，要用`push`方法来跳转
``` js
this.$router.go('/somewhere')
```
`v-link`也废弃了，使用`router-link`组件来代替
其他请参考官方升级文档: [https://cn.vuejs.org/v2/guide/migration-vue-router.html](https://cn.vuejs.org/v2/guide/migration-vue-router.html)
### 不再生成`umd`文件
但是你可以使用`npm run build-components`来生成，请参考文档首页。
### 双向绑定修改为 `v-model`
所有相关Vux调用的 `:value.sync`都需要更改成 `v-model`
``` js
// 0.x
<component :value.sync="someValue"></component>
// 2.x
<component v-model="someValue"></component>
```
### 使用 vux-loader
原来你可能在webpack中做了这样的配置以正确编译vux的js源码：
``` js
{
test: /vux.src.*?js$/,
loader: 'babel'
}
```
或者你也可能使用了低版本`vux-loader`的`getBabelLoader`方法。
现在你可以直接删除这一句了，直接使用vux-loader。
在`webpack.base.conf.js`中这样配置：
``` js
const vuxLoader = require('vux-loader')
module.exports = vuxLoader.merge(webpackConfig, {
options: {},
plugins: [
{
name: 'vux-ui'
}
]
})
```
### 引入方式变更
原来你可能是单个组件引入，现在在`vux-loader`的支持下你可以直接这样写：
``` js
import { Group, Cell } from 'vux'
```
### 组件名字变更
<p class="tip">
为什么不参照其他组件库全部加上`X`前缀，主要是因为觉得总要写个`X`相当不顺手。
</p>
因Vue2.0限制组件名不能与原有的html5标签一样，因此部分组件进行了重命名，加上 `x-`前缀，所有需要加前缀的组件如下：
- `Progress` => `XProgress`
- `Switch` => `XSwitch`
- `Dialog` => `XDialog`
- `Address` => `XAddress`
- `Circle` => `XCircle`
- `XButton`
- `XImg`
- `XInput`
- `XTextarea`
- `XHeader`
### 各个组件变更：
#### Swiper 引入路径变化
目录结构变化，与其他有子组件的统一，导致引入方式变化：
``` js
// 0.x
import Swiper from 'vux/src/components/swiper'
import SwiperItem from 'vux/src/components/swiper-item'
// 2.0
import Swiper from 'vux/src/components/swiper/swiper'
import SwiperItem from 'vux/src/components/swiper/swiper-item'
// 或者
import { Swiper, SwiperItem } from 'vux/src/components/swiper' // with vux-loader
```
#### ColorPicker 废弃
<p class="tip">
`2.0.0`可用用，但是后面不再维护。
</p>
这个组件可以由`cell`配合`slot`扩展出来，而且更灵活。没有做过统计，但是感觉使用人数应该挺少。
#### Countdown 废弃
<p class="tip">
`2.0.0`可用，但是后面不再维护。
</p>
功能薄弱，比较鸡肋。
#### Scroller reset方法更新
由于 Vue@2.x 的`broadcast`方法已经废弃，并且之前的设计也并不是很好，uuid的绑定也其实是没必要的。
- reset方法变成使用ref的`reset()`方法
- pullup reset 变成 ref 的 `donePullup()`方法
- pullup disable 变成 ref 的 `disablePullup()`方法
- pullup enable 变成 ref 的 `enablePullup()`方法
- pulldown reset 变成 ref 的 `donePulldown()`方法
- pullup和pulldown的status绑定变成`v-model="status"`绑定，示例
``` js
status: {
pullupStatus: 'default',
pulldownStatus: 'default'
}
```
详细参照<a href="#" router-link="/zh-CN/components?id=scroller">Scroller文档</a>进行更新
#### 表单默认required为true
保持和`html`规范一致, 影响的组件有 `XInput` `Checklist`
#### Checklist 不显示错误提示
考虑到错误样式目前并不优雅，而用户有自定义错误样式的需要，因此处理成emit一个错误事件+底部slot， 用户可自行处理。
#### XInput 的valid获取
由于Vue2的$ref不再是响应的，因此不能直接在模板中通过ref调用组件的valid值(会报undefined)，所以需要变成在提交时再进行ref来获取valid值。
#### XAddress 默认地址数据更新
目前引用方式：
``` js
import { XAddress, ChinaAddressData } from 'vux'
```
如果你想继续使用旧版本数据
``` js
import { XAddress, ChinaAddressV1Data } from 'vux'
```
按照[最新统计局数据](http://www.stats.gov.cn/tjsj/tjbz/xzqhdm/201608/t20160809_1386477.html)进行更新，部分区域已经不存在，部分id做了更新。因此请*谨慎*更新，评估后端数据存储设计和前端交互再进行更新，避免错误更新用户数据或者导致数据丢失。
完整更新如下图:
<p align="center">
<img src="https://github.com/airyland/china-area-data/raw/master/v2.0.0.changes.png" alt="">
</p>
================================================
FILE: docs/en/vux-loader/about.md
================================================
---
title: vux-loader 介绍
---
# vux-loader 介绍
<p align="left">
<a href="https://www.npmjs.com/package/vux-loader">
<img src="https://img.shields.io/npm/v/vux-loader.svg?style=flat-square" alt="">
</a>
<a href="https://www.npmjs.com/package/vux-loader">
<img src="https://img.shields.io/npm/dm/vux-loader.svg?style=flat-square" alt="">
</a>
</p>
`vux-loader`工具的作用是对`.vue`代码进行预处理，不限于 vux 组件库。
它是针对`webpack+vue-loader`项目的工程化工具，简化了webpack插件和loader的使用和编写，支持在vue-loader处理之前进行预处理，同时内置对vux组件专用的配置和优化插件。
当然除了.vue文件外，你还可以对js文件进行预处理。说好的处理.vue文件，为什么连`js`文件也不放过呢？因为只有处理js才能实现理想工程化。举个例子，如果用户需要在`main.js`中调用vux的plugin，他需要这样做：
``` js
import AlertPlugin from 'vux/src/plugins/Alert'
import ToastPlugin from 'vux/src/plugins/Toast'
```
虽然路径不长，但是看着相当不和谐，为了简化这个操作vux提供了更简洁的写法：
``` js
import { AlertPlugin, ToastPlugin } from 'vux'
```
这个操作即是通过`js-parser`插件解析main.js里的`import`语法来实现的，最终进入`babel`处理的代码和上面单独引入一致。
这个工具也许会帮你进一步打开`Vue`项目工程化的思路。
::: tip
作为通用工具，即使你没有使用 `VUX`，依然可以使用它来进行各种代码处理。
:::
## 为什么不使用 babel-plugin-import
* VUX 希望使用源码分发
* VUX 希望无侵入地解决一系列的工程问题，不需要用户手动配置 webpack
* VUX 希望能统计(匿名)使用情况
而上面这些单纯使用 `babel-plugin-import` 无法做到，所以造了个轮子。
================================================
FILE: docs/en/vux-loader/how-vux-loader-works.md
================================================
---
title: vux-loader 实现方式
---
# vux-loader 实现方式
说明一下`vux-loader`是如何和`vue-loader`<del>搞基</del>配合的。
如果你看过`webpack`loader的介绍，理论上说如果需要自己手动先处理代码再传入`vue-loader`,你只需要这样对loader做配置: `vue-loader!my-loader`。但是如果你试过，就知道这个目前行不通。`vue-loader`不会接收上一个loader的source进行处理，因为.vue文件的特殊性，它直接生成了loader string进入下一个处理，处理后的结果大概是这样的：
``` js
/* styles */
require("!!vue-style-loader!css-loader!vue-loader/lib/style-rewriter?id=data-v-20d7ba9a!vue-loader/lib/selector?type=styles&index=0!./index.vue")
/* script */
__vue_exports__ = require("!!babel-loader!vue-loader/lib/selector?type=script&index=0!./index.vue")
/* template */
var __vue_template__ = require("!!vue-loader/lib/template-compiler?id=data-v-20d7ba9a!vue-loader/lib/selector?type=template&index=0!./index.vue")
```
那么vue-loader提供了自定义loader string的选项，直接配置可否呢，[#531](https://github.com/vuejs/vue-loader/issues/531)，直接配置会破坏原来的loader参数，导致不能Live reload。
那么最终能想到的就是直接修改`vue-loader`生成的代码，这样既不会影响`vue-loader`原来的逻辑，也能自由控制。
最终实现方式是前置`vux-loader`即：`vux-loader!vue-loader`，vux-loader将vue-loader生成的代码二次处理，分割loader string并(强行)插入vux的 template-loader, style-loader, script-loader，那么你就能理解vux-loader的配置方式了，在3大基本loader里获取到vux-loader的插件配置列表逐个做处理就行了。
上面的代码强行处理后是这样的：
``` js
/* styles */
require("!!vue-style-loader!css-loader!vue-loader/lib/style-rewriter?id=data-v-20d7ba9a!./../../../../vux-loader/src/style-loader.js!vue-loader/lib/selector?type=styles&index=0!./index.vue")
/* script */
__vue_exports__ = require("!!babel-loader!vue-loader/lib/selector?type=script&index=0!./../../../../vux-loader/src/script-loader.js!./index.vue")
/* template */
var __vue_template__ = require("!!vue-loader/lib/template-compiler?id=data-v-20d7ba9a!./../../../../vux-loader/src/template-loader.js!vue-loader/lib/selector?type=template&index=0!./index.vue")
```
原理就是这么简单（但是处理时还是遇到一些问题），为了方便使用，编写了常用的一些插件。
至于`js-parser`就只是在`babel-loader`前加上了`vux-loader`的`js-loader`。
而所有的loader, plugins设置都是在`vux-loader`的`merge`方法里来完成。
================================================
FILE: docs/en/vux-loader/install.md
================================================
---
title: vux-loader 使用
---
# vux-loader 使用
## 安装
``` bash
npm install vux-loader --save-dev
```
## 使用
为了降低使用成本及不侵入原来配置，只需要调用`merge`方法对原来`webpack`配置进行操作：
``` js
const webpackConfig = {} // 原来的 webpack.base.js 配置
const vuxLoader = require('vux-loader')
module.exports = vuxLoader.merge(webpackConfig, {
options: {},
plugins: [{
name: 'vux-ui'
}]
})
```
::: warning
更新配置后需要重新运行 `npm run dev` 命令。
:::
## Options
- `env` 非必选，定义当前环境变量，只在 vux-loader 里使用，用来判断哪些插件需要被执行(如果plugin有定义envs的话)，目的是实现一份配置多个环境使用。
## Plugins
插件为一个数组列表，根据需要可以添加你需要的插件，插件名为必须，有些组件不需要额外配置选项。
公用参数为:
- `name` `必须`，插件名字
- `envs` `非必须`，数组，当前插件在哪些环境变量里执行，不定义则默认执行
下面的插件配置代码将省略 `plugins:[]`的书写。
::: tip
当使用默认配置时，可以使用简写
``` js
plugins: ['vux-ui']
```
等同于
``` js
plugins: [{
name: 'vux-ui'
}]
```
:::
================================================
FILE: docs/en/vux-loader/plugins.md
================================================
---
title: vux-loader 插件列表
---
# vux-loader 插件列表
## script-parser
> .vue 文件的 script 部分代码处理
``` js
[{
name: 'script-parser',
fn: function (source) {
return source.replace('VARIABLE', 'v2')
}
}]
```
## style-parser
> `<style></style>` 代码处理
``` js
[{
name: 'style-parser',
fn: function (source) {
return source.replace('black', 'white')
}
}]
```
## template-parser
> template代码替换处理
> 适用于对`<template></template>`模板代码做自定义处理
* name 插件名字， `template-parser`
* replaceList 非必须，正则匹配列表，将直接调用 `replace` 方法进行替换
* fn 非必须，相比params更灵活的方法，可以对字符串进行处理后返回
插件配置：
``` js
[
name: "template-parser",
replaceList: [{
test: /DeathToPM/g,
replaceString: '微博-随时随地发现新鲜事'
}, {
test: /呵呵我们压根没有底线/g,
replaceString: '我是有底线的'
}],
fn: function (templateSource) {
return templateSource.replace('智障', '机智')
}
]
```
#### js-parser
> 项目里js文件处理，在babel-loader前进行处理
``` js
[{
name: 'js-parser',
fn: function (source) {
return source.replace('black', 'white')
}
}]
```
## template-feature-switch
实现根据变量切换template代码
参数：
- `features`，变量列表，值只能为true或者false
``` js
{
name: 'template-feature-switch',
features: {
feature1: true,
feature2: false
}
}
```
``` html
<template>
<div>
<on feature="feature1">
AWESOME FEATURE 1 is ON
</on>
<off feature="feature1">
AWESOME FEATURE 1 is OFF
</off>
</div>
</template>
```
那么当 feature1 为 true时，将输出 `AWESOME FEATURE 1 is ON`, 反之则输出 `AWESOME FEATURE 1 is OFF`。注意`on`标签内不限定内容，可以为任何标签代码块，但`避免在on off 里面再嵌套 on off`
## vux-ui
<p class="warning">
vux组件的配套工具，如果没有使用vux, 不需要添加。
</p>
如果配合`vux`使用，需要手动启用。默认不需要设置选项。
该插件做了以下处理：
- 配置`babel`编译 vux 的js源码
- 修改vue-loader为 `vux-loader!vue-loader`
- `import`组件调用解析为单组件引入
```
{
name: 'vux-ui'
}
```
那么你就可以很方便地引入组件了：
```
// 0.x
import Group from 'vux/src/components/group'
import Cell from 'vux/src/components/cell'
// 2.x
import { Group, Cell } from 'vux'
```
## i18n
1. 如果你只是调用中文语言的vux组件，那么你不需要做任何配置。
2. 如果你需要调用英文语言的vux组件，需要配置语言
``` js
{
name: 'i18n',
vuxStaticReplace: true,
vuxLocale: 'en'
}
```
3. 如果你想和demo站点一样可以写`i18n`block，并且需要动态切换语言，那么需要配置插件抽取i18n的内容，并设置非静态替换
``` js
{
name: 'i18n',
vuxStaticReplace: false,
staticReplace: false,
extractToFiles: 'src/locales/components.yml',
localeList: ['en', 'zh-CN']
}
```
然后你就可以引用`vuex-i18n`插件实现多语言切换了。
参考 [main.js](https://github.com/airyland/vux/blob/v2/src/main.js#L84-L96) 及 [vuex-i18n 文档](https://www.npmjs.com/package/vuex-i18n)(仅当参考，你也可以使用其他i18n插件)。
## less-theme
<p class="warning">
注意，path所在文件必须是简单的less变量对，不能import其他文件或者引入变量。
</p>
> less 变量设置和替换
> 适用于全局变量替换, 方便切换主题
> 这意味着，你不再需要为每个页面引入全局的less文件了，你只需要设置lang为less就可以直接使用变量了
```
<style lang="less">
.info {
color: @font-size;
}
</style>
```
插件配置：
``` js
{
name: 'less-theme',
path: 'src/styles/theme.less'
}
```
## duplicate-style
> css 重复代码清除
<p class="tip">
建议使用vux组件的用户使用，因为vux直接引用less，最终构建的css文件确实会有冗余。
</p>
> 在webpack 构建完成后对生成的css文件使用cssnano进行重复样式清除。建议只在production环境下开启，因为dev环境没有必要。
``` js
{
name: 'duplicate-style',
events: {
done: function () {
console.log('done!')
}
}
}
```
## html-build-callback
>html文件处理事件回调
> 适用于在写入html(一般为index.html)文件前进行内容修改，比如替换特定内容
> 比如写入js配置变量，改变cdn域名，将manifest文件直接写入html以减少请求等
``` js
{
name: 'html-build-callback',
events: {
'after-html-processing': function (data, cb) {
data.html += 'magic footer'
cb(null, data)
}
}
}
```
可用事件请参考 [html-webpack-plugin](https://www.npmjs.com/package/html-webpack-plugin)
## build-done-callback
> 构建完成事件回调
> 本质上是在webpack plugin的 done 事件后触发
``` js
{
name: 'build-done-callback',
fn: function () {
console.log('done!')
}
}
```
================================================
FILE: docs/en/vux-loader.md
================================================
---
nav: zh-CN
---
<h2 class="big-title">vux!vue</h2>
<p align="left">
<a href="https://www.npmjs.com/package/vux-loader">
<img src="https://img.shields.io/npm/v/vux-loader.svg?style=flat-square" alt="">
</a>
<a href="https://www.npmjs.com/package/vux-loader">
<img src="https://img.shields.io/npm/dm/vux-loader.svg?style=flat-square" alt="">
</a>
</p>
### 介绍
`vux-loader`工具的作用是对`.vue`代码进行预处理，不限于 vux 组件库。
它是针对`webpack+vue-loader`项目的工程化工具，简化了webpack插件和loader的使用和编写，支持在vue-loader处理之前进行预处理，同时内置对vux组件专用的配置和优化插件。
当然除了.vue文件外，你还可以对js文件进行预处理。说好的处理.vue文件，为什么连`js`文件也不放过呢？因为只有处理js才能实现理想工程化。举个例子，如果用户需要在`main.js`中调用vux的plugin，他需要这样做：
``` js
import AlertPlugin from 'vux/src/plugins/Alert'
import ToastPlugin from 'vux/src/plugins/Toast'
```
虽然路径不长，但是看着相当不和谐，为了简化这个操作vux提供了更简洁的写法：
``` js
import { AlertPlugin, ToastPlugin } from 'vux'
```
这个操作即是通过`js-parser`插件解析main.js里的`import`语法来实现的，最终进入babel的代码和上面单独引入一致。
这个工具也许会帮你进一步打开`Vue`项目工程化的思路。
<p class="tip">
作为通用工具，即使你没有使用Vux，依然可以使用它来进行各种代码处理。
<br>
目前支持 vue-loader@>9.x, 低版本没有具体测试。
<br>
`vux!vue`的loader写法只兼容webpack@1.x，为了兼容webpack@2.x，处理后的loader配置是`vux-loader!vue-loader`
</p>
### 实现方式
说明一下`vux-loader`是如何和`vue-loader`<del>搞基</del>配合的，vue-loader的issue里不少同学遇到预处理.vue的问题。
如果你看过`webpack`loader的介绍，理论上说如果需要自己手动先处理代码再传入`vue-loader`,你只需要这样对loader做配置: `vue-loader!my-loader`。但是如果你试过，就知道这个目前行不通。`vue-loader`不会接收上一个loader的source进行处理，因为.vue文件的特殊性，它直接生成了loader string进入下一个处理，处理后的结果大概是这样的：
``` js
/* styles */
require("!!vue-style-loader!css-loader!vue-loader/lib/style-rewriter?id=data-v-20d7ba9a!vue-loader/lib/selector?type=styles&index=0!./index.vue")
/* script */
__vue_exports__ = require("!!babel-loader!vue-loader/lib/selector?type=script&index=0!./index.vue")
/* template */
var __vue_template__ = require("!!vue-loader/lib/template-compiler?id=data-v-20d7ba9a!vue-loader/lib/selector?type=template&index=0!./index.vue")
```
那么vue-loader提供了自定义loader string的选项，直接配置可否呢，[#531](https://github.com/vuejs/vue-loader/issues/531)，直接配置会破坏原来的loader参数，导致不能Live reload。
那么最终能想到的就是直接修改`vue-loader`生成的代码，这样既不会影响`vue-loader`原来的逻辑，也能自由控制。
最终实现方式是前置`vux-loader`即：`vux-loader!vue-loader`，vux-loader将vue-loader生成的代码二次处理，分割loader string并(强行)插入vux的 template-loader, style-loader, script-loader，那么你就能理解vux-loader的配置方式了，在3大基本loader里获取到vux-loader的插件配置列表逐个做处理就行了。
上面的代码强行处理后是这样的：
``` js
/* styles */
require("!!vue-style-loader!css-loader!vue-loader/lib/style-rewriter?id=data-v-20d7ba9a!./../../../../vux-loader/src/style-loader.js!vue-loader/lib/selector?type=styles&index=0!./index.vue")
/* script */
__vue_exports__ = require("!!babel-loader!vue-loader/lib/selector?type=script&index=0!./../../../../vux-loader/src/script-loader.js!./index.vue")
/* template */
var __vue_template__ = require("!!vue-loader/lib/template-compiler?id=data-v-20d7ba9a!./../../../../vux-loader/src/template-loader.js!vue-loader/lib/selector?type=template&index=0!./index.vue")
```
原理就是这么简单（但是处理时还是遇到一些问题），为了方便使用，编写了常用的一些插件。
至于`js-parser`就只是在`babel-loader`前加上了`vux-loader`的`js-loader`。
而所有的loader, plugins设置都是在`vux-loader`的`merge`方法里来完成。
### 实际使用场景
我们可以使用`vux-loader`做一些很有意思的事。
比如 [#542](https://github.com/vuejs/vue-loader/issues/542) 提到的根据当前feature为判断要输出哪一部分代码，现在已经直接支持，请看 `template-feature-switch`部分。
对于公用组件而言，完全可以实现构建时进行组件瘦身，只保留使用到的代码。
当然如果你愿意，你完全可以自己实现一门语言。
## 安装
``` bash
npm install vux-loader --save-dev
```
## 使用
为了减少使用成本，只需要调用`merge`方法对原来`webpack`配置进行操作：
``` js
const webpackConfig = {} // 原来的webpack配置
const vuxLoader = require('vux-loader')
module.exports = vuxLoader.merge(webpackConfig, {
options: {},
plugins: [{
name: 'vux-ui'
}]
})
```
<p class="warning">
更新配置后需要重启npm run dev命令
</p>
### Options
- `env` 非必选，定义当前环境变量，只在vux-loader里使用，用来判断哪些插件需要被执行(如果plugin有定义envs的话)，目的是实现一份配置多个环境使用。
### Plugins
插件为一个数组列表，根据需要可以添加你需要的插件，插件名为必须，有些组件不需要额外配置选项。
公用参数为:
- `name` `必须`，插件名字
- `envs` `非必须`，数组，当前插件在哪些环境变量里执行，不定义则默认执行
下面的插件配置代码将省略 `plugins:[]`的书写。
#### script-parser
> script代码替换处理
``` js
[{
name: 'script-parser',
fn: function (source) {
return source.replace('VARIABLE', 'v2')
}
}]
```
#### style-parser
> style代码替换处理
``` js
[{
name: 'style-parser',
fn: function (source) {
return source.replace('black', 'white')
}
}]
```
#### template-parser
> template代码替换处理
> 适用于对`<template></template>`模板代码做自定义处理
> 适用于某些更改不频繁但非服务端配置的文字，可能调用多次，也可能手动更改或者批量替换相对麻烦
>
> 同样你也可以用来从接口获取最新配置替换特定的占位字符
>
> 当然也适用于在源码中对`pm`进行吐槽(千万要记得production环境要有配置，否则可能会上新闻。)
* name 插件名字， `template-parser`
* replaceList 非必须，正则匹配列表，将直接调用 `replace` 方法进行替换
* fn 非必须，相比params更灵活的方法，可以对字符串进行处理后返回
插件配置：
``` js
[
name: "template-parser",
replaceList: [{
test: /DeathToPM/g,
replaceString: '微博-随时随地发现新鲜事'
}, {
test: /呵呵我们压根没有底线/g,
replaceString: '我是有底线的'
}],
fn: function (templateSource) {
return templateSource.replace('智障', '机智')
}
]
```
#### js-parser
> 项目里js文件处理，在babel-loader前进行处理
``` js
[{
name: 'js-parser',
fn: function (source) {
return source.replace('black', 'white')
}
}]
```
#### template-feature-switch
实现根据变量切换template代码
参数：
- `features`，变量列表，值只能为true或者false
``` js
{
name: 'template-feature-switch',
features: {
feature1: true,
feature2: false
}
}
```
``` html
<template>
<div>
<on feature="feature1">
AWESOME FEATURE 1 is ON
</on>
<off feature="feature1">
AWESOME FEATURE 1 is OFF
</off>
</div>
</template>
```
那么当 feature1 为 true时，将输出 `AWESOME FEATURE 1 is ON`, 反之则输出 `AWESOME FEATURE 1 is OFF`。注意`on`标签内不限定内容，可以为任何标签代码块，但`避免在on off 里面再嵌套 on off`
#### vux-ui
<p class="warning">
vux组件的配套工具，如果没有使用vux, 不需要添加。
</p>
如果配合`vux`使用，需要手动启用。默认不需要设置选项。
该插件做了以下处理：
- 配置`babel`编译 vux 的js源码
- 修改vue-loader为 `vux-loader!vue-loader`
- `import`组件调用解析为单组件引入
```
{
name: 'vux-ui'
}
```
那么你就可以很方便地引入组件了：
```
// 0.x
import Group from 'vux/src/components/group'
import Cell from 'vux/src/components/cell'
// 2.x
import { Group, Cell } from 'vux'
```
#### i18n
<p class="warning">
请使用正确的 yml 格式。冒号和值之间是有一个空格的，错误的格式将无法生效。
</p>
``` yml
on-show:
en: emits when popup shows
zh-CN: 弹窗显示时触发
```
1. 如果你只是调用中文语言的vux组件，那么你不需要做任何配置。
2. 如果你需要调用英文语言的vux组件，需要配置语言
``` js
{
name: 'i18n',
vuxStaticReplace: true,
vuxLocale: 'en'
}
```
3. 如果你想和demo站点一样可以写`i18n`block，并且需要动态切换语言，那么需要配置插件抽取i18n的内容，并设置非静态替换
``` js
{
name: 'i18n',
vuxStaticReplace: false,
staticReplace: false,
extractToFiles: 'src/locales/components.yml',
localeList: ['en', 'zh-CN']
}
```
然后你就可以引用`vuex-i18n`插件实现多语言切换了。
参考 [main.js](https://github.com/airyland/vux/blob/254574ef30a8c4d341feb7d2ff8245792657bda2/src/main.js#L84-L96) 及 [vuex-i18n 文档](https://www.npmjs.com/package/vuex-i18n)(仅当参考，你也可以使用其他i18n插件)。
#### less-theme
<p class="warning">
注意，path所在文件必须是简单的less变量对，不能import其他文件或者引入变量。
</p>
> less 变量设置和替换
> 适用于全局变量替换, 方便切换主题
> 这意味着，你不再需要为每个页面引入全局的less文件了，你只需要设置lang为less就可以直接使用变量了
```
<style lang="less">
.info {
color: @font-size;
}
</style>
```
插件配置：
``` js
{
name: 'less-theme',
path: 'src/styles/theme.less'
}
```
#### duplicate-style
> css 重复代码清除
<p class="tip">
建议使用vux组件的用户使用，因为vux直接引用less，最终构建的css文件确实会有冗余。
</p>
> 在webpack 构建完成后对生成的css文件使用cssnano进行重复样式清除。建议只在production环境下开启，因为dev环境没有必要。
``` js
{
name: 'duplicate-style',
events: {
done: function () {
console.log('done!')
}
}
}
```
#### html-build-callback
>html文件处理事件回调
> 适用于在写入html(一般为index.html)文件前进行内容修改，比如替换特定内容
> 比如写入js配置变量，改变cdn域名，将manifest文件直接写入html以减少请求等
``` js
{
name: 'html-build-callback',
events: {
'after-html-processing': function (data, cb) {
data.html += 'magic footer'
cb(null, data)
}
}
}
```
可用事件请参考 [html-webpack-plugin](https://www.npmjs.com/package/html-webpack-plugin)
#### build-done-callback
> 构建完成事件回调
> 本质上是在webpack plugin的 done 事件后触发
``` js
{
name: 'build-done-callback',
fn: function () {
console.log('done!')
}
}
```
### 使用案例
#### 统一引入less(sass)变量
如果你翻看`vue-loader`的issue, 就会发现不少同学在说，为什么sass, less 变量不能全局使用，需要在每个.vue组件里引入，这个很重复，有没有办法解决。目前除了在webpack里定义路径`alias`外没有其他方法。但是有了`vux-loader`，你可以用`style-parser`在每个`.vue`文件的style前面加上变量的引入了，只要一句代码。
```
{
name: 'style-parser',
fn: function (source) {
return "@import '../styles/variable.less'\n" + source // 你可以根据this.resourcePath 来确定是否要引入以及引入的相对路径
}
}
```
#### 减少重复代码
`vux`的组件有几十个，同样demo也有几十个，因为webpack并不支持require变量，那么在main里中实现每个组件异步加载都需要这样：
``` js
const routes = [
{
path: '/component/actionsheet',
component: function (resolve) {
require(['./demos/Actionsheet'], resove)
}
}
]
```
作为懒人，写几十次这样的代码是一件比较烦人的事，作为热爱地球的人，这样也很不环保，但是有了`vux-loader`, 我们可以这样：
``` js
const routes = []
```
然后在`js-parser`里获取列表数组直接替换， 并且可以调用webpack的`this.addDependency`添加依赖实现修改列表时自动`reload`。从此添加删除组件只要加上或者删除名字就可以了，真是<del>懒</del>机智。
``` js
{
name: 'js-parser',
test: /main\.js/,
fn: function (source) {
this.addDependency(demoPath)
let list = fs.readFileSync(demoPath, 'utf-8')
list = JSON.parse(list)
let str = []
list.forEach(one => {
str.push(`{
path: '/component/${toDash(one)}',
component: function (resolve) {
require(['./demos/${one}.vue'], resolve)
}
}`)
})
str = `[${str.join(',\n')}]`
source = source.replace('const routes = []', 'const routes = ' + str)
return source
}
}
```
#### 实现import语法转换
vux是没有main入口文件的，因此需要把import语句转换成单个组件引入。但是因为对语法树分析比较烦，能用正则替换的当然就是用正则替换，简单粗暴实用。具体可以看源码。
#### 开源组件多语言支持
如果以js方式分发，一般默认一个语言，用户可以加上另外的语言包，但是代码里必不可少存在相应的转换函数，对于只需要单语言的人来是个浪费和繁琐。要么所有一起打包，这个也极浪费。要么一个一个打包，这样又失去了动态多语言支持。
于是`vux`在`vux-loader`的支持下实现了`使用时构建`，无论是静态输出和动态支持。
### Bug 反馈 && 功能建议
请到[https://github.com/airyland/vux-loader/issues](https://github.com/airyland/vux-loader/issues)
### Todo
- [ ] 支持各个插件的异步返回形式
- [ ] 在插件中提供webpack的 this 参数
================================================
FILE: docs/en/wechat/other.md
================================================
---
title: 其他问题
---
## 如何实现`weui.io`或者星巴克页面的设置顶部bar和页面下拉背景色
微信对于部分合作方开放了`jssdk`的`setBounceBackground`及`setNavigationBarColor`权限，目测暂无申请入口。
================================================
FILE: docs/en/wechat/vue-wechat-jssdk.md
================================================
---
title: Vue 应用中使用微信 jssdk
---
# Vue 应用中使用微信 jssdk
::: warning
分享接口只有认证公众号才能使用，域名必须备案且在微信后台设置。
先确认已经满足使用`jssdk`的要求再进行开发。
:::
`WechatPlugin` 插件提供了`commonJS`的引入方式，因此你不需要在 `index.html` 引入文件。
## 版本要求
`WechatPlugin`在`vux@^2.1.0-rc.19`开始支持
## 引入
在 `main.js` 中全局引入：
``` js
import { WechatPlugin } from 'vux'
Vue.use(WechatPlugin)
console.log(Vue.wechat) // 可以直接访问 wx 对象。
```
## 组件外使用
考虑到你需要在引入插件后调用`config`方法进行配置，你可以通过 `Vue.wechat` 在组件外部访问`wx`对象。
`jssdk`需要请求签名配置接口，你可以直接使用 VUX 基于 `Axios` 封装的 `AjaxPlugin`。
``` js
import { WechatPlugin, AjaxPlugin } from 'vux'
Vue.use(WechatPlugin)
Vue.use(AjaxPlugin)
Vue.http.get('/api', ({data}) => {
Vue.wechat.config(data.data)
})
```
## 组件中使用
那么之后任何组件中都可以通过 `this.$wechat` 访问到 `wx` 对象。
``` js
export default {
created () {
this.$wechat.onMenuShareTimeline({
title: 'hello VUX'
})
}
}
```
================================================
FILE: docs/en/wechat/wechat-document-title.md
================================================
---
title: 微信 Vue 单页面应用设置标题
---
# 微信 Vue 单页面应用设置标题
在微信`iOS` `webview`更新到`WKWebView`之前我们可以通过加载一个 `iframe` 来实现单页面应用`title`更改。但是17年初更新到 `WKWebView` 后该方法也失效。
目前该问题已经解决，在微信 iOS 客户端 `6.3.5` 之后的版本都可以通过 `document.title` 设置标题了。
================================================
FILE: docs/examples/loading.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>scripts</title>
<style media="screen">
* {
margin: 0;
padding: 0;
}
</style>
<link rel="stylesheet" href="../../dist/styles/reset.css">
<link rel="stylesheet" href="../../dist/components/loading/index.min.css">
</head>
<body>
<div class="weui_loading_toast" id="global_loading">
<div class="weui_mask_transparent"></div>
<div class="weui_toast">
<i class="weui-loading weui-icon_toast"></i>
<p class="weui_toast_content">I'm Loading</p>
</div>
</div>
</body>
</html>
================================================
FILE: docs/examples/umd_component_include_all.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>scripts</title>
<link rel="stylesheet" href="../../dist/vux.min.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="demo">
<group>
<cell title="Vue" :value="how"></cell>
</group>
</div>
<script src="../../dist/vux.min.js"></script>
<script>
Vue.component('group', vuxGroup)
Vue.component('cell', vuxCell)
/*
* or
* Vue.component('group', vux.vuxGroup)
* Vue.component('cell', vux.vuxCell)
*/
new Vue({
el: '#demo',
data: {
how: 'Cool'
}
})
</script>
</body>
</html>
================================================
FILE: docs/examples/umd_component_include_single.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>scripts</title>
<link rel="stylesheet" href="../../dist/styles/reset.css">
<link rel="stylesheet" href="../../dist/components/group/index.min.css">
<link rel="stylesheet" href="../../dist/components/cell/index.min.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="demo">
<group>
<cell title="Vue" :value="how"></cell>
</group>
</div>
<script src="../../dist/components/group/index.min.js"></script>
<script src="../../dist/components/cell/index.min.js"></script>
<script>
Vue.component('group', vuxGroup)
Vue.component('cell', vuxCell)
new Vue({
el: '#demo',
data: {
how: 'Cool'
}
})
</script>
</body>
</html>
================================================
FILE: docs/examples/umd_plugin_include_all.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>scripts</title>
<link rel="stylesheet" href="../../dist/styles/reset.css">
<link rel="stylesheet" href="../../dist/plugins/alert/index.min.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="demo">
</div>
<script src="../../dist/vux.min.js"></script>
<script>
Vue.use(vuxAlertPlugin)
// or Vue.use(vux.vuxAlertPlugin)
new Vue({
el: '#demo',
data: {
how: 'Cool'
},
mounted () {
this.$vux.alert.show('hello')
}
})
</script>
</body>
</html>
================================================
FILE: docs/examples/umd_plugin_include_single.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>scripts</title>
<link rel="stylesheet" href="../../dist/styles/reset.css">
<link rel="stylesheet" href="../../dist/plugins/alert/index.min.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="demo">
</div>
<script src="../../dist/plugins/alert/index.min.js"></script>
<script>
Vue.use(vuxAlertPlugin)
new Vue({
el: '#demo',
data: {
how: 'Cool'
},
mounted () {
this.$vux.alert.show('hello')
}
})
</script>
</body>
</html>
================================================
FILE: docs/i18n.js
================================================
const list = {
Intro: {
'zh-CN': '介绍'
},
Install: {
'zh-CN': '安装'
},
Examples: {
'zh-CN': '栗子' // 故意的，不需要改
},
Changelog: {
'zh-CN': '版本更新'
},
faq: {
'zh-CN': '常见问题'
},
title: {
'en': 'VUX - Vue.js Mobile UI Component Framework',
'zh-CN': 'VUX - 基于 WeUI 和 Vue 的移动端组件库'
},
Directives: {
'zh-CN': '指令 Directives'
},
Guide: {
'zh-CN': '教程'
},
Css: {
'zh-CN': '样式 CSS'
},
'1px': {
'zh-CN': '1px 解决方案'
},
'css-close-icon': {
'zh-CN': 'css 关闭图标'
},
Components: {
'zh-CN': '组件'
},
Component: {
'zh-CN': '组件'
},
'donot need import': {
'en': 'You don\'t need to import this component.',
'zh-CN': '该组件可以直接使用，不需要引入。'
},
Releases: {
'zh-CN': '发布日志'
},
Toolkit: {
'zh-CN': '工具函数 Tools'
},
Lab: {
'zh-CN': '实验室'
},
Donate: {
'zh-CN': '捐赠、赞助'
},
'return FAQ': {
'zh-CN': '返回 【常见问题】'
},
'Realtime developers': {
'zh-CN': '实时 VUX 开发者'
},
'Developers in 24h': {
'zh-CN': '24小时内 VUX 开发者'
},
'globally register': {
'en': 'you can also register globally',
'zh-CN': '在入口文件全局引入'
},
'default slot': {
en: 'default',
'zh-CN': '默认插槽'
},
'required version': {
'zh-CN': '版本要求'
},
'qr': {
'en': 'view demos on mobile',
'zh-CN': '二维码'
},
'component source code': {
'zh-CN': '组件源码'
},
'demo url': {
'zh-CN': 'demo 原始链接'
},
'edit document': {
'zh-CN': '编辑文档'
},
'demo source code': {
'zh-CN': 'demo 源码'
},
'example': {
'zh-CN': '使用例子'
},
'Props': {
'zh-CN': '属性'
},
'Events': {
'zh-CN': '事件'
},
'Slots': {
'zh-CN': '插槽'
},
'Functions': {
'zh-CN': '方法'
},
'Prop': {
'zh-CN': '属性'
},
'Event': {
'zh-CN': '事件'
},
'Slot': {
'zh-CN': '插槽'
},
'Function': {
'zh-CN': '方法'
},
'Related issues': {
'zh-CN': '相关 issue'
},
'Contributors': {
'zh-CN': '贡献者'
},
'Referrences': {
'zh-CN': '参考资料'
},
'Tips': {
'zh-CN': '重要提示及已知问题'
},
'component tutorial': {
'zh-CN': '组件使用教程'
},
'name': {
'zh-CN': '名字'
},
'type': {
'zh-CN': '类型'
},
'params': {
'zh-CN': '参数'
},
'required vesion': {
'zh-CN': '版本要求'
},
'description': {
'zh-CN': '说明'
},
'default value': {
en: 'default',
'zh-CN': '默认值'
},
'Total commits quantity:': {
'zh-CN': '该组件(包含文档)迭代次数'
},
'Total contributors quantity:': {
'zh-CN': '贡献人数'
},
'contribute': {
'zh-CN': '贡献次数'
},
'date format': {
en: 'date-format',
'zh-CN': '日期格式化'
},
'number 格式化工具': {
en: 'number'
},
'url 参数解析': {
en: 'url querystring'
},
'string 处理工具': {
en: 'string'
},
'Search documents': {
'zh-CN': '搜索文档'
},
'No search results': {
'zh-CN': 'Sorry，无搜索结果'
},
'click to copy': {
'zh-CN': '点击复制'
},
'copy done!': {
'zh-CN': '复制成功'
},
'copy fail!': {
'zh-CN': '复制失败'
},
'Variables': {
'zh-CN': '样式变量'
},
'is inherited': {
'zh-CN': '是否继承自另一变量'
},
'inherited name': {
'zh-CN': '继承自变量'
},
'Online developers': {
'zh-CN': '在线 VUX 开发者'
},
'priceCurrency': {
en: 'USD',
'zh-CN': 'CNY'
},
'Local Registration': {
'zh-CN': '局部注册'
},
'Global Registration': {
'zh-CN': '全局注册'
}
}
module.exports = function (key, lang = 'en') {
if (!list[key]) {
return key
}
if (!list[key][lang]) {
return key
}
return list[key][lang]
}
================================================
FILE: docs/index.html
================================================
<html lang="en">
<!-- websites based on https://vuepress.vuejs.org/ Thanks to Evan You-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>VUX - Vue 移动端 UI 组件库</title>
<meta name="description" content="VUX 是基于 WeUI 和 Vue.js 的 移动端 UI 组件库，提供丰富的组件满足移动端(微信)页面常用业务需求。">
<link rel=icon href=https://i.loli.net/2018/04/06/5ac798bcb3f46.png type=image/x-icon>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
a {
font-weight: 500;
color: #666;
text-decoration: none
}
.home {
padding: 0rem 2rem 0;
max-width: 960px;
margin: 0 auto
}
.home .hero {
text-align: center
}
.home .hero h1 {
font-size: 3rem
}
.home .hero .action,.home .hero .description,.home .hero h1 {
margin: 1.8rem auto
}
.home .hero .description {
max-width: 35rem;
font-size: 1.6rem;
line-height: 1.3;
color: #6a8bad
}
.home .hero .action {
display: flex;
width: 350px;
}
.home .hero .action > div {
flex: 1;
}
.home .hero .action-button, .home .hero .juejin-button {
display: inline-block;
font-size: 1.2rem;
color: #fff;
background-color: #3eaf7c;
padding: .5rem 1.6rem;
border-radius: 4px;
transition: background-color .1s ease;
box-sizing: border-box;
border-bottom: 1px solid #389d70
}
.home .hero .juejin-button {
background-color: #fff;
color: #007fff;
border: 2px solid #007fff;
margin-left: 25px;
padding: 0.42rem 1.2rem;
}
.home .hero .juejin-button:hover {
color: #0371df;
border-color: #0371df;
}
.home .hero .action-button:hover {
background-color: #4abf8a
}
.home .features {
border-top: 1px solid #eaecef;
padding: 1.2rem 0;
margin-top: 2.5rem;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
align-content: strech;
justify-content: space-between
}
.home .feature {
flex-grow: 1;
flex-basis: 30%;
max-width: 30%
}
.home .feature h2 {
font-size: 1.4rem;
font-weight: 500;
border-bottom: none;
padding-bottom: 0;
color: #3a5169
}
.home .feature p {
color: #4e6e8e
}
.home .footer {
padding: 2.5rem;
border-top: 1px solid #eaecef;
text-align: center;
color: #4e6e8e
}
@media (max-width: 719px) {
.home .features {
flex-direction:column
}
.home .feature {
max-width: 100%;
padding: 0 2.5rem
}
}
@media (max-width: 419px) {
.home {
padding-left:1.5rem;
padding-right: 1.5rem
}
.home .hero img {
max-height: 210px;
margin: 2rem auto 1.2rem
}
.home .hero h1 {
font-size: 2rem
}
.home .hero .action,.home .hero .description,.home .hero h1 {
margin: 1.2rem auto
}
.home .hero .description {
font-size: 1.2rem
}
.home .hero .action-button {
font-size: 1rem;
padding: .6rem 1.2rem
}
.home .feature h2 {
font-size: 1.25rem
}
.home .hero .action {
width: 100%;
}
.arrow {
display: none;
}
}
@media (max-width: 320px) {
.home .hero .action {
flex-direction: row;
flex-wrap: wrap;
}
.home .hero .action > div {
flex: 1 0 50%;
margin-top: 15px;
}
.home .hero .action a {
font-size: 1rem;
margin-left: 0;
}
.home .hero .action > div:first-child {
flex: 0 1 100%;
}
}
.action-link {
color: #666;
text-decoration: none;
}
@font-face {
font-family: Josefin Sans;
font-style: normal;
font-weight: 300;
src: local("Josefin Sans Light"),local("JosefinSans-Light"),url(https://fonts-gstatic.proxy.ustclug.org/s/josefinsans/v9/C6HYlRF50SGJq1XyXj04z7sKtFnhOiVZh9MDlvO1Vys.woff2) format("woff2");
}
@font-face {
font-family: Josefin Sans;
font-style: normal;
font-weight: 300;
src: local("Josefin Sans Light"),local("JosefinSans-Light"),url(https://fonts-gstatic.proxy.ustclug.org/s/josefinsans/v9/C6HYlRF50SGJq1XyXj04z0ZRWJQ0UjzR2Uv6RollX_g.woff2) format("woff2");
}
.vux-title {
font-size: 60px;
font-weight: 600;
font-family: Josefin Sans,sans-serif;
}
.best-companies {
text-align: center;
}
.best-companies a {
display: inline-block;
}
.best-companies img {
height: 48px;
margin: 0;
}
</style>
</head>
<body>
<div id="app">
<div class="theme-container no-sidebar">
<div class="home">
<div class="hero">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1024px" height="1024px" viewBox="0 0 1024 1024" enable-background="new 0 0 1024 1024" xml:space="preserve" style="width:120px;height:120px;">
<path data-index="path_0" fill="#35495e" d="M512 816.64 51.2 985.6l460.8-947.2 460.8 947.2L512 816.64 512 816.64zM509.44 207.36 189.44 862.72l317.44-117.76L506.88 207.36 509.44 207.36zM509.44 207.36" class="svgpath"></path>
</svg>
<h1 class="vux-title">VUX</h1>
<p class="description">
一个凑合的 Vue.js 移动端 UI 组件库
</p>
<div class="action">
<div>
<a href="https://doc.vux.li" class="action-button">
查看文档
</a>
<br>
<br>
<a href="https://vux.li/demos/v2/" class="action-link">
查看 Demo
</a>
</div>
<!-- <div>
<a href="https://juejin.im/welcome/frontend?utm_source=vux&utm_medium=word&utm_content=qianduan&utm_campaign=q3_website" class="juejin-button" target="_blank">
前端社区 <span class="arrow">→</span>
</a>
<br>
<br>
<a href="https://juejin.im/welcome/frontend?utm_source=vux&utm_medium=word&utm_content=qianduan&utm_campaign=q3_website" class="action-link" target="_blank">
访问掘金
</a>
</div> -->
</div>
<p class="best-companies">
<a href="https://www.upyun.com" target="_blank">
<img src="https://ww1.sinaimg.cn/large/663d3650gy1fs3l83hokej20b4040weg.jpg" style="height:42px;">
</a>
</p>
</div>
<div class="features">
<div class="feature">
<h2>体验不极致</h2>
<p>是的，VUX 还有很多问题，远远不完美，但一直在解决。<br/><br/>如果你在使用并且觉得有一些问题，不妨开个 issue 反馈一下，我们乐意解决详细描述的问题。</p>
</div>
<div class="feature">
<h2>维护靠个人</h2>
<p>是的，没有团队维护。国内大多数开发者都选择了有知名前端团队维护的组件库。<br/><br/>当然你也可以试试选择 VUX，毕竟维护两年时间，star 12k，一定程度上也说明并不比大公司团队开源的差，不是么？</p>
</div>
<div class="feature">
<h2>开始有了赞助支持</h2>
<p>是的，我们开始有了赞助来支持开发迭代。<br/><br/>如果 VUX 帮你节省了大量时间的话，欢迎<a href="https://doc.vux.li/zh-CN/contribution/donate.html">捐赠</a>以鼓励支持作者。</p>
</div>
</div>
<div class="footer">
MIT Licensed | Copyright © 2016-present Airyland | website based on <a href="https://vuepress.vuejs.org/">vuepress</a> by Evan You
</div>
</div>
</div>
</div>
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-89859411-2', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
================================================
FILE: docs/package.json
================================================
{
"scripts": {
"gen": "ream generate",
"start": "ream start",
"build": "ream build",
"dev": "ream dev"
},
"dependencies": {
"axios": "^0.16.1",
"babel-plugin-component": "^1.1.0",
"element-ui": "^2.3.4",
"github-markdown-css": "^2.6.0",
"highlight.js": "^9.11.0",
"js-yaml": "^3.11.0",
"less": "^2.7.2",
"less-loader": "^4.0.3",
"markdown-it-container": "^2.0.0",
"markdown-it-emoji": "^1.3.0",
"markdown-it-task-lists": "^2.0.0",
"nprogress": "^0.2.0",
"v-markdown-loader": "0.6.3",
"vue": "2.5.16",
"vue-clipboard2": "^0.1.0",
"vue-lazyload": "^1.2.3",
"vue-meta": "^1.0.4",
"vue-template-compiler": "2.5.16",
"yaml-loader": "^0.4.0"
},
"devDependencies": {
"algoliasearch": "^3.26.0",
"markdown-it": "^8.3.1",
"ream": "^1.0.0-rc.6",
"shelljs": "^0.8.1",
"vue-server-renderer": "^2.5.16",
"yargs": "^11.0.0"
}
}
================================================
FILE: docs/ream.config.js
================================================
var hljs = require('highlight.js');
var taskList
gitextract_8ntehtvf/
├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .github/
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE.md
│ └── PULL_REQUEST_TEMPLATE.md
├── .gitignore
├── .npmignore
├── .travis.yml
├── LICENSE
├── README.md
├── build/
│ ├── build-components.js
│ ├── build-docs.js
│ ├── build-main.js
│ ├── build-styles.js
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-doc.js
│ ├── document.js
│ ├── fetch-github.js
│ ├── less.js
│ ├── pre-publish.js
│ ├── simulate.sh
│ ├── umd-helper.js
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── vux-config.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ ├── webpack.prod.conf.js
│ └── webpack.test.conf.js
├── circle.yml
├── config/
│ ├── dev.env.js
│ ├── index.js
│ ├── prod.env.js
│ └── test.env.js
├── docs/
│ ├── 404.md
│ ├── about/
│ │ └── version.md
│ ├── compile.js
│ ├── component-contributors.js
│ ├── en/
│ │ ├── .gitkeep
│ │ ├── README.md
│ │ ├── about/
│ │ │ ├── before-using-vux.md
│ │ │ ├── contributors.vue
│ │ │ ├── showcase.md
│ │ │ └── thanks.md
│ │ ├── contribution/
│ │ │ ├── donate.md
│ │ │ ├── issue.md
│ │ │ ├── pr.md
│ │ │ └── vux-development.md
│ │ ├── css/
│ │ │ ├── 1px.md
│ │ │ └── close.md
│ │ ├── css.md
│ │ ├── development/
│ │ │ ├── i18n.md
│ │ │ ├── remove-click-delay-fastclick.md
│ │ │ ├── router.md
│ │ │ ├── theme.md
│ │ │ ├── typescript.md
│ │ │ ├── vue-ajax.md
│ │ │ ├── vue-global-method.md
│ │ │ ├── vue-google-analytics.md
│ │ │ ├── vue-loader-autoprefix.md
│ │ │ ├── vue-loader-disable-eslint.md
│ │ │ ├── vue-router-page-transition.md
│ │ │ ├── vue-show-loading.md
│ │ │ ├── vue-webpack-code-splitting-async.md
│ │ │ ├── vue-webpack-env.md
│ │ │ └── vux-nuxt-ssr.md
│ │ ├── directives/
│ │ │ └── v-transfer-dom.md
│ │ ├── faq/
│ │ │ ├── $t-is-not-defined.md
│ │ │ ├── Uncaught-SyntaxError-Unexpected-token-export.md
│ │ │ ├── can-vux-used-in-weapp.md
│ │ │ ├── cannot-resolve-inline-desc.md
│ │ │ ├── difference-between-vux-template-and-webpack-template.md
│ │ │ ├── document-framework.md
│ │ │ ├── does-vux-support-weex.md
│ │ │ ├── dupicate-style.md
│ │ │ ├── is-vux-wechat-official-project.md
│ │ │ ├── vux-build-issue.md
│ │ │ ├── vux-server-render-support.md
│ │ │ ├── what-is-vux-virtual-component.md
│ │ │ ├── why-cannot-i-import-all-components.md
│ │ │ ├── why-cannot-i-use-vux-with-cdn.md
│ │ │ ├── why-close-my-issue.md
│ │ │ ├── why-delete-my-issue-comment.md
│ │ │ ├── why-use-vue-file-for-distribution.md
│ │ │ ├── why-use-x-prefix-for-components.md
│ │ │ ├── why-using-vux-loader.md
│ │ │ └── will-vux-stop-maintaining.md
│ │ ├── install/
│ │ │ ├── biolerplate.md
│ │ │ ├── manual-usage.md
│ │ │ ├── npm.md
│ │ │ ├── umd.md
│ │ │ ├── upgrade-to-vux2.md
│ │ │ └── usage.md
│ │ ├── lab/
│ │ │ └── index.md
│ │ ├── production/
│ │ │ └── inline-manifest.md
│ │ ├── tools/
│ │ │ ├── base64.md
│ │ │ ├── cookie.md
│ │ │ ├── date.md
│ │ │ ├── debounce-throttle.md
│ │ │ ├── md5.md
│ │ │ ├── number.md
│ │ │ ├── querystring.md
│ │ │ └── string.md
│ │ ├── umd.md
│ │ ├── upgrade-to-2.md
│ │ ├── vux-loader/
│ │ │ ├── about.md
│ │ │ ├── how-vux-loader-works.md
│ │ │ ├── install.md
│ │ │ └── plugins.md
│ │ ├── vux-loader.md
│ │ └── wechat/
│ │ ├── other.md
│ │ ├── vue-wechat-jssdk.md
│ │ └── wechat-document-title.md
│ ├── examples/
│ │ ├── loading.html
│ │ ├── umd_component_include_all.html
│ │ ├── umd_component_include_single.html
│ │ ├── umd_plugin_include_all.html
│ │ └── umd_plugin_include_single.html
│ ├── i18n.js
│ ├── index.html
│ ├── package.json
│ ├── ream.config.js
│ ├── server.js
│ ├── src/
│ │ ├── App.vue
│ │ ├── algolia-search.vue
│ │ ├── app.css
│ │ ├── component.vue
│ │ ├── index.js
│ │ ├── summary.js
│ │ ├── tool-routes-en.json
│ │ └── tool-routes-zh-CN.json
│ ├── watch.js
│ └── zh-CN/
│ ├── README.md
│ ├── about/
│ │ ├── before-using-vux.md
│ │ ├── contributors.vue
│ │ ├── showcase.md
│ │ └── thanks.md
│ ├── contribution/
│ │ ├── donate.md
│ │ ├── issue.md
│ │ ├── pr.md
│ │ └── vux-development.md
│ ├── css/
│ │ ├── 1px.md
│ │ └── close.md
│ ├── css.md
│ ├── development/
│ │ ├── i18n.md
│ │ ├── remove-click-delay-fastclick.md
│ │ ├── router.md
│ │ ├── theme.md
│ │ ├── typescript.md
│ │ ├── vue-ajax.md
│ │ ├── vue-global-method.md
│ │ ├── vue-google-analytics.md
│ │ ├── vue-loader-autoprefix.md
│ │ ├── vue-loader-disable-eslint.md
│ │ ├── vue-router-page-transition.md
│ │ ├── vue-show-loading.md
│ │ ├── vue-webpack-code-splitting-async.md
│ │ ├── vue-webpack-env.md
│ │ └── vux-nuxt-ssr.md
│ ├── directives/
│ │ └── v-transfer-dom.md
│ ├── faq/
│ │ ├── $t-is-not-defined.md
│ │ ├── Uncaught-SyntaxError-Unexpected-token-export.md
│ │ ├── can-vux-used-in-weapp.md
│ │ ├── cannot-resolve-inline-desc.md
│ │ ├── difference-between-vux-template-and-webpack-template.md
│ │ ├── document-framework.md
│ │ ├── does-vux-support-weex.md
│ │ ├── dupicate-style.md
│ │ ├── is-vux-wechat-official-project.md
│ │ ├── vux-build-issue.md
│ │ ├── vux-server-render-support.md
│ │ ├── what-is-vux-virtual-component.md
│ │ ├── why-cannot-i-import-all-components.md
│ │ ├── why-cannot-i-use-vux-with-cdn.md
│ │ ├── why-close-my-issue.md
│ │ ├── why-delete-my-issue-comment.md
│ │ ├── why-use-vue-file-for-distribution.md
│ │ ├── why-use-x-prefix-for-components.md
│ │ ├── why-using-vux-loader.md
│ │ └── will-vux-stop-maintaining.md
│ ├── install/
│ │ ├── biolerplate.md
│ │ ├── manual-usage.md
│ │ ├── npm.md
│ │ ├── umd.md
│ │ ├── upgrade-to-vux2.md
│ │ └── usage.md
│ ├── lab/
│ │ └── index.md
│ ├── production/
│ │ └── inline-manifest.md
│ ├── tools/
│ │ ├── base64.md
│ │ ├── cookie.md
│ │ ├── date.md
│ │ ├── debounce-throttle.md
│ │ ├── md5.md
│ │ ├── number.md
│ │ ├── querystring.md
│ │ └── string.md
│ ├── umd.md
│ ├── upgrade-to-2.md
│ ├── vux-loader/
│ │ ├── about.md
│ │ ├── how-vux-loader-works.md
│ │ ├── install.md
│ │ └── plugins.md
│ ├── vux-loader.md
│ └── wechat/
│ ├── other.md
│ ├── vue-wechat-jssdk.md
│ └── wechat-document-title.md
├── index.html
├── index.js
├── package.json
├── packages/
│ ├── loader/
│ │ ├── README.md
│ │ ├── libs/
│ │ │ ├── get-i18n-block.js
│ │ │ ├── parse-i18n-function.js
│ │ │ └── replace-i18n-for-script.js
│ │ ├── package.json
│ │ ├── parse.js
│ │ ├── plugins/
│ │ │ ├── duplicate-style/
│ │ │ │ └── index.js
│ │ │ └── html-build-callback/
│ │ │ └── index.js
│ │ ├── src/
│ │ │ ├── after-less-loader.js
│ │ │ ├── before-template-compiler-loader.js
│ │ │ ├── i18n-loader.js
│ │ │ ├── index.js
│ │ │ ├── js-loader.js
│ │ │ ├── libs/
│ │ │ │ ├── babel-transform-imports/
│ │ │ │ │ ├── .babelrc
│ │ │ │ │ ├── .gitignore
│ │ │ │ │ ├── README.md
│ │ │ │ │ ├── index.js
│ │ │ │ │ ├── package.json
│ │ │ │ │ └── test/
│ │ │ │ │ ├── invalidTransform.js
│ │ │ │ │ ├── tests.js
│ │ │ │ │ └── transform.js
│ │ │ │ ├── get-less-variables.js
│ │ │ │ ├── getTag.js
│ │ │ │ ├── import-parser-v2.js
│ │ │ │ ├── import-parser.js
│ │ │ │ ├── parse-demo-code.js
│ │ │ │ ├── parse-virtual-component.js
│ │ │ │ ├── parse-x-icon.js
│ │ │ │ ├── report.js
│ │ │ │ └── stripe-attributes.js
│ │ │ ├── noop-loader.js
│ │ │ ├── script-loader.js
│ │ │ ├── style-loader.js
│ │ │ └── template-loader.js
│ │ └── test/
│ │ ├── fixtures/
│ │ │ ├── basic.vue
│ │ │ ├── css-modules.vue
│ │ │ ├── es2015.vue
│ │ │ ├── extend.vue
│ │ │ ├── extract-css.vue
│ │ │ ├── inject.js
│ │ │ ├── inject.vue
│ │ │ ├── media-query.vue
│ │ │ ├── postcss.vue
│ │ │ ├── pre.vue
│ │ │ ├── resolve.vue
│ │ │ ├── scoped-css.vue
│ │ │ ├── script-import.js
│ │ │ ├── script-import.vue
│ │ │ ├── service.js
│ │ │ ├── style-import-scoped.css
│ │ │ ├── style-import.css
│ │ │ ├── style-import.vue
│ │ │ ├── template-import.pug
│ │ │ └── template-import.vue
│ │ ├── test.js
│ │ └── vux-fixtures/
│ │ ├── less-theme-001.less
│ │ ├── less-theme-002.less
│ │ ├── less-theme-basic.less
│ │ ├── less-theme-basic.vue
│ │ ├── less-theme-import.less
│ │ ├── option-vux-dir.vue
│ │ ├── script-parser-fn.vue
│ │ ├── style-parser-basic.vue
│ │ ├── template-feature-switch-basic.vue
│ │ └── template-parser-fn.vue
│ └── vue-cli-3-example/
│ ├── .browserslistrc
│ ├── .editorconfig
│ ├── .eslintrc.js
│ ├── .gitignore
│ ├── README.md
│ ├── babel.config.js
│ ├── package.json
│ ├── postcss.config.js
│ ├── public/
│ │ └── index.html
│ ├── src/
│ │ ├── App.vue
│ │ ├── components/
│ │ │ ├── HelloWorld.js
│ │ │ └── HelloWorld.vue
│ │ ├── main.js
│ │ ├── router.js
│ │ ├── store.js
│ │ ├── theme.less
│ │ └── views/
│ │ ├── About.vue
│ │ └── Home.vue
│ └── vue.config.js
├── src/
│ ├── App.vue
│ ├── components/
│ │ ├── actionsheet/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── agree/
│ │ │ ├── index.vue
│ │ │ └── test.js
│ │ ├── alert/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── badge/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── blur/
│ │ │ ├── blur.js
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── box/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── button-tab/
│ │ │ ├── button-tab-item.vue
│ │ │ ├── button-tab.vue
│ │ │ ├── index.js
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── calendar/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── card/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── cell/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ ├── props.js
│ │ │ ├── test/
│ │ │ │ └── wrapper.vue
│ │ │ └── test.js
│ │ ├── cell-box/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── cell-form-preview/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── check-icon/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── checker/
│ │ │ ├── checker-item.vue
│ │ │ ├── checker.vue
│ │ │ ├── index.js
│ │ │ └── metas.yml
│ │ ├── checklist/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ ├── object-filter.js
│ │ │ └── test.js
│ │ ├── clocker/
│ │ │ ├── clocker.js
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── color-picker/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── confirm/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── countdown/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── countup/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── datetime/
│ │ │ ├── datetimepicker.js
│ │ │ ├── format.js
│ │ │ ├── index.vue
│ │ │ ├── makeData.js
│ │ │ ├── metas.yml
│ │ │ ├── style.less
│ │ │ ├── test.js
│ │ │ └── util.js
│ │ ├── datetime-range/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── datetime-view/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── dev-tip/
│ │ │ └── index.vue
│ │ ├── divider/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── drawer/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── flexbox/
│ │ │ ├── flexbox-item.vue
│ │ │ ├── flexbox.vue
│ │ │ ├── index.js
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── flow/
│ │ │ ├── flow-line.vue
│ │ │ ├── flow-state.vue
│ │ │ ├── flow.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── form-preview/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── fullpage/
│ │ │ ├── DemoBasic.vue
│ │ │ ├── index.vue
│ │ │ └── lib.js
│ │ ├── grid/
│ │ │ ├── grid-item.vue
│ │ │ ├── grid.vue
│ │ │ ├── index.js
│ │ │ └── metas.yml
│ │ ├── group/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── group-title/
│ │ │ ├── index.vue
│ │ │ └── test.js
│ │ ├── icon/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── inline-calendar/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ ├── props.js
│ │ │ ├── test.js
│ │ │ └── util.js
│ │ ├── inline-desc/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── inline-loading/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── inline-x-number/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── inline-x-switch/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── style.less
│ │ ├── load-more/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── loading/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── map.json
│ │ ├── marquee/
│ │ │ ├── marquee-item.vue
│ │ │ ├── marquee.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── masker/
│ │ │ ├── converter.js
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── metas.yml
│ │ ├── msg/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── number-roller/
│ │ │ ├── index.vue
│ │ │ └── lib.js
│ │ ├── orientation/
│ │ │ ├── index.js
│ │ │ └── orientation.js
│ │ ├── panel/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── picker/
│ │ │ ├── animate.js
│ │ │ ├── chain.js
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ ├── scroller.css
│ │ │ ├── scroller.js
│ │ │ ├── test.js
│ │ │ └── util.js
│ │ ├── popover/
│ │ │ ├── DemoIndex.vue
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── popup/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ ├── popup.js
│ │ │ └── test.js
│ │ ├── popup-header/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── popup-picker/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── popup-radio/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── previewer/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── qrcode/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── radio/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ ├── props.js
│ │ │ └── test.js
│ │ ├── range/
│ │ │ ├── index.vue
│ │ │ ├── lib/
│ │ │ │ ├── classes.js
│ │ │ │ ├── closest.js
│ │ │ │ ├── delegate.js
│ │ │ │ ├── emitter.js
│ │ │ │ ├── event.js
│ │ │ │ ├── events.js
│ │ │ │ ├── matches-selector.js
│ │ │ │ ├── mouse.js
│ │ │ │ └── query.js
│ │ │ ├── metas.yml
│ │ │ ├── powerange.js
│ │ │ ├── powerange.less
│ │ │ └── utils.js
│ │ ├── rater/
│ │ │ ├── index.vue
│ │ │ └── metas.yml
│ │ ├── scroller/
│ │ │ ├── index.vue
│ │ │ └── metas.yml
│ │ ├── search/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── selector/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── shake/
│ │ │ └── index.vue
│ │ ├── spinner/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ ├── requestAnimationFrame.js
│ │ │ └── spinner.js
│ │ ├── step/
│ │ │ ├── index.js
│ │ │ ├── metas.yml
│ │ │ ├── step-item.vue
│ │ │ └── step.vue
│ │ ├── sticky/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── sticky.js
│ │ ├── swipeout/
│ │ │ ├── index.js
│ │ │ ├── metas.yml
│ │ │ ├── swipeout-button.vue
│ │ │ ├── swipeout-item.vue
│ │ │ └── swipeout.vue
│ │ ├── swiper/
│ │ │ ├── index.js
│ │ │ ├── metas.yml
│ │ │ ├── swiper-item.vue
│ │ │ ├── swiper.js
│ │ │ └── swiper.vue
│ │ ├── tab/
│ │ │ ├── index.js
│ │ │ ├── metas.yml
│ │ │ ├── tab-item.vue
│ │ │ └── tab.vue
│ │ ├── tabbar/
│ │ │ ├── index.js
│ │ │ ├── metas.yml
│ │ │ ├── tabbar-item.vue
│ │ │ └── tabbar.vue
│ │ ├── timeline/
│ │ │ ├── index.js
│ │ │ ├── metas.yml
│ │ │ ├── timeline-item.vue
│ │ │ └── timeline.vue
│ │ ├── tip/
│ │ │ └── index.vue
│ │ ├── toast/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── uploader/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── utils.js
│ │ ├── v-chart/
│ │ │ ├── metas.yml
│ │ │ ├── mixin.js
│ │ │ ├── util.js
│ │ │ ├── v-area.vue
│ │ │ ├── v-axis.vue
│ │ │ ├── v-bar.vue
│ │ │ ├── v-chart.vue
│ │ │ ├── v-guide.vue
│ │ │ ├── v-legend.vue
│ │ │ ├── v-line.vue
│ │ │ ├── v-pie.vue
│ │ │ ├── v-point.vue
│ │ │ ├── v-scale.vue
│ │ │ └── v-tooltip.vue
│ │ ├── video/
│ │ │ ├── index.vue
│ │ │ ├── zy.media.css
│ │ │ └── zy.media.js
│ │ ├── view-box/
│ │ │ ├── index.vue
│ │ │ └── metas.yml
│ │ ├── wechat-emotion/
│ │ │ ├── index.vue
│ │ │ └── metas.yml
│ │ ├── week-calendar/
│ │ │ └── index.vue
│ │ ├── wepay-input/
│ │ │ └── index.vue
│ │ ├── x-address/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── x-button/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── x-circle/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── x-dialog/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── x-form/
│ │ │ ├── field.vue
│ │ │ ├── form.vue
│ │ │ ├── index.js
│ │ │ └── metas.yml
│ │ ├── x-header/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── x-hr/
│ │ │ └── index.vue
│ │ ├── x-icon/
│ │ │ └── metas.yml
│ │ ├── x-img/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── x-input/
│ │ │ ├── fixtures/
│ │ │ │ └── Mask.vue
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── x-number/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── x-progress/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── x-switch/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ ├── x-table/
│ │ │ ├── index.vue
│ │ │ ├── metas.yml
│ │ │ └── test.js
│ │ └── x-textarea/
│ │ ├── index.vue
│ │ ├── metas.yml
│ │ └── test.js
│ ├── datas/
│ │ ├── china_address.json
│ │ ├── china_address_v1.json
│ │ ├── china_address_v2.json
│ │ ├── china_address_v3.json
│ │ ├── china_address_v4.json
│ │ └── vux_component_list.json
│ ├── demo_list.json
│ ├── demos/
│ │ ├── Actionsheet.vue
│ │ ├── Agree.vue
│ │ ├── Alert.vue
│ │ ├── AppTest.vue
│ │ ├── Badge.vue
│ │ ├── Blur.vue
│ │ ├── ButtonTab.vue
│ │ ├── Calendar.vue
│ │ ├── Card.vue
│ │ ├── Cell.vue
│ │ ├── CellBox.vue
│ │ ├── CellFormPreview.vue
│ │ ├── Center.vue
│ │ ├── CheckIcon.vue
│ │ ├── Checker.vue
│ │ ├── Checklist.vue
│ │ ├── Clocker.vue
│ │ ├── Close.vue
│ │ ├── ColorPicker.vue
│ │ ├── Comment.vue
│ │ ├── Confirm.vue
│ │ ├── Countdown.vue
│ │ ├── Countup.vue
│ │ ├── Datetime.vue
│ │ ├── DatetimeRange.vue
│ │ ├── DatetimeView.vue
│ │ ├── Demo.vue
│ │ ├── DemoList.vue
│ │ ├── Device.vue
│ │ ├── Divider.vue
│ │ ├── Donate.vue
│ │ ├── Drawer.vue
│ │ ├── Flexbox.vue
│ │ ├── Flow.vue
│ │ ├── FormPreview.vue
│ │ ├── FormatTime.vue
│ │ ├── Grid.vue
│ │ ├── GridComponent.vue
│ │ ├── GridNumber.vue
│ │ ├── Group.vue
│ │ ├── Home.vue
│ │ ├── Icon.vue
│ │ ├── IconLoading.vue
│ │ ├── Inline-calendar-start-date.vue
│ │ ├── InlineCalendar.vue
│ │ ├── InlineCalendarEachDaySlot.vue
│ │ ├── InlineCalendarMulti.vue
│ │ ├── InlineLoading.vue
│ │ ├── InlineXNumber.vue
│ │ ├── InlineXSwitch.vue
│ │ ├── Issue1211.vue
│ │ ├── Issue189.vue
│ │ ├── Issue2365.vue
│ │ ├── Issue2960.vue
│ │ ├── Issue461.vue
│ │ ├── Issue471.vue
│ │ ├── Issue598.vue
│ │ ├── Issue624.vue
│ │ ├── Issue649.vue
│ │ ├── Issue702.vue
│ │ ├── Issue833.vue
│ │ ├── Issue865.vue
│ │ ├── Line.vue
│ │ ├── LoadMore.vue
│ │ ├── Loading.vue
│ │ ├── Marquee.vue
│ │ ├── Masker.vue
│ │ ├── Msg.vue
│ │ ├── NotFoundComponent.vue
│ │ ├── NumberRoller.vue
│ │ ├── OnePx.vue
│ │ ├── Panel.vue
│ │ ├── Picker.vue
│ │ ├── Popover.vue
│ │ ├── Popup.vue
│ │ ├── PopupHeader.vue
│ │ ├── PopupPicker.vue
│ │ ├── PopupRadio.vue
│ │ ├── Previewer.vue
│ │ ├── Pulldown.vue
│ │ ├── PulldownPullup.vue
│ │ ├── Pullup.vue
│ │ ├── Qrcode.vue
│ │ ├── Querystring.vue
│ │ ├── Radio.vue
│ │ ├── Range.vue
│ │ ├── Rater.vue
│ │ ├── Reddot.vue
│ │ ├── Scroller.vue
│ │ ├── ScrollerFull.vue
│ │ ├── ScrollerHeader.vue
│ │ ├── ScrollerSwiper.vue
│ │ ├── Search.vue
│ │ ├── SearchStatic.vue
│ │ ├── Selector.vue
│ │ ├── Shake.vue
│ │ ├── Spinner.vue
│ │ ├── Step.vue
│ │ ├── Sticky.vue
│ │ ├── Swipeout.vue
│ │ ├── Swiper.vue
│ │ ├── Tab.vue
│ │ ├── Tabbar.vue
│ │ ├── TabbarIcon.vue
│ │ ├── TabbarLink.vue
│ │ ├── TabbarSimple.vue
│ │ ├── Test.vue
│ │ ├── Thanks.vue
│ │ ├── Timeline.vue
│ │ ├── Toast.vue
│ │ ├── ToggleText.vue
│ │ ├── Uploader.vue
│ │ ├── ViewBox.vue
│ │ ├── Wechat.vue
│ │ ├── WechatEmotion.vue
│ │ ├── WeekCalendar.vue
│ │ ├── WepayInput.vue
│ │ ├── XAddress.vue
│ │ ├── XButton.vue
│ │ ├── XCircle.vue
│ │ ├── XDialog.vue
│ │ ├── XForm.vue
│ │ ├── XHeader.vue
│ │ ├── XHr.vue
│ │ ├── XIcon.vue
│ │ ├── XImg.vue
│ │ ├── XImgPopup.vue
│ │ ├── XImgScroller.vue
│ │ ├── XInput.vue
│ │ ├── XNumber.vue
│ │ ├── XProgress.vue
│ │ ├── XSwitch.vue
│ │ ├── XTable.vue
│ │ ├── XTextarea.vue
│ │ ├── countdown/
│ │ │ ├── basic.vue
│ │ │ └── manually.vue
│ │ ├── style.css
│ │ ├── v-chart/
│ │ │ ├── area_basic.vue
│ │ │ ├── area_compare.json
│ │ │ ├── area_compare.vue
│ │ │ ├── area_empty.json
│ │ │ ├── area_empty.vue
│ │ │ ├── area_gradient.vue
│ │ │ ├── area_negative.vue
│ │ │ ├── area_stack.vue
│ │ │ ├── bar_basic.vue
│ │ │ ├── bar_percent.vue
│ │ │ ├── bar_series.vue
│ │ │ ├── bar_stack.vue
│ │ │ ├── line_basic.vue
│ │ │ ├── line_color.json
│ │ │ ├── line_color.vue
│ │ │ ├── line_gradient.vue
│ │ │ ├── line_realtime.vue
│ │ │ ├── line_smooth_with_dot.vue
│ │ │ ├── line_with_dot.vue
│ │ │ ├── pie_annular.vue
│ │ │ ├── pie_basic.vue
│ │ │ ├── point.json
│ │ │ ├── point.vue
│ │ │ └── prevent_render.vue
│ │ └── x-circle/
│ │ ├── basic.vue
│ │ └── gradient.vue
│ ├── directives/
│ │ ├── click-outside/
│ │ │ └── index.js
│ │ ├── inview/
│ │ │ ├── index.js
│ │ │ └── inview.js
│ │ └── transfer-dom/
│ │ ├── index.js
│ │ └── metas.yml
│ ├── faq-routes.json
│ ├── filters/
│ │ ├── array2String.js
│ │ ├── format-time.js
│ │ ├── friendly-time.js
│ │ ├── name2value.js
│ │ └── value2name.js
│ ├── libs/
│ │ ├── base.js
│ │ ├── clean-style.js
│ │ ├── dom.js
│ │ ├── eventor.js
│ │ ├── get-parent-prop.js
│ │ ├── is-array.js
│ │ ├── mixin_uuid.js
│ │ ├── passive_supported.js
│ │ ├── plugin_helper.js
│ │ ├── router.js
│ │ ├── trim.js
│ │ └── webp-support.js
│ ├── lints/
│ │ └── shouleBeInGroup.js
│ ├── locales/
│ │ ├── all.yml
│ │ ├── en.yml
│ │ └── zh-CN.yml
│ ├── main.js
│ ├── mixins/
│ │ ├── calendar-marks.js
│ │ ├── multi-items.js
│ │ ├── prevent-body-scroll.js
│ │ ├── safari-fix.js
│ │ └── uuid.js
│ ├── plugins/
│ │ ├── ajax/
│ │ │ ├── index.js
│ │ │ └── metas.yml
│ │ ├── alert/
│ │ │ ├── index.js
│ │ │ ├── module.js
│ │ │ └── util.js
│ │ ├── app/
│ │ │ └── index.js
│ │ ├── bus/
│ │ │ ├── index.js
│ │ │ └── metas.yml
│ │ ├── close-dialogs/
│ │ │ ├── index.js
│ │ │ └── metas.yml
│ │ ├── config/
│ │ │ └── index.js
│ │ ├── confirm/
│ │ │ └── index.js
│ │ ├── datetime/
│ │ │ ├── index.js
│ │ │ └── metas.yml
│ │ ├── device/
│ │ │ ├── doc.md
│ │ │ └── index.js
│ │ ├── loading/
│ │ │ ├── index.js
│ │ │ ├── metas.yaml
│ │ │ ├── module.js
│ │ │ └── util.js
│ │ ├── locale/
│ │ │ └── index.js
│ │ ├── toast/
│ │ │ ├── index.js
│ │ │ └── metas.yaml
│ │ └── wechat/
│ │ ├── 1.3.0.js
│ │ ├── 1.3.2.js
│ │ ├── index.js
│ │ ├── metas.yml
│ │ ├── origin.1.3.0.js
│ │ └── origin.1.3.2.js
│ ├── styles/
│ │ ├── 1px.less
│ │ ├── 1px.yml
│ │ ├── blank.less
│ │ ├── center.less
│ │ ├── close.less
│ │ ├── close.yml
│ │ ├── doc.md
│ │ ├── index.less
│ │ ├── index.vue
│ │ ├── loading.less
│ │ ├── reddot.less
│ │ ├── reset.less
│ │ ├── tap.less
│ │ ├── transition.less
│ │ ├── variable.less
│ │ ├── vux-modal.css
│ │ └── weui/
│ │ ├── base/
│ │ │ ├── fn.less
│ │ │ ├── mixin/
│ │ │ │ ├── mobile.less
│ │ │ │ ├── setArrow.less
│ │ │ │ ├── setChecked.less
│ │ │ │ ├── setOnepx.less
│ │ │ │ └── text.less
│ │ │ ├── reset.less
│ │ │ └── variable/
│ │ │ ├── color.less
│ │ │ ├── global.less
│ │ │ ├── weui-cell.less
│ │ │ ├── weui-dialog.less
│ │ │ ├── weui_button.less
│ │ │ ├── weui_grid.less
│ │ │ ├── weui_msg.less
│ │ │ └── weui_progress.less
│ │ ├── icon/
│ │ │ ├── weui_font.less
│ │ │ └── weui_icon_font.less
│ │ ├── weui.less
│ │ └── widget/
│ │ ├── weui-agree/
│ │ │ └── weui-agree.less
│ │ ├── weui-animate/
│ │ │ └── weui-animate.less
│ │ ├── weui-button/
│ │ │ ├── weui-btn_default.less
│ │ │ ├── weui-btn_disabled.less
│ │ │ ├── weui-btn_global.less
│ │ │ ├── weui-btn_loading.less
│ │ │ ├── weui-btn_plain.less
│ │ │ ├── weui-btn_primary.less
│ │ │ ├── weui-btn_warn.less
│ │ │ └── weui-button.less
│ │ ├── weui-flex/
│ │ │ └── weui-flex.less
│ │ ├── weui-footer/
│ │ │ └── weui-footer.less
│ │ ├── weui-grid/
│ │ │ └── weui-grid.less
│ │ ├── weui-loading/
│ │ │ └── weui-loading.less
│ │ ├── weui-picker/
│ │ │ └── weui-picker.less
│ │ ├── weui-slider.less/
│ │ │ └── weui-slider.less
│ │ ├── weui-uploader/
│ │ │ └── index.less
│ │ ├── weui_cell/
│ │ │ ├── weui-gallery.less
│ │ │ ├── weui_access.less
│ │ │ ├── weui_cell_global.less
│ │ │ ├── weui_check/
│ │ │ │ ├── weui_check_common.less
│ │ │ │ ├── weui_checkbox.less
│ │ │ │ └── weui_radio.less
│ │ │ ├── weui_check.less
│ │ │ ├── weui_form/
│ │ │ │ ├── weui-form-preview.less
│ │ │ │ ├── weui_form_common.less
│ │ │ │ ├── weui_select.less
│ │ │ │ └── weui_vcode.less
│ │ │ ├── weui_form.less
│ │ │ ├── weui_switch.less
│ │ │ └── weui_uploader.less
│ │ ├── weui_media_box/
│ │ │ └── weui_media_box.less
│ │ ├── weui_page/
│ │ │ ├── weui_article.less
│ │ │ └── weui_msg.less
│ │ ├── weui_panel/
│ │ │ └── weui_panel.less
│ │ ├── weui_progress/
│ │ │ └── weui_progress.less
│ │ ├── weui_searchbar/
│ │ │ └── weui_searchbar.less
│ │ ├── weui_tab/
│ │ │ ├── navbar.less
│ │ │ ├── vux-tabbar.less
│ │ │ ├── weui-tabbar.less
│ │ │ ├── weui_tab.less
│ │ │ └── weui_tab_tabbar.less
│ │ └── weui_tips/
│ │ ├── weui-badge.less
│ │ ├── weui-loadmore.less
│ │ ├── weui_actionsheet.less
│ │ ├── weui_dialog.less
│ │ ├── weui_mask.less
│ │ └── weui_toast.less
│ ├── theme.less
│ ├── tools/
│ │ ├── base64/
│ │ │ └── index.js
│ │ ├── cookie/
│ │ │ ├── index.js
│ │ │ └── metas.yml
│ │ ├── date/
│ │ │ ├── format.js
│ │ │ ├── metas.yml
│ │ │ └── range.js
│ │ ├── debounce/
│ │ │ ├── index.js
│ │ │ └── metas.yml
│ │ ├── md5/
│ │ │ ├── index.js
│ │ │ └── metas.yml
│ │ ├── number/
│ │ │ ├── comma.js
│ │ │ ├── metas.yml
│ │ │ ├── pad.js
│ │ │ ├── random.js
│ │ │ └── range.js
│ │ ├── querystring/
│ │ │ └── index.js
│ │ ├── string/
│ │ │ ├── metas.yml
│ │ │ └── trim.js
│ │ ├── throttle/
│ │ │ ├── index.js
│ │ │ └── metas.yml
│ │ └── validator/
│ │ └── chinaMobile.js
│ └── vuex/
│ └── store.js
├── ssr/
│ └── nuxt/
│ ├── .babelrc
│ ├── layouts/
│ │ └── default.vue
│ ├── nuxt.config.js
│ ├── package.json
│ ├── pages/
│ │ └── index.vue
│ ├── plugins/
│ │ ├── vux-components.js
│ │ └── vux-plugins.js
│ └── styles/
│ └── theme.less
├── static/
│ └── .gitkeep
└── test/
└── unit/
├── dateFormat.spec.js
├── index.js
└── karma.conf.js
SYMBOL INDEX (443 symbols across 100 files)
FILE: build/build-components.js
function camelCase (line 142) | function camelCase(input) {
function _camelCase (line 152) | function _camelCase(input) {
function buildMainConfig (line 157) | function buildMainConfig() {
function buildPlugin (line 208) | function buildPlugin(name) {
function buildConfig (line 231) | function buildConfig(one, opts) {
function toDash (line 259) | function toDash(str) {
FILE: build/build-docs.js
function getPath (line 46) | function getPath(dir) {
function saveMaps (line 60) | function saveMaps(key, value) {
function setKey (line 196) | function setKey(object, name) {
function getComponentName (line 251) | function getComponentName(path) {
function render (line 266) | function render(files, tag) {
function buildCssDocs (line 477) | function buildCssDocs(infoList) {
function getVersion (line 488) | function getVersion(version) {
function getComponentInfo (line 500) | function getComponentInfo(one, lang, docs, name) {
function getKeyHTML (line 586) | function getKeyHTML(key) {
function getTypeHTML (line 590) | function getTypeHTML(type) {
function getChangeTagHTML (line 604) | function getChangeTagHTML(str, fontSize = '15px') {
function getColorHTML (line 611) | function getColorHTML(one) {
function t (line 624) | function t(key, lang) {
function camelCase (line 644) | function camelCase(input) {
function _camelCase (line 655) | function _camelCase(input) {
function parseChange (line 660) | function parseChange(str) {
function parseTag (line 674) | function parseTag(firstTag, tag, lang) {
function buildChanges (line 681) | function buildChanges(infos, lang = 'zh-CN') {
FILE: build/build-styles.js
function parse (line 31) | function parse (file) {
FILE: build/check-versions.js
function exec (line 5) | function exec (cmd) {
FILE: build/document.js
function getPath (line 8) | function getPath(dir) {
FILE: build/pre-publish.js
function getPath (line 4) | function getPath(dir) {
FILE: build/utils.js
function generateLoaders (line 32) | function generateLoaders (loader, loaderOptions) {
FILE: build/vux-config.js
function toDash (line 190) | function toDash(str) {
FILE: build/webpack.base.conf.js
function resolve (line 11) | function resolve (dir) {
FILE: docs/compile.js
function getComponentName (line 137) | function getComponentName(path) {
function camelCase (line 1169) | function camelCase(input) {
function _camelCase (line 1180) | function _camelCase(input) {
FILE: docs/ream.config.js
method extendWebpack (line 45) | extendWebpack(config) {
FILE: docs/src/index.js
method UPDATE_CONTRIBUTORS (line 30) | UPDATE_CONTRIBUTORS(state, payload) {
method updateContributors (line 35) | async updateContributors({
FILE: packages/loader/libs/get-i18n-block.js
function get (line 8) | function get (code, isFile = false) {
function getWithLocale (line 22) | function getWithLocale ({ code = '', isFile = false, locale = ''}) {
FILE: packages/loader/libs/parse-i18n-function.js
function generateHTML (line 5) | function generateHTML(rs) {
function parseExpression (line 29) | function parseExpression(list, key, map) {
function doParseExpression (line 54) | function doParseExpression(code, map) {
function parseAttrs (line 84) | function parseAttrs(nodes, map) {
function parse (line 140) | function parse(code, map) {
function parseCallExpression (line 149) | function parseCallExpression (expression, map) {
function buildStringExpression (line 164) | function buildStringExpression(value) {
FILE: packages/loader/libs/replace-i18n-for-script.js
function replace (line 3) | function replace (code, map = {}, options = {}) {
function addQuotes (line 15) | function addQuotes (str) {
FILE: packages/loader/plugins/duplicate-style/index.js
function OptimizeCssAssetsPlugin (line 9) | function OptimizeCssAssetsPlugin(options) {
FILE: packages/loader/plugins/html-build-callback/index.js
function Plugin (line 26) | function Plugin(options) {
FILE: packages/loader/src/index.js
function DonePlugin (line 33) | function DonePlugin(callbacks) {
function EmitPlugin (line 57) | function EmitPlugin(callback) {
function hasPlugin (line 75) | function hasPlugin(name, list) {
function getFirstPlugin (line 82) | function getFirstPlugin(name, list) {
function getBabelLoader (line 609) | function getBabelLoader(projectRoot, name, isDev) {
function setWebpackConfig (line 635) | function setWebpackConfig(oriConfig, appendConfig, isWebpack2) {
function getOnePlugin (line 644) | function getOnePlugin(name, plugins) {
FILE: packages/loader/src/libs/babel-transform-imports/index.js
function findOptionFromSource (line 9) | function findOptionFromSource(source, state) {
function getMatchesFromSource (line 34) | function getMatchesFromSource(opt, source) {
function barf (line 47) | function barf(msg) {
function transform (line 51) | function transform(transformOption, importName, matches) {
FILE: packages/loader/src/libs/babel-transform-imports/test/tests.js
function createOptions (line 5) | function createOptions({
function occurrences (line 22) | function occurrences(regex, test) {
function transform (line 26) | function transform(code, options = createOptions({})) {
FILE: packages/loader/src/libs/get-less-variables.js
function trim (line 11) | function trim (str) {
function getContent (line 19) | function getContent (file) {
FILE: packages/loader/src/libs/getTag.js
function getTag (line 1) | function getTag(content, tag, action='remove') {
function removeTagCode (line 13) | function removeTagCode (content, tag) {
function reserveTagCode (line 17) | function reserveTagCode (content, tag) {
FILE: packages/loader/src/libs/import-parser-v2.js
function transform (line 6) | function transform (code, filename) {
FILE: packages/loader/src/libs/import-parser.js
function parse (line 5) | function parse(source, fn, moduleName) {
function getReg (line 47) | function getReg(moduleName) {
function removeCommentLine (line 51) | function removeCommentLine (source) {
function getNames (line 63) | function getNames(one) {
function trimLine (line 94) | function trimLine (str) {
function trim (line 114) | function trim (str) {
function removeComments (line 119) | function removeComments(str) {
FILE: packages/loader/src/libs/parse-virtual-component.js
function replaceEnd (line 19) | function replaceEnd(str, name) {
function getAttributes (line 44) | function getAttributes (string) {
FILE: packages/loader/src/script-loader.js
function camelCaseToDash (line 106) | function camelCaseToDash(str) {
FILE: packages/loader/src/template-loader.js
function parseOnFeature (line 322) | function parseOnFeature(content, features) {
function parseOffFeature (line 346) | function parseOffFeature(content, features) {
function parseI18n (line 370) | function parseI18n(json, langs) {
function mergeLang (line 397) | function mergeLang(a, b) {
FILE: packages/loader/test/fixtures/script-import.js
method data (line 2) | data () {
FILE: packages/loader/test/test.js
function getOptionsPlugin (line 21) | function getOptionsPlugin(config) {
function bundle (line 46) | function bundle(options, vuxOptions, cb) {
function test (line 93) | function test(options, vuxOptions, assert) {
function mockRender (line 109) | function mockRender(options, data) {
function interopDefault (line 135) | function interopDefault(module) {
FILE: packages/vue-cli-3-example/src/components/HelloWorld.js
method alert (line 13) | alert () {
FILE: src/components/blur/blur.js
method createElement (line 67) | createElement (name, attrs) {
method setAttr (line 77) | setAttr (element, attrs) {
function getStyle (line 263) | function getStyle (ele, prop) {
FILE: src/components/clocker/clocker.js
function parseDateString (line 19) | function parseDateString (dateString) {
function escapedRegExp (line 53) | function escapedRegExp (str) {
function strftime (line 59) | function strftime (offsetObject) {
function pluralize (line 117) | function pluralize (format, count) {
function splitNumber (line 136) | function splitNumber (number) {
method start (line 159) | start () {
method stop (line 170) | stop () {
method toggle (line 176) | toggle () {
method pause (line 184) | pause () {
method resume (line 187) | resume () {
method remove (line 190) | remove () {
method setFinalDate (line 194) | setFinalDate (value) {
method getOffset (line 198) | getOffset () {
method update (line 213) | update () {
method _dispatchEvent (line 236) | _dispatchEvent (eventName) {
FILE: src/components/datetime/datetimepicker.js
constant MASK_TEMPLATE (line 7) | const MASK_TEMPLATE = '<div class="dp-mask"></div>'
constant TEMPLATE (line 9) | const TEMPLATE = `<div class="dp-container">
constant SHOW_ANIMATION_TIME (line 25) | const SHOW_ANIMATION_TIME = 200
constant SHOW_CONTAINER_TIME (line 26) | const SHOW_CONTAINER_TIME = 300
constant TYPE_MAP (line 28) | const TYPE_MAP = {
constant MASK (line 37) | let MASK = null
constant CURRENT_PICKER (line 39) | let CURRENT_PICKER
constant NOW (line 41) | const NOW = new Date()
constant DEFAULT_CONFIG (line 43) | const DEFAULT_CONFIG = {
method onSelect (line 65) | onSelect () {}
method onConfirm (line 66) | onConfirm () {}
method onClear (line 67) | onClear () {}
method onShow (line 68) | onShow () {}
method onHide (line 69) | onHide () {}
function renderScroller (line 81) | function renderScroller (el, data, value, fn) {
function showMask (line 93) | function showMask () {
function hideMask (line 117) | function hideMask () {
function DatetimePicker (line 129) | function DatetimePicker (config) {
method _show (line 178) | _show (newValueMap) {
method show (line 196) | show (value) {
method _setText (line 318) | _setText () {
method _makeData (line 330) | _makeData (type, year, month, day) {
method _setMonthScroller (line 444) | _setMonthScroller (currentValue, month) {
method _setDayScroller (line 464) | _setDayScroller (year, month, day) {
method _setHourScroller (line 481) | _setHourScroller (year, month, day, hour) {
method find (line 493) | find (selector) {
method hide (line 497) | hide (type) {
method select (line 519) | select (type, value) {
method destroy (line 523) | destroy () {
method getValue (line 534) | getValue () {
method confirm (line 559) | confirm () {
method clear (line 570) | clear () {
FILE: src/components/datetime/makeData.js
function isLeapYear (line 1) | function isLeapYear (year) {
function getMaxDay (line 5) | function getMaxDay (year, month) {
function getYears (line 14) | function getYears (startDate, endDate) {
function getMonths (line 28) | function getMonths (startDate, endDate, year) {
function getDays (line 47) | function getDays (startDate, endDate, year, month) {
FILE: src/components/datetime/util.js
function each (line 3) | function each (obj, fn) {
function trimZero (line 13) | function trimZero (val) {
function generateRange (line 21) | function generateRange (start = 0, end) {
function isToday (line 29) | function isToday (val1, val2) {
function addZero (line 33) | function addZero (val) {
function isLeapYear (line 38) | function isLeapYear (year) {
function getMaxDay (line 42) | function getMaxDay (year, month) {
function parseRow (line 51) | function parseRow (tmpl, value) {
function parseDate (line 56) | function parseDate (format, value) {
function getElement (line 75) | function getElement (expr) {
function toElement (line 79) | function toElement (html) {
function removeElement (line 85) | function removeElement (el) {
FILE: src/components/fullpage/lib.js
constant BOX_CLASS (line 8) | const BOX_CLASS = 'vux-fullpage-box'
constant ANIM_CLASS (line 9) | const ANIM_CLASS = 'vux-fullpage-box-anim'
constant ITEM_CLASS (line 10) | const ITEM_CLASS = 'vux-fullpage-item'
constant DIR_CLASS (line 11) | const DIR_CLASS = 'vux-fullpage-dir'
function touchmove (line 27) | function touchmove (e) {
function fix (line 31) | function fix (cur, pagesLength, loop) {
function move (line 43) | function move (ele, dir, dist) {
function init (line 52) | function init (option) {
function Fullpage (line 92) | function Fullpage (ele, option) {
FILE: src/components/inline-calendar/props.js
method default (line 8) | default () {
method default (line 44) | default () {
method validator (line 50) | validator (val) {
method default (line 80) | default () {
FILE: src/components/inline-calendar/util.js
function zero (line 3) | function zero (n) {
function splitValue (line 7) | function splitValue (value) {
function getPrevTime (line 16) | function getPrevTime (year, month) {
function getNextTime (line 30) | function getNextTime (year, month) {
function getTime (line 44) | function getTime (str) {
function isBetween (line 51) | function isBetween (value, disablePast, disableFuture, rangeBegin, range...
function getRange (line 59) | function getRange (disablePast = false, disableFuture = false, rangeBegi...
function getDays (line 84) | function getDays ({year, month, value, rangeBegin, rangeEnd, returnSixRo...
FILE: src/components/masker/converter.js
function toRGB (line 7) | function toRGB (color) {
function toHex (line 12) | function toHex (red, green, blue) {
FILE: src/components/number-roller/lib.js
method constructor (line 2) | constructor (opts) {
method roll (line 18) | roll (n) {
method setWidth (line 57) | setWidth (n) {
FILE: src/components/orientation/index.js
method bind (line 6) | bind () {
method update (line 22) | update () {
method unbind (line 24) | unbind () {
FILE: src/components/orientation/orientation.js
function merge (line 25) | function merge (s) {
function bind (line 49) | function bind (fn, context) {
function Orientation (line 61) | function Orientation () {
FILE: src/components/picker/animate.js
method stop (line 56) | stop (id) {
method isRunning (line 65) | isRunning (id) {
method start (line 70) | start (stepCallback, verifyCallback, completedCallback, duration, easing...
FILE: src/components/picker/chain.js
method constructor (line 4) | constructor (data, count, fixedColumns) {
method getChildren (line 20) | getChildren (value) {
method getFirstColumn (line 26) | getFirstColumn () {
method getPure (line 32) | getPure (obj) {
method getColumns (line 36) | getColumns (value) {
FILE: src/components/picker/scroller.js
constant TEMPLATE (line 11) | const TEMPLATE = `
method onSelect (line 49) | onSelect () {}
method __setDimensions (line 165) | __setDimensions (clientHeight, contentHeight) {
method selectByIndex (line 178) | selectByIndex (index, animate) {
method select (line 190) | select (value, animate) {
method getValue (line 204) | getValue () {
method scrollTo (line 208) | scrollTo (top, animate) {
method destroy (line 229) | destroy () {
method __selectItem (line 234) | __selectItem (selectedItem) {
method __scrollingComplete (line 251) | __scrollingComplete () {
method __doTouchStart (line 263) | __doTouchStart (ev, timeStamp) {
method __doTouchMove (line 314) | __doTouchMove (ev, timeStamp, scale) {
method __doTouchEnd (line 402) | __doTouchEnd (timeStamp) {
method __publish (line 470) | __publish (top, animationDuration) {
method __startDeceleration (line 520) | __startDeceleration (timeStamp) {
method __stepThroughDeceleration (line 560) | __stepThroughDeceleration (render) {
FILE: src/components/picker/util.js
function getElement (line 1) | function getElement (expr) {
function getComputedStyle (line 5) | function getComputedStyle (el, key) {
function easeOutCubic (line 12) | function easeOutCubic (pos) {
function easeInOutCubic (line 16) | function easeInOutCubic (pos) {
FILE: src/components/range/lib/classes.js
function ClassList (line 37) | function ClassList (el) {
FILE: src/components/range/lib/closest.js
function closest (line 21) | function closest (el, selector, scope) {
FILE: src/components/range/lib/emitter.js
function Emitter (line 14) | function Emitter (obj) {
function mixin (line 26) | function mixin (obj) {
function on (line 60) | function on () {
FILE: src/components/range/lib/events.js
function Events (line 24) | function Events (el, obj) {
function parse (line 169) | function parse (event) {
FILE: src/components/range/lib/matches-selector.js
function match (line 38) | function match (el, selector) {
FILE: src/components/range/lib/mouse.js
function Mouse (line 24) | function Mouse (el, obj) {
function up (line 46) | function up (e) {
function move (line 54) | function move (e) {
FILE: src/components/range/lib/query.js
function one (line 1) | function one (selector, el = document) {
function all (line 4) | function all (selector, el = document) {
FILE: src/components/range/powerange.js
function Horizontal (line 6) | function Horizontal (element, options) {
method callback (line 240) | callback () {}
FILE: src/components/range/utils.js
function getWidth (line 25) | function getWidth (el) {
FILE: src/components/spinner/spinner.js
function createSvgElement (line 36) | function createSvgElement (tagName, data, parent, spinnerName, size) {
function setSvgAttribute (line 61) | function setSvgAttribute (ele, k, v) {
function animationValues (line 65) | function animationValues (strValues, i) {
method fn (line 77) | fn (i, spinnerName) {
method fn (line 120) | fn (i) {
method fn (line 145) | fn (i) {
method fn (line 185) | fn (i) {
method fn (line 221) | fn (i) {
method fn (line 267) | fn (i) {
method android (line 339) | android (ele) {
function easeInOutCubic (line 394) | function easeInOutCubic (t, c) {
function start (line 416) | function start () {
FILE: src/components/sticky/sticky.js
function gtIOS6 (line 4) | function gtIOS6 () {
function isSupportSticky (line 11) | function isSupportSticky () {
FILE: src/components/swiper/swiper.js
class Swiper (line 4) | class Swiper {
method constructor (line 5) | constructor (options) {
method _auto (line 46) | _auto () {
method updateItemWidth (line 56) | updateItemWidth () {
method stop (line 61) | stop () {
method _loop (line 65) | _loop () {
method _onResize (line 69) | _onResize () {
method _init (line 81) | _init () {
method _initPosition (line 93) | _initPosition () {
method _movePosition (line 99) | _movePosition (position) {
method _setOffset (line 110) | _setOffset () {
method _setTransition (line 119) | _setTransition (duration) {
method _setTransform (line 128) | _setTransform (offset) {
method _bind (line 143) | _bind () {
method _loopRender (line 217) | _loopRender () {
method _loopEvent (line 231) | _loopEvent (num) {
method getDistance (line 241) | getDistance (distance) {
method _moveIndex (line 255) | _moveIndex (num) {
method _activate (line 264) | _activate (index) {
method go (line 274) | go (index) {
method next (line 291) | next () {
method move (line 296) | move (num) {
method on (line 301) | on (event, callback) {
method _itemDestoy (line 312) | _itemDestoy () {
method destroy (line 318) | destroy () {
FILE: src/components/uploader/utils.js
function detectVerticalSquash (line 7) | function detectVerticalSquash (img) {
function detectSubsampling (line 44) | function detectSubsampling (img) {
function transformCoordinate (line 66) | function transformCoordinate (canvas, ctx, width, height, orientation) {
function dataURItoBlob (line 122) | function dataURItoBlob (dataURI) {
function handleFile (line 152) | function handleFile (file, options, doSquash) {
function detectImageAutoRotate (line 207) | function detectImageAutoRotate () {
FILE: src/components/v-chart/mixin.js
method created (line 15) | created () {
method render (line 22) | render () {}
FILE: src/components/video/zy.media.js
function _css (line 110) | function _css(el, property) {
function _hasClass (line 115) | function _hasClass(el, token) {
function _addClass (line 120) | function _addClass(el, token) {
function _removeClass (line 129) | function _removeClass(el, token) {
function timeFormat (line 138) | function timeFormat(time, options) {
function isInFullScreenMode (line 162) | function isInFullScreenMode() {
function getTypeFromFileExtension (line 167) | function getTypeFromFileExtension(url) {
function getType (line 195) | function getType(url, type) {
function detectType (line 212) | function detectType(media, options, src) {
function togglePlayPause (line 565) | function togglePlayPause(s) {
FILE: src/directives/inview/index.js
method update (line 3) | update (option) {
method unbind (line 20) | unbind () {}
FILE: src/directives/inview/inview.js
function InView (line 26) | function InView (el, callback, className) {
function throttle (line 56) | function throttle (fn, threshhold, scope) {
function hasClass (line 79) | function hasClass (el, name) {
function addClass (line 83) | function addClass (el, name) {
function removeClass (line 90) | function removeClass (el, name) {
function addEvent (line 101) | function addEvent (el, name, fn) {
function getScrollTop (line 109) | function getScrollTop () {
function isInView (line 120) | function isInView (obj) {
FILE: src/directives/transfer-dom/index.js
function getTarget (line 9) | function getTarget (node) {
function getShouldUpdate (line 27) | function getShouldUpdate (node) {
method inserted (line 44) | inserted (el, { value }, vnode) {
method componentUpdated (line 64) | componentUpdated (el, { value }) {
FILE: src/libs/base.js
method created (line 11) | created () {
method invalid (line 23) | invalid () {
method setTouched (line 28) | setTouched () {
method value (line 33) | value (newVal) {
method data (line 43) | data () {
FILE: src/libs/dom.js
method hasClass (line 2) | hasClass (el, token) {
method addClass (line 5) | addClass (el, token) {
method removeClass (line 15) | removeClass (el, token) {
FILE: src/libs/eventor.js
function Events (line 19) | function Events () {
function copyProto (line 159) | function copyProto (key) {
function triggerEvents (line 168) | function triggerEvents (list, args, context) {
function isFunction (line 191) | function isFunction (func) {
FILE: src/libs/mixin_uuid.js
method mounted (line 2) | mounted () {
method data (line 12) | data () {
function createId (line 19) | function createId () {
FILE: src/libs/router.js
function go (line 1) | function go (url, $router) {
function getUrl (line 15) | function getUrl (url, $router) {
FILE: src/libs/webp-support.js
constant WEBP_NAME (line 1) | const WEBP_NAME = 'can_use_webp'
function detectWebp (line 3) | function detectWebp () {
function isSupported (line 27) | function isSupported (force = false) {
FILE: src/main.js
method updateDemoPosition (line 64) | updateDemoPosition (state, payload) {
method updateLoadingStatus (line 67) | updateLoadingStatus (state, payload) {
method updateDirection (line 70) | updateDirection (state, payload) {
method updateDemoPosition (line 78) | updateDemoPosition ({commit}, top) {
FILE: src/mixins/calendar-marks.js
method isShowBottomDot (line 3) | isShowBottomDot (i) {
method isShowTopTip (line 15) | isShowTopTip (i, returnWhat) {
method getMarkStyle (line 36) | getMarkStyle (i) {
FILE: src/mixins/multi-items.js
method mounted (line 4) | mounted () {
method updateIndex (line 11) | updateIndex () {
method currentIndex (line 27) | currentIndex (val, oldVal) {
method index (line 33) | index (val) {
method value (line 36) | value (val) {
method data (line 40) | data () {
method mounted (line 56) | mounted () {
method beforeDestroy (line 59) | beforeDestroy () {
method onItemClick (line 66) | onItemClick (hasLink) {
method currentSelected (line 84) | currentSelected (val) {
method selected (line 89) | selected (val) {
method data (line 93) | data () {
FILE: src/mixins/prevent-body-scroll.js
constant BODY_CLASS_NAME (line 3) | const BODY_CLASS_NAME = 'vux-modal-open'
constant CONTAINER_CLASS_NAME (line 4) | const CONTAINER_CLASS_NAME = 'vux-modal-open-for-container'
constant VUX_VIEW_BOX_ELEMENT (line 5) | const VUX_VIEW_BOX_ELEMENT = '#vux_view_box_body'
method getLayout (line 10) | getLayout () {
method addModalClassName (line 18) | addModalClassName () {
method removeModalClassName (line 27) | removeModalClassName () {
method beforeDestroy (line 34) | beforeDestroy () {
method deactivated (line 37) | deactivated () {
FILE: src/mixins/safari-fix.js
method mounted (line 2) | mounted () {
method fixSafariOverflowScrolling (line 6) | fixSafariOverflowScrolling (type) {
FILE: src/mixins/uuid.js
method created (line 2) | created () {
FILE: src/plugins/ajax/index.js
method install (line 4) | install (Vue) {
FILE: src/plugins/alert/index.js
method install (line 6) | install (Vue) {
FILE: src/plugins/alert/module.js
method show (line 13) | show (options) {
method hide (line 16) | hide () {
FILE: src/plugins/alert/util.js
function createVM (line 4) | function createVM (Vue) {
function show (line 17) | function show ($vm, options) {
function hide (line 34) | function hide ($vm) {
FILE: src/plugins/app/index.js
method install (line 2) | install (Vue, store) {
FILE: src/plugins/bus/index.js
method install (line 2) | install (Vue) {
FILE: src/plugins/close-dialogs/index.js
method install (line 6) | install (Vue, router) {
FILE: src/plugins/config/index.js
method install (line 2) | install (Vue, config = {}) {
FILE: src/plugins/confirm/index.js
method install (line 7) | install (vue, options = {}) {
FILE: src/plugins/datetime/index.js
method install (line 21) | install (Vue) {
FILE: src/plugins/loading/index.js
method install (line 9) | install (vue, options) {
FILE: src/plugins/loading/module.js
method show (line 13) | show (options) {
method hide (line 16) | hide () {
FILE: src/plugins/loading/util.js
function createVM (line 4) | function createVM (Vue) {
function show (line 17) | function show ($vm, options) {
function hide (line 26) | function hide ($vm) {
FILE: src/plugins/locale/index.js
method install (line 42) | install (Vue, options) {
FILE: src/plugins/toast/index.js
method install (line 9) | install (vue, pluginOptions = {}) {
FILE: src/plugins/wechat/1.3.0.js
function i (line 5) | function i(n, i, t) {
function t (line 11) | function t(n, i, t) {
function o (line 17) | function o(e) {
function r (line 21) | function r(e) {
function a (line 31) | function a(e) {
function c (line 35) | function c(e, n, i) {
function s (line 53) | function s(e, n) {
function d (line 65) | function d(e) {
function u (line 76) | function u(e, n) {
function l (line 83) | function l(e) {
function p (line 97) | function p() {
function f (line 101) | function f(n) {
function m (line 105) | function m() {
function g (line 113) | function g(e) {
FILE: src/plugins/wechat/1.3.2.js
function i (line 5) | function i(n, i, t) {
function t (line 11) | function t(n, i, t) {
function o (line 17) | function o(e) {
function r (line 21) | function r(e) {
function a (line 31) | function a(e) {
function c (line 35) | function c(e, n, i) {
function s (line 53) | function s(e, n) {
function d (line 65) | function d(e) {
function u (line 76) | function u(e, n) {
function l (line 83) | function l(e) {
function p (line 97) | function p() {
function f (line 101) | function f(n) {
function m (line 105) | function m() {
function g (line 113) | function g(e) {
FILE: src/plugins/wechat/index.js
method install (line 4) | install (Vue) {
FILE: src/plugins/wechat/origin.1.3.0.js
function i (line 2) | function i(n,i,t){e.WeixinJSBridge?WeixinJSBridge.invoke(n,o(i),function...
function t (line 2) | function t(n,i,t){e.WeixinJSBridge?WeixinJSBridge.on(n,function(e){t&&t....
function o (line 2) | function o(e){return e=e||{},e.appId=C.appId,e.verifyAppId=C.appId,e.ver...
function r (line 2) | function r(e){return{timeStamp:e.timestamp+"",nonceStr:e.nonceStr,packag...
function a (line 2) | function a(e){return e.postalCode=e.addressPostalCode,delete e.addressPo...
function c (line 2) | function c(e,n,i){"openEnterpriseChat"==e&&(n.errCode=n.err_code),delete...
function s (line 2) | function s(e,n){var i=e,t=v[i];t&&(i=t);var o="ok";if(n){var r=n.indexOf...
function d (line 2) | function d(e){if(e){for(var n=0,i=e.length;n<i;++n){var t=e[n],o=h[t];o&...
function u (line 2) | function u(e,n){if(!(!C.debug||n&&n.isInnerInvoke)){var i=v[e];i&&(e=i),...
function l (line 2) | function l(e){if(!(w||T||C.debug||x<"6.0.2"||A.systemType<0)){var n=new ...
function p (line 2) | function p(){return(new Date).getTime()}
function f (line 2) | function f(n){k&&(e.WeixinJSBridge?"preInject"===I.__wxjsjs__isPreInject...
function m (line 2) | function m(){N.invoke||(N.invoke=function(n,i,t){e.WeixinJSBridge&&Weixi...
function g (line 2) | function g(e){if("string"==typeof e&&e.length>0){var n=e.split("?")[0],i...
FILE: src/plugins/wechat/origin.1.3.2.js
function i (line 2) | function i(n,i,t){e.WeixinJSBridge?WeixinJSBridge.invoke(n,o(i),function...
function t (line 2) | function t(n,i,t){e.WeixinJSBridge?WeixinJSBridge.on(n,function(e){t&&t....
function o (line 2) | function o(e){return e=e||{},e.appId=C.appId,e.verifyAppId=C.appId,e.ver...
function r (line 2) | function r(e){return{timeStamp:e.timestamp+"",nonceStr:e.nonceStr,packag...
function a (line 2) | function a(e){return e.postalCode=e.addressPostalCode,delete e.addressPo...
function c (line 2) | function c(e,n,i){"openEnterpriseChat"==e&&(n.errCode=n.err_code),delete...
function s (line 2) | function s(e,n){var i=e,t=v[i];t&&(i=t);var o="ok";if(n){var r=n.indexOf...
function d (line 2) | function d(e){if(e){for(var n=0,i=e.length;n<i;++n){var t=e[n],o=h[t];o&...
function u (line 2) | function u(e,n){if(!(!C.debug||n&&n.isInnerInvoke)){var i=v[e];i&&(e=i),...
function l (line 2) | function l(e){if(!(w||T||C.debug||x<"6.0.2"||A.systemType<0)){var n=new ...
function p (line 2) | function p(){return(new Date).getTime()}
function f (line 2) | function f(n){k&&(e.WeixinJSBridge?"preInject"===I.__wxjsjs__isPreInject...
function m (line 2) | function m(){N.invoke||(N.invoke=function(n,i,t){e.WeixinJSBridge&&Weixi...
function g (line 2) | function g(e){if("string"==typeof e&&e.length>0){var n=e.split("?")[0],i...
FILE: src/tools/cookie/index.js
function parseCookieString (line 121) | function parseCookieString(text, shouldDecode) {
function isString (line 164) | function isString(o) {
function isNonEmptyString (line 168) | function isNonEmptyString(s) {
function validateCookieName (line 172) | function validateCookieName(name) {
function same (line 178) | function same(s) {
FILE: src/tools/querystring/index.js
function isPlainObject (line 146) | function isPlainObject(o) {
function isPrimitive (line 164) | function isPrimitive(o) {
FILE: src/vuex/store.js
method UPDATE_LOADING (line 13) | UPDATE_LOADING (state, status) {
method UPDATE_DIRECTION (line 16) | UPDATE_DIRECTION (state, direction) {
FILE: ssr/nuxt/nuxt.config.js
method extend (line 26) | extend(config, { isDev, isClient }) {
Condensed preview — 971 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (3,740K chars).
[
{
"path": ".babelrc",
"chars": 200,
"preview": "{\n \"presets\": [\n [\"es2015\", { \"modules\": false }],\n \"stage-2\"\n ],\n \"plugins\": [\"transform-runtime\"],\n \"comment"
},
{
"path": ".editorconfig",
"chars": 147,
"preview": "root = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\nend_of_line = lf\ninsert_final_newline = true\ntrim_"
},
{
"path": ".eslintignore",
"chars": 236,
"preview": "build/*.js\nsrc/assets/*/*.js\nsrc/libs/eventor.js\nconfig/*.js\nsrc/tools/*/*.js\nsrc/components/video/zy.media.js\nsrc/plugi"
},
{
"path": ".eslintrc.js",
"chars": 761,
"preview": "module.exports = {\n root: true,\n parser: 'babel-eslint',\n parserOptions: {\n sourceType: 'module'\n },\n // https:/"
},
{
"path": ".github/FUNDING.yml",
"chars": 19,
"preview": "github: [airyland]\n"
},
{
"path": ".github/ISSUE_TEMPLATE.md",
"chars": 49,
"preview": "<!--\n中文用户请注意：\n提高处理效率，请说明具体需求/代码/重现步骤，不要截图代码。\n-->\n"
},
{
"path": ".github/PULL_REQUEST_TEMPLATE.md",
"chars": 194,
"preview": "Please makes sure the items are checked before submitting your PR, thank you!\n\n* [ ] `Rebase` before creating a PR to ke"
},
{
"path": ".gitignore",
"chars": 576,
"preview": ".DS_Store\nnode_modules/\nbower_components/\nnpm-debug.log\n/demo\nbuild/milestone.json\nexamples/webpack/\n.idea\ndist/componen"
},
{
"path": ".npmignore",
"chars": 224,
"preview": "build/\ndemo/\ndist/\ndocs/\nnode_modules/\npackages/\nexamples/\ntest/\n/src/*.vue\n/src/*.js\n/src/*.html\n/src/assets/\n/src/demo"
},
{
"path": ".travis.yml",
"chars": 248,
"preview": "language: node_js\nnode_js:\n- 7\nos: linux\ncache:\n yarn: true\nbranches:\n only:\n - v2\ninstall:\n- |\n yarn install\nscri"
},
{
"path": "LICENSE",
"chars": 1073,
"preview": "MIT License\n\nCopyright (c) 2016-present, Airyland\n\nPermission is hereby granted, free of charge, to any person obtaining"
},
{
"path": "README.md",
"chars": 3870,
"preview": "<p align=\"center\">\n <a href=\"http://vux.li\">\n <img src=\"https://i.loli.net/2017/11/20/5a12187ebf2e0.png\" width=\"175\""
},
{
"path": "build/build-components.js",
"chars": 6879,
"preview": "'use strict'\nprocess.env.NODE_ENV = 'production'\n\n/**\n * --locale='zh-CN'\n * --namespace='vux'\n * --components=Group,Cel"
},
{
"path": "build/build-docs.js",
"chars": 21856,
"preview": "'use strict'\nconst glob = require(\"glob\")\nconst fs = require('fs')\nconst yaml = require('js-yaml')\nconst path = require("
},
{
"path": "build/build-main.js",
"chars": 648,
"preview": "'use strict'\n\nconst fs = require('fs')\nconst path = require('path')\n\nconst maps = require(path.resolve(__dirname, '../sr"
},
{
"path": "build/build-styles.js",
"chars": 1414,
"preview": "const postcss = require('postcss')\nconst syntax = require('postcss-less')\nconst path = require('path')\nconst fs = requir"
},
{
"path": "build/build.js",
"chars": 1096,
"preview": "// https://github.com/shelljs/shelljs\nrequire('./check-versions')()\n\nprocess.env.NODE_ENV = 'production'\n\nvar ora = requ"
},
{
"path": "build/check-versions.js",
"chars": 1172,
"preview": "var chalk = require('chalk')\nvar semver = require('semver')\nvar packageConfig = require('../package.json')\n\nfunction exe"
},
{
"path": "build/dev-doc.js",
"chars": 291,
"preview": "const watch = require('node-watch')\nconst path = require('path')\nconst dir = path.resolve(__dirname, '../src/components'"
},
{
"path": "build/document.js",
"chars": 576,
"preview": "'use strict'\n\nconst glob = require(\"glob\")\nconst path = require('path')\nconst yaml = require('js-yaml')\nconst fs = requi"
},
{
"path": "build/fetch-github.js",
"chars": 398,
"preview": "'use strict'\n\nconst fetch = require('node-fetch')\nconst path = require('path')\nconst fs = require('fs')\nconst relesesPat"
},
{
"path": "build/less.js",
"chars": 298,
"preview": "const less = require('less')\nconst path = require('path')\nconst fs = require('fs')\nconst file = path.resolve(__dirname, "
},
{
"path": "build/pre-publish.js",
"chars": 1058,
"preview": "const glob = require('glob')\nconst path = require('path')\nconst fs = require('fs')\nfunction getPath(dir) {\n return path"
},
{
"path": "build/simulate.sh",
"chars": 149,
"preview": "mkdir node_modules/vux\nmkdir node_modules/vux/src\nrm node_modules/vux/package.json\ncp package.json node_modules/vux/\ncp "
},
{
"path": "build/umd-helper.js",
"chars": 956,
"preview": "'use strict'\n\nconst webpack = require('webpack')\nconst mkdirp = require('mkdirp')\nconst fs = require('fs')\nconst touch ="
},
{
"path": "build/utils.js",
"chars": 2580,
"preview": "'use strict'\nconst path = require('path')\nconst config = require('../config')\nconst ExtractTextPlugin = require('extract"
},
{
"path": "build/vue-loader.conf.js",
"chars": 409,
"preview": "var utils = require('./utils')\nvar config = require('../config')\nvar isProduction = process.env.NODE_ENV === 'production"
},
{
"path": "build/vux-config.js",
"chars": 5024,
"preview": "'use strict'\n\nconst path = require('path')\nconst fs = require('fs')\nconst demoPath = path.resolve(__dirname, '../src/dem"
},
{
"path": "build/webpack.base.conf.js",
"chars": 2142,
"preview": "var path = require('path')\nvar config = require('../config')\nvar utils = require('./utils')\nvar projectRoot = path.resol"
},
{
"path": "build/webpack.dev.conf.js",
"chars": 2463,
"preview": "'use strict'\nconst utils = require('./utils')\nconst webpack = require('webpack')\nconst config = require('../config')\ncon"
},
{
"path": "build/webpack.prod.conf.js",
"chars": 3425,
"preview": "var path = require('path')\nvar config = require('../config')\nvar utils = require('./utils')\nvar webpack = require('webpa"
},
{
"path": "build/webpack.test.conf.js",
"chars": 1094,
"preview": "// This is the webpack config used for unit tests.\n\nvar utils = require('./utils')\nvar webpack = require('webpack')\nvar "
},
{
"path": "circle.yml",
"chars": 35,
"preview": "machine:\n node:\n version: 5.3.0"
},
{
"path": "config/dev.env.js",
"chars": 139,
"preview": "var merge = require('webpack-merge')\nvar prodEnv = require('./prod.env')\n\nmodule.exports = merge(prodEnv, {\n NODE_ENV: "
},
{
"path": "config/index.js",
"chars": 2615,
"preview": "'use strict'\n// Template version: 1.2.3\n// see http://vuejs-templates.github.io/webpack for documentation.\n\nconst path ="
},
{
"path": "config/prod.env.js",
"chars": 48,
"preview": "module.exports = {\n NODE_ENV: '\"production\"'\n}\n"
},
{
"path": "config/test.env.js",
"chars": 132,
"preview": "var merge = require('webpack-merge')\nvar devEnv = require('./dev.env')\n\nmodule.exports = merge(devEnv, {\n NODE_ENV: '\"t"
},
{
"path": "docs/404.md",
"chars": 28,
"preview": "\nPage is being translated..."
},
{
"path": "docs/about/version.md",
"chars": 184,
"preview": "## 版本发布\r\n\r\n<p class=\"tip\">\r\n`0.x` 版本文档不完整，并且已经不再维护。请更新或者直接使用`2.x`。\r\n</p>\r\n\r\n当前开发分支为 [v2](https://github.com/airyland/vux"
},
{
"path": "docs/compile.js",
"chars": 38747,
"preview": "'use strict'\r\n\r\nconst glob = require('glob')\r\nconst path = require('path')\r\nconst fs = require('fs')\r\nconst yaml = requi"
},
{
"path": "docs/component-contributors.js",
"chars": 1384,
"preview": "const shell = require('shelljs')\nconst path = require('path')\nshell.cd(path.join(__dirname + '../../'))\nconst glob = req"
},
{
"path": "docs/en/.gitkeep",
"chars": 0,
"preview": ""
},
{
"path": "docs/en/README.md",
"chars": 2850,
"preview": "---\ntitle: 关于 VUX\n---\n\n<p align=\"center\">\n <br>\n <a href=\"https://vux.li/demos/v2?x-page=v2-doc-home\">\n <img src=\""
},
{
"path": "docs/en/about/before-using-vux.md",
"chars": 1016,
"preview": "---\ntitle: 开始使用 VUX 之前\n---\n\n# 开始使用 VUX 之前\n\n::: warning\n如果你刚从后端转到前端，可能会被目前前端(表面的)工程复杂度惊吓到，但是放心，使用 `vue-cli` 从模板创建项目可以快速开始"
},
{
"path": "docs/en/about/contributors.vue",
"chars": 1032,
"preview": "<template>\n <div>\n <h1>贡献者列表<span class=\"count\"> (目前有 <code>{{ contributors.length }}</code> 个有为青年贡献了代码)</span></h1>\n "
},
{
"path": "docs/en/about/showcase.md",
"chars": 1458,
"preview": "---\ntitle: VUX 使用案例\n---\n\n# 使用案例\n\n> 如果你的产品在使用`VUX`, 请直接发 PR 修改 `docs/zh-CN/about/showcase.md`（置于列表最后，统一格式：二维码必须无白边框）。\n\n<i"
},
{
"path": "docs/en/about/thanks.md",
"chars": 653,
"preview": "---\ntitle: 感谢\n---\n\n# Thanks\n\n\n## VUX 参考或者使用了以下开源项目的代码\n\n+ [Vue](https://github.com/vuejs/vue)\n+ [WeUI](https://github.com"
},
{
"path": "docs/en/contribution/donate.md",
"chars": 140,
"preview": "---\ntitle: 捐赠支持 VUX\n---\n\n\n## 捐赠\n\n* [Patreon](https://www.patreon.com/airyland)\n* [PayPal](https://paypal.me/airyland)\n* "
},
{
"path": "docs/en/contribution/issue.md",
"chars": 285,
"preview": "---\ntitle: 如何提 issue\n---\n\n# 如何提 issue\n\n::: tip\n使用本项目意味着你也有义务帮助其变得更好。\n:::\n\n不要浪费维护者时间。\n\n不要让维护者帮你学习`Vue`，帮你熟悉`vue-loader`，甚"
},
{
"path": "docs/en/contribution/pr.md",
"chars": 640,
"preview": "---\ntitle: 如何贡献\n---\n\n# 如何贡献\n\n## 文档更新\n\n如果修改了组件代码，需要在组件目录的`metas.yml`加上changes，直接使用`next`作为版本号(如果已经存在该版本号，则直接添加变更条目即可)。\n\n中"
},
{
"path": "docs/en/contribution/vux-development.md",
"chars": 558,
"preview": "---\ntitle: VUX 源码本地运行\n---\n\n# VUX 源码本地运行\n\n::: tip\n请更新 `NodeJS` 版本到 `v7.6.0` 以上，`build` 命令逐步使用 `async`。\n:::\n\n``` bash\nyarn"
},
{
"path": "docs/en/css/1px.md",
"chars": 399,
"preview": "---\ntitle: 1px 解决方案\n---\n\n# 1px 解决方案\n\n::: tip\n1px 方案在 VUX 组件内应用广泛，包括 `Grid`, `ButtonTab`, `XTable`, `XButton`, `Cell` 等等。"
},
{
"path": "docs/en/css/close.md",
"chars": 414,
"preview": "---\ntitle: 纯 css close 图标\n---\n\n# 纯 css close 图标\n\n::: tip\n关闭图标主要应用于弹窗(dialog)关闭按钮以及弹窗(popup)头部的关闭按钮。\n:::\n\n## 使用\n\n在你项目的`Ap"
},
{
"path": "docs/en/css.md",
"chars": 719,
"preview": "---\nnav: zh-CN\n---\n\n## 1px\n\n::: tip\n1px 方案在 VUX 组件内应用广泛，包括 Grid, ButtonTab, XTable, XButton, Cell 等等。\n<br>\n<br>\n利用 flexb"
},
{
"path": "docs/en/development/i18n.md",
"chars": 265,
"preview": "---\ntitle: 国际化 i18n\n---\n\n# 国际化\n\n::: warning\n暂时只支持配合`vux-loader`使用。\n\n如果你只需要默认的中文组件，那么你可以略过下面说明，只要启用`vux-ui`插件即可。\n:::\n\n默认不"
},
{
"path": "docs/en/development/remove-click-delay-fastclick.md",
"chars": 252,
"preview": "---\ntitle: Vue 应用移除移动端页面点击延迟\n---\n\n# 移除移动端页面点击延迟\n\n::: tip\n直接使用 `WeUI` 样式并引入 `fastclick` 会导致一些点击问题，VUX 组件内部已经做了相关处理。\n:::\n\n"
},
{
"path": "docs/en/development/router.md",
"chars": 349,
"preview": "---\ntitle: vue-router 路由\n---\n\n# 路由\n\n推荐直接使用官方 [vue-router](https://github.com/vuejs/vue-router)，`VUX`部分组件支持`link`属性直接支持`v"
},
{
"path": "docs/en/development/theme.md",
"chars": 655,
"preview": "---\ntitle: 主题颜色配置\n---\n\n# 主题颜色配置\n\n## 配置插件\n\n::: warning\n暂时只支持配合`vux-loader`使用。\n\n注意的是主题文件不能引入其他less文件，只能为简单变量列表。\n:::\n\n请配置vu"
},
{
"path": "docs/en/development/typescript.md",
"chars": 54,
"preview": "---\ntitle: TypeScript 支持\n---\n\n# TypeScript 支持\n\n> 即将支持\n"
},
{
"path": "docs/en/development/vue-ajax.md",
"chars": 743,
"preview": "---\ntitle: Vue 中使用 ajax\n---\n\n# 发送 ajax 请求\n\n\n:::tip\n`AjaxPlugin` 插件依赖于 [axios](https://github.com/mzabriskie/axios)\n详细 AP"
},
{
"path": "docs/en/development/vue-global-method.md",
"chars": 430,
"preview": "---\ntitle: Vue 全局公用函数\n---\n\n# vue 全局公用函数\n\n如果你需要让一个工具函数在每个组件可用，可以把方法挂载到 `Vue.prototype`上。\n\n## 注册\n\n`main.js` 中\n\n``` js\nVue."
},
{
"path": "docs/en/development/vue-google-analytics.md",
"chars": 752,
"preview": "---\ntitle: Vue 中使用谷歌统计\n---\n\n# 使用谷歌统计\n\n单页面应用切换时要手动发送页面统计，首先在 `index.html` 或者 `main.js` 里引入谷歌统计代码：\n\n``` js\n(function(i,s,"
},
{
"path": "docs/en/development/vue-loader-autoprefix.md",
"chars": 565,
"preview": "---\ntitle: vue-loader autoprefix 推荐配置\n---\n\n# autoprefix 推荐配置\n\n`vue`官方模板的设置是`last 2 versions`，可能会导致你在某些`Android`机子上出现问题。\n"
},
{
"path": "docs/en/development/vue-loader-disable-eslint.md",
"chars": 622,
"preview": "---\ntitle: vue-loader 禁用 eslint\n---\n\n# 禁用 eslint\n\n并不推荐禁用`eslint`, 编码规范可以一定程序上保证代码质量。但是如果你确实想禁用，可以删除`build/webpack.base.c"
},
{
"path": "docs/en/development/vue-router-page-transition.md",
"chars": 103,
"preview": "---\ntitle: 页面切换转场动画\n---\n\n# 页面切换转场动画\n\n你可以注意到 demo 站点的切换动画，本质上是使用 `Vue` 的 `transition` 组件实现的。\n\n- [ ] todo"
},
{
"path": "docs/en/development/vue-show-loading.md",
"chars": 1099,
"preview": "---\ntitle: 页面切换时显示loading\n---\n\n# 页面切换显示loading\n\n移动端如果使用异步组件加载那么还是需要一点等待时间的，在网络慢时等待时间会更长。显示`Loading`状态缓解一下用户等待情绪就十分重要。\n\n如"
},
{
"path": "docs/en/development/vue-webpack-code-splitting-async.md",
"chars": 633,
"preview": "---\ntitle: Vue 异步加载组件\n---\n\n# 异步加载组件\n\n将所有页面组件一次性加载是一个很浪费资源和考验用户耐心的做法，尤其在移动端。\n\n## 使用方法\n\n`webpack` 提供了[code splitting](http"
},
{
"path": "docs/en/development/vue-webpack-env.md",
"chars": 414,
"preview": "---\ntitle: Vue + webpack 区分测试环境和生产环境\n---\n\n# 区分测试环境和生产环境\n\n如果你使用了 `vux2` 模板或者 `webpack` 模板，默认你可以直接通过判断 `process.env.NODE_E"
},
{
"path": "docs/en/development/vux-nuxt-ssr.md",
"chars": 131,
"preview": "---\ntitle: vux 使用 nuxt 实现服务端渲染\n---\n\n# vux 使用 nuxt 实现服务端渲染\n\n请直接参考源码目录 [/ssr/nuxt](https://github.com/airyland/vux/tree/v2"
},
{
"path": "docs/en/directives/v-transfer-dom.md",
"chars": 613,
"preview": "---\ntitle: v-transfer-dom 指令\n---\n\n# v-transfer-dom 指令\n\n在移动端应用里，为了便于代码组织，通常我们要将组件放在各个路由的 `.vue` 文件里，但是因为此时组件并不在 `body` 下，"
},
{
"path": "docs/en/faq/$t-is-not-defined.md",
"chars": 302,
"preview": "---\ntitle: $t is not defined\n---\n\n# $t is not defined\n\n一般是两个原因：\n\n## cnpm 导致的问题\n\n如果是直接使用模板后并且使用 `cnpm` 报错，请升级到 `vux-loade"
},
{
"path": "docs/en/faq/Uncaught-SyntaxError-Unexpected-token-export.md",
"chars": 257,
"preview": "---\ntitle: Uncaught SyntaxError: Unexpected token export\n---\n\n# Uncaught SyntaxError: Unexpected token export\n\n原因是Vux的js"
},
{
"path": "docs/en/faq/can-vux-used-in-weapp.md",
"chars": 254,
"preview": "---\ntitle: VUX 能否在微信小程序里使用\n---\n\n# VUX 能否在微信小程序里使用\n\nSorry，不能。微信小程序是个相对封闭的平台，无法简单地适配也没有计划支持小程序版本。\n\n目前企业主体用户可以使用 `web-view`"
},
{
"path": "docs/en/faq/cannot-resolve-inline-desc.md",
"chars": 174,
"preview": "---\ntitle: Can't resolve '../inline-desc' in\n--- \n\n# Can't resolve '../inline-desc' in\n\nwebpack resolve 配置\n\n``` js\nresol"
},
{
"path": "docs/en/faq/difference-between-vux-template-and-webpack-template.md",
"chars": 153,
"preview": "---\ntitle: vux2 和 Vue 官方 webpack 模板区别是什么？\n---\n\n# vux2 和 Vue 官方 webpack 模板区别是什么？\n\n`vux2` 模板 fork 自 `webpack` 模板并进行了配置，和 `"
},
{
"path": "docs/en/faq/document-framework.md",
"chars": 359,
"preview": "---\ntitle: 文档是用什么工具编写的？\n---\n\n# 文档是用什么工具编写的？\n\n早期版本使用的是 [Docute](https://docute.js.org) by [egoist](https://github.com/ego"
},
{
"path": "docs/en/faq/does-vux-support-weex.md",
"chars": 94,
"preview": "---\ntitle: Does VUX support weex\n---\n\n# Does VUX support weex\n\nNo, and not plan to support it."
},
{
"path": "docs/en/faq/dupicate-style.md",
"chars": 406,
"preview": "---\ntitle: 样式冗余\n---\n\n# 样式冗余\n\n## 调试时\n\n调试时如果你审查元素样式发现有多个重复样式是正常的，因为不同组件可能引用了同样的less源码，而调试时是直接把不同组件样式用`<style>`标签插入页面。\n\n## "
},
{
"path": "docs/en/faq/is-vux-wechat-official-project.md",
"chars": 76,
"preview": "---\ntitle: VUX 是否为微信团队项目\n---\n\n# VUX 是否为微信团队项目\n\n否。但是依赖的WeUI是微信团队的开源项目，感谢微信团队。"
},
{
"path": "docs/en/faq/vux-build-issue.md",
"chars": 535,
"preview": "---\ntitle: VUX 打包体积过大\n---\n\n# VUX 打包体积过大\n\n一般是以下原因导致的：\n\n## import 语法使用问题\n\n在 `vux-loader@1.0.61` 以下版本，如果你在 `import` 和 `{` 之"
},
{
"path": "docs/en/faq/vux-server-render-support.md",
"chars": 183,
"preview": "---\ntitle: VUX 服务端渲染\n---\n\n# VUX 服务端渲染\n\n目前支持 `NUXT` 渲染，可以参考例子：[https://github.com/nuxt/nuxt.js/tree/dev/examples/with-vux"
},
{
"path": "docs/en/faq/what-is-vux-virtual-component.md",
"chars": 291,
"preview": "---\ntitle: 什么是虚拟组件(virtual component)\n---\n\n# 什么是虚拟组件(virtual component)\n\n## 概念\n\n`虚拟组件` 是 `VUX` 组件特有的概念。它指的是一个组件不需要 `impo"
},
{
"path": "docs/en/faq/why-cannot-i-import-all-components.md",
"chars": 374,
"preview": "---\ntitle: 为什么不能引入全部组件？\n---\n\n# 为什么不能引入全部组件\n\n移动端引入全部组件会导致体积过大，加载速度慢，浪费用户等待时间并且浪费(cdn)带宽。\n\n另一方面随着组件库迭代，组件数量增加，这个体积会逐渐变得不可接"
},
{
"path": "docs/en/faq/why-cannot-i-use-vux-with-cdn.md",
"chars": 211,
"preview": "---\ntitle: 为什么不能直接引用 cdn 链接\n---\n\n# 为什么不能直接引用 cdn 链接\n\n原因见 <router-link to=\"/zh-CN/faq/why-use-vue-file-for-distribution.h"
},
{
"path": "docs/en/faq/why-close-my-issue.md",
"chars": 164,
"preview": "---\ntitle: 为什么作者直接关闭了我提的 issue\n---\n\n# 为什么作者直接关闭了我提的 issue\n\n任何不认真提问题，浪费维护者时间的只有这样处理。\n\n维护者其实没有义务做外包一样回答问题，况且部分问题实在是过于马虎，看了"
},
{
"path": "docs/en/faq/why-delete-my-issue-comment.md",
"chars": 317,
"preview": "---\ntitle: 为什么作者直接删除了我在 issue 下的评论\n---\n\n# 为什么作者直接删除了我在 issue 下的评论\n\n\n::: warning\n被删除评论一般是因为：你在 issue 下写了一条和当前 issue 没有关系的"
},
{
"path": "docs/en/faq/why-use-vue-file-for-distribution.md",
"chars": 259,
"preview": "---\ntitle: 为什么使用 .vue 源码分发而不是 js 文件\n---\n\n\n# 为什么使用 .vue 源码分发而不是 js 文件\n\n代码冗余，无法在构建时优化，出错时难以跟踪，作为组件维护者可能要打包多份代码出来满足不同需求(压缩版"
},
{
"path": "docs/en/faq/why-use-x-prefix-for-components.md",
"chars": 138,
"preview": "---\ntitle: 为什么部分组件要加`x-`前缀\n---\n\n# 为什么部分组件要加`x-`前缀\n\n若不更名，可能在开发时与标准 html 标签相同而导致冲突或者 bug，比如 `Dialog`, `Switch` 等。从Vue@2.x开"
},
{
"path": "docs/en/faq/why-using-vux-loader.md",
"chars": 161,
"preview": "---\ntitle: 为什么一定要使用 vux-loader\n---\n\n在部分用户看来这是一个使用门槛，实际上它本意是为了让用户更方便地开发。\n\n它是为了实现按需引用组件及定义 less 变量以及编译时优化代码而开发的，并不会造在配置上的麻"
},
{
"path": "docs/en/faq/will-vux-stop-maintaining.md",
"chars": 188,
"preview": "---\ntitle: 担心停止维护\n---\n\n# 担心停止维护\n\n一个项目会停止维护主要原因是社区不活跃，用户量不够多，而且没有人愿意贡献。\n\nVUX 和 Vue 一样正在发展中，越多越多的开发者在使用，在可预见的时间内不会突然停止维护。\n"
},
{
"path": "docs/en/install/biolerplate.md",
"chars": 773,
"preview": "---\ntitle: VUX 入门教程\n---\n\n# 快速入门\n\n::: warning\nvux@2.x 推荐`webpack+vue-loader`方式的开发，如果要使用`umd`文件，请参照<router-link to=\"/zh-CN"
},
{
"path": "docs/en/install/manual-usage.md",
"chars": 1902,
"preview": "---\ntitle: VUX 手动配置使用\n---\n\n# 手动配置使用\n\n[https://github.com/airyland/vux/tree/v2/packages/vue-cli-3-example](https://github"
},
{
"path": "docs/en/install/npm.md",
"chars": 951,
"preview": "---\ntitle: VUX 安装使用\n---\n\n# 安装使用(webpack)\n\n::: warning\n如果你从没使用过 `VUX`，请参考 <router-link to=\"/zh-CN/install/biolerplate.htm"
},
{
"path": "docs/en/install/umd.md",
"chars": 2728,
"preview": "---\ntitle: umd 组件构建及使用\n---\n\n# umd 组件构建及使用\n\n ::: tip\n 从`2.0`开始，推荐使用`webpack`来调用组件，因此不再在`repo`中保存`umd`文件，但提供了生成命令。\n\n 请更"
},
{
"path": "docs/en/install/upgrade-to-vux2.md",
"chars": 3684,
"preview": "---\ntitle: 升级到 vux@2.x\n---\n\n# 升级到 vux@2.x\n\n### Vue@2.x 主要变更\n\n参考[Vue官方文档](https://cn.vuejs.org/v2/guide/migration.html)进行"
},
{
"path": "docs/en/install/usage.md",
"chars": 429,
"preview": "---\ntitle: VUX 调用例子\n---\n\n# 调用示例\n\n## .vue文件中调用组件\n\n``` html\n<template>\n <div>\n <group>\n <cell title=\"title\" value"
},
{
"path": "docs/en/lab/index.md",
"chars": 87,
"preview": "---\ntitle: 实验室\n---\n\n# 实验室\n\n> beta 测试组件将出现在这里。\n\n- [VChart](/en/components/v-chart.html)\n"
},
{
"path": "docs/en/production/inline-manifest.md",
"chars": 434,
"preview": "---\ntitle: Vue 打包优化：使用 inline manifest\n---\n\n# inline manifest\n\n::: tip\n`manifest` 文件为路径配置和异步组件名字列表，该做法可以减少一个`http`请求。\n\n确"
},
{
"path": "docs/en/tools/base64.md",
"chars": 116,
"preview": "---\ntitle: base64\n---\n\n# base64\n\n``` js\nimport { base64 } from 'vux'\n\nbase64.encode('VUX')\nbase64.decode('VlVY')\n```"
},
{
"path": "docs/en/tools/cookie.md",
"chars": 971,
"preview": "---\ntitle: cookie\n---\n\n# cookie\n\n``` js\nimport { cookie } from 'vux'\n```\n\n`get *cookie.get(name, [options])*`\n\n获取 cookie"
},
{
"path": "docs/en/tools/date.md",
"chars": 326,
"preview": "---\ntitle: vue date format\n---\n\n# date format\n\nBuilt-in dateFormat is much smaller size than `moment`。\n\n\n## Usage\n\n``` j"
},
{
"path": "docs/en/tools/debounce-throttle.md",
"chars": 371,
"preview": "---\ntitle: debounce\n---\n\n## debounce\n\n::: warning\n请注意了解 `debounce` 和 `throttle` 的区别。如果尚不清楚，请`google`之。\n:::\n\n``` js\nimpor"
},
{
"path": "docs/en/tools/md5.md",
"chars": 196,
"preview": "---\ntitle: md5\n---\n\n# md5\n\n::: tip\n该工具直接依赖于 [blueimp-md5](https://github.com/blueimp/JavaScript-MD5)\n\n注意: `md5`是消息摘要算法并非"
},
{
"path": "docs/en/tools/number.md",
"chars": 405,
"preview": "---\ntitle: vue number format\n---\n\n# number format\n\n`numberComma`用于分割数字，默认为3位分割，一般用于格式化`金额`。\n\n`numberPad`用于按照位数补0\n\n`numbe"
},
{
"path": "docs/en/tools/querystring.md",
"chars": 233,
"preview": "---\ntitle: Vue querystring url\n---\n\n# url querystring\n\n```js\nimport { querystring } from 'vux'\n\nquerystring.parse('a=b&c"
},
{
"path": "docs/en/tools/string.md",
"chars": 109,
"preview": "---\ntitle: Vue trim string\n---\n\n# trim string\n\n``` js\nimport { trim } from 'vux'\n\ntrim(' 1024 ') // 1024\n```\n"
},
{
"path": "docs/en/umd.md",
"chars": 2860,
"preview": "---\r\nnav: zh-CN\r\n---\r\n\r\n## 组件 umd 文件\r\n\r\n <p class=\"tip\">\r\n 从`2.0`开始，推荐使用`webpack`来调用组件，因此不再在`repo`中保存`umd`文件，但提供了生成命令。"
},
{
"path": "docs/en/upgrade-to-2.md",
"chars": 3658,
"preview": "---\nnav: zh-CN\n---\n\n### Vue@2.x 主要变更\n\n参考[Vue官方文档](https://cn.vuejs.org/v2/guide/migration.html)进行迁移, 这也是Vux组件的代码更新部分，主要包"
},
{
"path": "docs/en/vux-loader/about.md",
"chars": 1150,
"preview": "---\ntitle: vux-loader 介绍\n---\n\n\n# vux-loader 介绍\n\n<p align=\"left\">\n <a href=\"https://www.npmjs.com/package/vux-loader\">\n "
},
{
"path": "docs/en/vux-loader/how-vux-loader-works.md",
"chars": 1936,
"preview": "---\ntitle: vux-loader 实现方式\n---\n\n# vux-loader 实现方式\n\n说明一下`vux-loader`是如何和`vue-loader`<del>搞基</del>配合的。\n\n如果你看过`webpack`load"
},
{
"path": "docs/en/vux-loader/install.md",
"chars": 791,
"preview": "---\ntitle: vux-loader 使用\n---\n\n# vux-loader 使用\n\n## 安装\n\n``` bash\nnpm install vux-loader --save-dev\n```\n\n## 使用\n\n为了降低使用成本及不侵"
},
{
"path": "docs/en/vux-loader/plugins.md",
"chars": 3695,
"preview": "---\ntitle: vux-loader 插件列表\n---\n\n# vux-loader 插件列表\n\n\n## script-parser\n\n> .vue 文件的 script 部分代码处理\n\n``` js\n[{\n name: 'script"
},
{
"path": "docs/en/vux-loader.md",
"chars": 9724,
"preview": "---\nnav: zh-CN\n---\n\n<h2 class=\"big-title\">vux!vue</h2>\n\n<p align=\"left\">\n <a href=\"https://www.npmjs.com/package/vux-lo"
},
{
"path": "docs/en/wechat/other.md",
"chars": 139,
"preview": "---\ntitle: 其他问题\n---\n\n## 如何实现`weui.io`或者星巴克页面的设置顶部bar和页面下拉背景色\n\n微信对于部分合作方开放了`jssdk`的`setBounceBackground`及`setNavigationBa"
},
{
"path": "docs/en/wechat/vue-wechat-jssdk.md",
"chars": 860,
"preview": "---\ntitle: Vue 应用中使用微信 jssdk\n---\n\n# Vue 应用中使用微信 jssdk\n\n::: warning\n分享接口只有认证公众号才能使用，域名必须备案且在微信后台设置。\n\n先确认已经满足使用`jssdk`的要求再"
},
{
"path": "docs/en/wechat/wechat-document-title.md",
"chars": 221,
"preview": "---\ntitle: 微信 Vue 单页面应用设置标题\n---\n\n# 微信 Vue 单页面应用设置标题\n\n在微信`iOS` `webview`更新到`WKWebView`之前我们可以通过加载一个 `iframe` 来实现单页面应用`titl"
},
{
"path": "docs/examples/loading.html",
"chars": 683,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width,ini"
},
{
"path": "docs/examples/umd_component_include_all.html",
"chars": 729,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width,ini"
},
{
"path": "docs/examples/umd_component_include_single.html",
"chars": 870,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width,ini"
},
{
"path": "docs/examples/umd_plugin_include_all.html",
"chars": 693,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width,ini"
},
{
"path": "docs/examples/umd_plugin_include_single.html",
"chars": 673,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width,ini"
},
{
"path": "docs/i18n.js",
"chars": 3478,
"preview": "const list = {\n Intro: {\n 'zh-CN': '介绍'\n },\n Install: {\n 'zh-CN': '安装'\n },\n Examples: {\n 'zh-CN': '栗子' // "
},
{
"path": "docs/index.html",
"chars": 8721,
"preview": "<html lang=\"en\">\n <!-- websites based on https://vuepress.vuejs.org/ Thanks to Evan You-->\n <head>\n <meta charset=\""
},
{
"path": "docs/package.json",
"chars": 942,
"preview": "{\n \"scripts\": {\n \"gen\": \"ream generate\",\n \"start\": \"ream start\",\n \"build\": \"ream build\",\n \"dev\": \"ream dev\""
},
{
"path": "docs/ream.config.js",
"chars": 1375,
"preview": "var hljs = require('highlight.js');\nvar taskLists = require('markdown-it-task-lists');\nvar customContainer = require('ma"
},
{
"path": "docs/server.js",
"chars": 368,
"preview": "const options = require('./ream.config.js')\nconst ream = require('ream')\nconst app = ream(options)\nconst http = require("
},
{
"path": "docs/src/App.vue",
"chars": 14638,
"preview": "<template>\r\n <div id=\"app\" class=\"app\">\r\n <div class=\"vux-box\">\r\n <div class=\"sidebar-inner\">\r\n <svg ver"
},
{
"path": "docs/src/algolia-search.vue",
"chars": 6037,
"preview": "<template>\n <el-autocomplete\n v-model=\"query\"\n size=\"small\"\n :popper-class=\"`algolia-search${ isEmpty ? ' is-e"
},
{
"path": "docs/src/app.css",
"chars": 15239,
"preview": "@import '~highlight.js/styles/atom-one-light.css';\n\nbody, ul, li, p {\n margin: 0;\n padding: 0;\n}\n\nbody {\n height: 100"
},
{
"path": "docs/src/component.vue",
"chars": 318,
"preview": "<template>\n <div>\n {{data}}\n {{metas}}\n </div>\n</template>\n\n<script>\nimport { mapState } from 'vuex'\n\nexport def"
},
{
"path": "docs/src/index.js",
"chars": 2594,
"preview": "import Vue from 'vue'\nimport Router from 'vue-router'\nimport App from './App.vue'\nimport Vuex from 'vuex'\nimport axios f"
},
{
"path": "docs/src/summary.js",
"chars": 2587,
"preview": "module.exports = [{\n title: '入坑指南',\n pages: [{\n title: '关于 VUX',\n path: '/zh-CN/'\n }, {\n title: '使用 VUX 之前',"
},
{
"path": "docs/src/tool-routes-en.json",
"chars": 582,
"preview": "[\n {\n \"title\": \"base64\",\n \"path\": \"/en/tools/base64.html\"\n },\n {\n \"title\": \"cookie\",\n \"path\": \"/en/tools/"
},
{
"path": "docs/src/tool-routes-zh-CN.json",
"chars": 598,
"preview": "[\n {\n \"title\": \"base64\",\n \"path\": \"/zh-CN/tools/base64.html\"\n },\n {\n \"title\": \"cookie\",\n \"path\": \"/zh-CN/"
},
{
"path": "docs/watch.js",
"chars": 608,
"preview": "const watch = require('node-watch')\nconst path = require('path')\nconst dir = path.resolve(__dirname, '../src/')\n\ndelete "
},
{
"path": "docs/zh-CN/README.md",
"chars": 3549,
"preview": "---\ntitle: 关于 VUX\n---\n\n<p align=\"center\">\n <br>\n <a href=\"https://vux.li/demos/v2?x-page=v2-doc-home\">\n <img src=\""
},
{
"path": "docs/zh-CN/about/before-using-vux.md",
"chars": 1016,
"preview": "---\ntitle: 开始使用 VUX 之前\n---\n\n# 开始使用 VUX 之前\n\n::: warning\n如果你刚从后端转到前端，可能会被目前前端(表面的)工程复杂度惊吓到，但是放心，使用 `vue-cli` 从模板创建项目可以快速开始"
},
{
"path": "docs/zh-CN/about/contributors.vue",
"chars": 1032,
"preview": "<template>\n <div>\n <h1>贡献者列表<span class=\"count\"> (目前有 <code>{{ contributors.length }}</code> 个有为青年贡献了代码)</span></h1>\n "
},
{
"path": "docs/zh-CN/about/showcase.md",
"chars": 1625,
"preview": "---\ntitle: VUX 使用案例\n---\n\n# 使用案例\n\n> 如果你的产品在使用`VUX`, 请直接发 PR 修改 `docs/zh-CN/about/showcase.md`（置于列表最后，统一格式：二维码必须无白边框）。\n\n<i"
},
{
"path": "docs/zh-CN/about/thanks.md",
"chars": 653,
"preview": "---\ntitle: 感谢\n---\n\n# Thanks\n\n\n## VUX 参考或者使用了以下开源项目的代码\n\n+ [Vue](https://github.com/vuejs/vue)\n+ [WeUI](https://github.com"
},
{
"path": "docs/zh-CN/contribution/donate.md",
"chars": 803,
"preview": "---\ntitle: 捐赠支持 VUX\n---\n\n## 感谢赞助商\n\n<br>\n<p class=\"best-companies\">\n <a href=\"https://www.bmqb.com/a/jobs?tracking_code="
},
{
"path": "docs/zh-CN/contribution/issue.md",
"chars": 285,
"preview": "---\ntitle: 如何提 issue\n---\n\n# 如何提 issue\n\n::: tip\n使用本项目意味着你也有义务帮助其变得更好。\n:::\n\n不要浪费维护者时间。\n\n不要让维护者帮你学习`Vue`，帮你熟悉`vue-loader`，甚"
},
{
"path": "docs/zh-CN/contribution/pr.md",
"chars": 640,
"preview": "---\ntitle: 如何贡献\n---\n\n# 如何贡献\n\n## 文档更新\n\n如果修改了组件代码，需要在组件目录的`metas.yml`加上changes，直接使用`next`作为版本号(如果已经存在该版本号，则直接添加变更条目即可)。\n\n中"
},
{
"path": "docs/zh-CN/contribution/vux-development.md",
"chars": 823,
"preview": "---\ntitle: VUX 源码本地运行\n---\n\n# VUX 源码本地运行\n\n> phantomjs 可能会遇到无法下载的问题，建议先用 cnpm 全局安装\n\n``` bash\ncnpm install -g phantomjs-pre"
},
{
"path": "docs/zh-CN/css/1px.md",
"chars": 399,
"preview": "---\ntitle: 1px 解决方案\n---\n\n# 1px 解决方案\n\n::: tip\n1px 方案在 VUX 组件内应用广泛，包括 `Grid`, `ButtonTab`, `XTable`, `XButton`, `Cell` 等等。"
},
{
"path": "docs/zh-CN/css/close.md",
"chars": 414,
"preview": "---\ntitle: 纯 css close 图标\n---\n\n# 纯 css close 图标\n\n::: tip\n关闭图标主要应用于弹窗(dialog)关闭按钮以及弹窗(popup)头部的关闭按钮。\n:::\n\n## 使用\n\n在你项目的`Ap"
},
{
"path": "docs/zh-CN/css.md",
"chars": 719,
"preview": "---\nnav: zh-CN\n---\n\n## 1px\n\n::: tip\n1px 方案在 VUX 组件内应用广泛，包括 Grid, ButtonTab, XTable, XButton, Cell 等等。\n<br>\n<br>\n利用 flexb"
},
{
"path": "docs/zh-CN/development/i18n.md",
"chars": 265,
"preview": "---\ntitle: 国际化 i18n\n---\n\n# 国际化\n\n::: warning\n暂时只支持配合`vux-loader`使用。\n\n如果你只需要默认的中文组件，那么你可以略过下面说明，只要启用`vux-ui`插件即可。\n:::\n\n默认不"
},
{
"path": "docs/zh-CN/development/remove-click-delay-fastclick.md",
"chars": 252,
"preview": "---\ntitle: Vue 应用移除移动端页面点击延迟\n---\n\n# 移除移动端页面点击延迟\n\n::: tip\n直接使用 `WeUI` 样式并引入 `fastclick` 会导致一些点击问题，VUX 组件内部已经做了相关处理。\n:::\n\n"
},
{
"path": "docs/zh-CN/development/router.md",
"chars": 349,
"preview": "---\ntitle: vue-router 路由\n---\n\n# 路由\n\n推荐直接使用官方 [vue-router](https://github.com/vuejs/vue-router)，`VUX`部分组件支持`link`属性直接支持`v"
},
{
"path": "docs/zh-CN/development/theme.md",
"chars": 655,
"preview": "---\ntitle: 主题颜色配置\n---\n\n# 主题颜色配置\n\n## 配置插件\n\n::: warning\n暂时只支持配合`vux-loader`使用。\n\n注意的是主题文件不能引入其他less文件，只能为简单变量列表。\n:::\n\n请配置vu"
},
{
"path": "docs/zh-CN/development/typescript.md",
"chars": 54,
"preview": "---\ntitle: TypeScript 支持\n---\n\n# TypeScript 支持\n\n> 即将支持\n"
},
{
"path": "docs/zh-CN/development/vue-ajax.md",
"chars": 743,
"preview": "---\ntitle: Vue 中使用 ajax\n---\n\n# 发送 ajax 请求\n\n\n:::tip\n`AjaxPlugin` 插件依赖于 [axios](https://github.com/mzabriskie/axios)\n详细 AP"
},
{
"path": "docs/zh-CN/development/vue-global-method.md",
"chars": 430,
"preview": "---\ntitle: Vue 全局公用函数\n---\n\n# vue 全局公用函数\n\n如果你需要让一个工具函数在每个组件可用，可以把方法挂载到 `Vue.prototype`上。\n\n## 注册\n\n`main.js` 中\n\n``` js\nVue."
},
{
"path": "docs/zh-CN/development/vue-google-analytics.md",
"chars": 752,
"preview": "---\ntitle: Vue 中使用谷歌统计\n---\n\n# 使用谷歌统计\n\n单页面应用切换时要手动发送页面统计，首先在 `index.html` 或者 `main.js` 里引入谷歌统计代码：\n\n``` js\n(function(i,s,"
},
{
"path": "docs/zh-CN/development/vue-loader-autoprefix.md",
"chars": 565,
"preview": "---\ntitle: vue-loader autoprefix 推荐配置\n---\n\n# autoprefix 推荐配置\n\n`vue`官方模板的设置是`last 2 versions`，可能会导致你在某些`Android`机子上出现问题。\n"
},
{
"path": "docs/zh-CN/development/vue-loader-disable-eslint.md",
"chars": 622,
"preview": "---\ntitle: vue-loader 禁用 eslint\n---\n\n# 禁用 eslint\n\n并不推荐禁用`eslint`, 编码规范可以一定程序上保证代码质量。但是如果你确实想禁用，可以删除`build/webpack.base.c"
},
{
"path": "docs/zh-CN/development/vue-router-page-transition.md",
"chars": 103,
"preview": "---\ntitle: 页面切换转场动画\n---\n\n# 页面切换转场动画\n\n你可以注意到 demo 站点的切换动画，本质上是使用 `Vue` 的 `transition` 组件实现的。\n\n- [ ] todo"
},
{
"path": "docs/zh-CN/development/vue-show-loading.md",
"chars": 1099,
"preview": "---\ntitle: 页面切换时显示loading\n---\n\n# 页面切换显示loading\n\n移动端如果使用异步组件加载那么还是需要一点等待时间的，在网络慢时等待时间会更长。显示`Loading`状态缓解一下用户等待情绪就十分重要。\n\n如"
},
{
"path": "docs/zh-CN/development/vue-webpack-code-splitting-async.md",
"chars": 633,
"preview": "---\ntitle: Vue 异步加载组件\n---\n\n# 异步加载组件\n\n将所有页面组件一次性加载是一个很浪费资源和考验用户耐心的做法，尤其在移动端。\n\n## 使用方法\n\n`webpack` 提供了[code splitting](http"
},
{
"path": "docs/zh-CN/development/vue-webpack-env.md",
"chars": 414,
"preview": "---\ntitle: Vue + webpack 区分测试环境和生产环境\n---\n\n# 区分测试环境和生产环境\n\n如果你使用了 `vux2` 模板或者 `webpack` 模板，默认你可以直接通过判断 `process.env.NODE_E"
},
{
"path": "docs/zh-CN/development/vux-nuxt-ssr.md",
"chars": 131,
"preview": "---\ntitle: vux 使用 nuxt 实现服务端渲染\n---\n\n# vux 使用 nuxt 实现服务端渲染\n\n请直接参考源码目录 [/ssr/nuxt](https://github.com/airyland/vux/tree/v2"
},
{
"path": "docs/zh-CN/directives/v-transfer-dom.md",
"chars": 613,
"preview": "---\ntitle: v-transfer-dom 指令\n---\n\n# v-transfer-dom 指令\n\n在移动端应用里，为了便于代码组织，通常我们要将组件放在各个路由的 `.vue` 文件里，但是因为此时组件并不在 `body` 下，"
},
{
"path": "docs/zh-CN/faq/$t-is-not-defined.md",
"chars": 302,
"preview": "---\ntitle: $t is not defined\n---\n\n# $t is not defined\n\n一般是两个原因：\n\n## cnpm 导致的问题\n\n如果是直接使用模板后并且使用 `cnpm` 报错，请升级到 `vux-loade"
},
{
"path": "docs/zh-CN/faq/Uncaught-SyntaxError-Unexpected-token-export.md",
"chars": 257,
"preview": "---\ntitle: Uncaught SyntaxError: Unexpected token export\n---\n\n# Uncaught SyntaxError: Unexpected token export\n\n原因是Vux的js"
},
{
"path": "docs/zh-CN/faq/can-vux-used-in-weapp.md",
"chars": 254,
"preview": "---\ntitle: VUX 能否在微信小程序里使用\n---\n\n# VUX 能否在微信小程序里使用\n\nSorry，不能。微信小程序是个相对封闭的平台，无法简单地适配也没有计划支持小程序版本。\n\n目前企业主体用户可以使用 `web-view`"
},
{
"path": "docs/zh-CN/faq/cannot-resolve-inline-desc.md",
"chars": 174,
"preview": "---\ntitle: Can't resolve '../inline-desc' in\n--- \n\n# Can't resolve '../inline-desc' in\n\nwebpack resolve 配置\n\n``` js\nresol"
},
{
"path": "docs/zh-CN/faq/difference-between-vux-template-and-webpack-template.md",
"chars": 153,
"preview": "---\ntitle: vux2 和 Vue 官方 webpack 模板区别是什么？\n---\n\n# vux2 和 Vue 官方 webpack 模板区别是什么？\n\n`vux2` 模板 fork 自 `webpack` 模板并进行了配置，和 `"
},
{
"path": "docs/zh-CN/faq/document-framework.md",
"chars": 359,
"preview": "---\ntitle: 文档是用什么工具编写的？\n---\n\n# 文档是用什么工具编写的？\n\n早期版本使用的是 [Docute](https://docute.js.org) by [egoist](https://github.com/ego"
},
{
"path": "docs/zh-CN/faq/does-vux-support-weex.md",
"chars": 59,
"preview": "---\ntitle: VUX 是否支持 weex\n---\n\n# VUX 是否支持 weex\n\n不支持，也没有计划支持。"
},
{
"path": "docs/zh-CN/faq/dupicate-style.md",
"chars": 406,
"preview": "---\ntitle: 样式冗余\n---\n\n# 样式冗余\n\n## 调试时\n\n调试时如果你审查元素样式发现有多个重复样式是正常的，因为不同组件可能引用了同样的less源码，而调试时是直接把不同组件样式用`<style>`标签插入页面。\n\n## "
},
{
"path": "docs/zh-CN/faq/is-vux-wechat-official-project.md",
"chars": 76,
"preview": "---\ntitle: VUX 是否为微信团队项目\n---\n\n# VUX 是否为微信团队项目\n\n否。但是依赖的WeUI是微信团队的开源项目，感谢微信团队。"
},
{
"path": "docs/zh-CN/faq/vux-build-issue.md",
"chars": 535,
"preview": "---\ntitle: VUX 打包体积过大\n---\n\n# VUX 打包体积过大\n\n一般是以下原因导致的：\n\n## import 语法使用问题\n\n在 `vux-loader@1.0.61` 以下版本，如果你在 `import` 和 `{` 之"
},
{
"path": "docs/zh-CN/faq/vux-server-render-support.md",
"chars": 183,
"preview": "---\ntitle: VUX 服务端渲染\n---\n\n# VUX 服务端渲染\n\n目前支持 `NUXT` 渲染，可以参考例子：[https://github.com/nuxt/nuxt.js/tree/dev/examples/with-vux"
},
{
"path": "docs/zh-CN/faq/what-is-vux-virtual-component.md",
"chars": 291,
"preview": "---\ntitle: 什么是虚拟组件(virtual component)\n---\n\n# 什么是虚拟组件(virtual component)\n\n## 概念\n\n`虚拟组件` 是 `VUX` 组件特有的概念。它指的是一个组件不需要 `impo"
},
{
"path": "docs/zh-CN/faq/why-cannot-i-import-all-components.md",
"chars": 374,
"preview": "---\ntitle: 为什么不能引入全部组件？\n---\n\n# 为什么不能引入全部组件\n\n移动端引入全部组件会导致体积过大，加载速度慢，浪费用户等待时间并且浪费(cdn)带宽。\n\n另一方面随着组件库迭代，组件数量增加，这个体积会逐渐变得不可接"
},
{
"path": "docs/zh-CN/faq/why-cannot-i-use-vux-with-cdn.md",
"chars": 211,
"preview": "---\ntitle: 为什么不能直接引用 cdn 链接\n---\n\n# 为什么不能直接引用 cdn 链接\n\n原因见 <router-link to=\"/zh-CN/faq/why-use-vue-file-for-distribution.h"
},
{
"path": "docs/zh-CN/faq/why-close-my-issue.md",
"chars": 164,
"preview": "---\ntitle: 为什么作者直接关闭了我提的 issue\n---\n\n# 为什么作者直接关闭了我提的 issue\n\n任何不认真提问题，浪费维护者时间的只有这样处理。\n\n维护者其实没有义务做外包一样回答问题，况且部分问题实在是过于马虎，看了"
},
{
"path": "docs/zh-CN/faq/why-delete-my-issue-comment.md",
"chars": 317,
"preview": "---\ntitle: 为什么作者直接删除了我在 issue 下的评论\n---\n\n# 为什么作者直接删除了我在 issue 下的评论\n\n\n::: warning\n被删除评论一般是因为：你在 issue 下写了一条和当前 issue 没有关系的"
},
{
"path": "docs/zh-CN/faq/why-use-vue-file-for-distribution.md",
"chars": 259,
"preview": "---\ntitle: 为什么使用 .vue 源码分发而不是 js 文件\n---\n\n\n# 为什么使用 .vue 源码分发而不是 js 文件\n\n代码冗余，无法在构建时优化，出错时难以跟踪，作为组件维护者可能要打包多份代码出来满足不同需求(压缩版"
},
{
"path": "docs/zh-CN/faq/why-use-x-prefix-for-components.md",
"chars": 138,
"preview": "---\ntitle: 为什么部分组件要加`x-`前缀\n---\n\n# 为什么部分组件要加`x-`前缀\n\n若不更名，可能在开发时与标准 html 标签相同而导致冲突或者 bug，比如 `Dialog`, `Switch` 等。从Vue@2.x开"
},
{
"path": "docs/zh-CN/faq/why-using-vux-loader.md",
"chars": 161,
"preview": "---\ntitle: 为什么一定要使用 vux-loader\n---\n\n在部分用户看来这是一个使用门槛，实际上它本意是为了让用户更方便地开发。\n\n它是为了实现按需引用组件及定义 less 变量以及编译时优化代码而开发的，并不会造在配置上的麻"
},
{
"path": "docs/zh-CN/faq/will-vux-stop-maintaining.md",
"chars": 188,
"preview": "---\ntitle: 担心停止维护\n---\n\n# 担心停止维护\n\n一个项目会停止维护主要原因是社区不活跃，用户量不够多，而且没有人愿意贡献。\n\nVUX 和 Vue 一样正在发展中，越多越多的开发者在使用，在可预见的时间内不会突然停止维护。\n"
},
{
"path": "docs/zh-CN/install/biolerplate.md",
"chars": 773,
"preview": "---\ntitle: VUX 入门教程\n---\n\n# 快速入门\n\n::: warning\nvux@2.x 推荐`webpack+vue-loader`方式的开发，如果要使用`umd`文件，请参照<router-link to=\"/zh-CN"
},
{
"path": "docs/zh-CN/install/manual-usage.md",
"chars": 1902,
"preview": "---\ntitle: VUX 手动配置使用\n---\n\n# 手动配置使用\n\n[https://github.com/airyland/vux/tree/v2/packages/vue-cli-3-example](https://github"
},
{
"path": "docs/zh-CN/install/npm.md",
"chars": 951,
"preview": "---\ntitle: VUX 安装使用\n---\n\n# 安装使用(webpack)\n\n::: warning\n如果你从没使用过 `VUX`，请参考 <router-link to=\"/zh-CN/install/biolerplate.htm"
},
{
"path": "docs/zh-CN/install/umd.md",
"chars": 2728,
"preview": "---\ntitle: umd 组件构建及使用\n---\n\n# umd 组件构建及使用\n\n ::: tip\n 从`2.0`开始，推荐使用`webpack`来调用组件，因此不再在`repo`中保存`umd`文件，但提供了生成命令。\n\n 请更"
},
{
"path": "docs/zh-CN/install/upgrade-to-vux2.md",
"chars": 3684,
"preview": "---\ntitle: 升级到 vux@2.x\n---\n\n# 升级到 vux@2.x\n\n### Vue@2.x 主要变更\n\n参考[Vue官方文档](https://cn.vuejs.org/v2/guide/migration.html)进行"
},
{
"path": "docs/zh-CN/install/usage.md",
"chars": 429,
"preview": "---\ntitle: VUX 调用例子\n---\n\n# 调用示例\n\n## .vue文件中调用组件\n\n``` html\n<template>\n <div>\n <group>\n <cell title=\"title\" value"
},
{
"path": "docs/zh-CN/lab/index.md",
"chars": 91,
"preview": "---\ntitle: 实验室\n---\n\n# 实验室\n\n> beta 测试组件将出现在这里。\n\n\n- [VChart](/zh-CN/components/v-chart.html)\n"
},
{
"path": "docs/zh-CN/production/inline-manifest.md",
"chars": 434,
"preview": "---\ntitle: Vue 打包优化：使用 inline manifest\n---\n\n# inline manifest\n\n::: tip\n`manifest` 文件为路径配置和异步组件名字列表，该做法可以减少一个`http`请求。\n\n确"
},
{
"path": "docs/zh-CN/tools/base64.md",
"chars": 116,
"preview": "---\ntitle: base64\n---\n\n# base64\n\n``` js\nimport { base64 } from 'vux'\n\nbase64.encode('VUX')\nbase64.decode('VlVY')\n```"
},
{
"path": "docs/zh-CN/tools/cookie.md",
"chars": 971,
"preview": "---\ntitle: cookie\n---\n\n# cookie\n\n``` js\nimport { cookie } from 'vux'\n```\n\n`get *cookie.get(name, [options])*`\n\n获取 cookie"
},
{
"path": "docs/zh-CN/tools/date.md",
"chars": 283,
"preview": "---\ntitle: vue date 日期格式化\n---\n\n# date format\n\n相对`moment`来说`十分轻量`的实现。\n\n\n## 使用\n\n``` js\nimport { dateFormat } from 'vux'\n\nd"
},
{
"path": "docs/zh-CN/tools/debounce-throttle.md",
"chars": 371,
"preview": "---\ntitle: debounce\n---\n\n## debounce\n\n::: warning\n请注意了解 `debounce` 和 `throttle` 的区别。如果尚不清楚，请`google`之。\n:::\n\n``` js\nimpor"
},
{
"path": "docs/zh-CN/tools/md5.md",
"chars": 196,
"preview": "---\ntitle: md5\n---\n\n# md5\n\n::: tip\n该工具直接依赖于 [blueimp-md5](https://github.com/blueimp/JavaScript-MD5)\n\n注意: `md5`是消息摘要算法并非"
},
{
"path": "docs/zh-CN/tools/number.md",
"chars": 396,
"preview": "---\ntitle: vue 数字格式化\n---\n\n# number 格式化工具\n\n`numberComma`用于分割数字，默认为3位分割，一般用于格式化`金额`。\n\n`numberPad`用于按照位数补0\n\n`numberRandom`用"
},
{
"path": "docs/zh-CN/tools/querystring.md",
"chars": 231,
"preview": "---\ntitle: Vue querystring url 参数解析\n---\n\n# url 参数解析\n\n```js\nimport { querystring } from 'vux'\n\nquerystring.parse('a=b&c=d"
},
{
"path": "docs/zh-CN/tools/string.md",
"chars": 109,
"preview": "---\ntitle: Vue string 工具函数\n---\n\n# string 处理工具\n\n``` js\nimport { trim } from 'vux'\n\ntrim(' 1024 ') // 1024\n```\n"
},
{
"path": "docs/zh-CN/umd.md",
"chars": 2860,
"preview": "---\r\nnav: zh-CN\r\n---\r\n\r\n## 组件 umd 文件\r\n\r\n <p class=\"tip\">\r\n 从`2.0`开始，推荐使用`webpack`来调用组件，因此不再在`repo`中保存`umd`文件，但提供了生成命令。"
}
]
// ... and 771 more files (download for full content)
About this extraction
This page contains the full source code of the airyland/vux GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 971 files (3.1 MB), approximately 871.6k tokens, and a symbol index with 443 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.