diff --git a/docs/index.html b/docs/index.html index 66eaa9b69a10d84961103fa651b6c9b06b3fd4a7..84021d0e834ec8113dc9900aaffa6348dceadb4a 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1 +1 @@ -cube-ui Document
\ No newline at end of file +cube-ui Document
\ No newline at end of file diff --git a/docs/js/29.66ebc921d54d6d7b2f5e.js b/docs/js/29.66ebc921d54d6d7b2f5e.js deleted file mode 100644 index 2ed8b33a7c32531607693e4d2498121171a0a8aa..0000000000000000000000000000000000000000 --- a/docs/js/29.66ebc921d54d6d7b2f5e.js +++ /dev/null @@ -1 +0,0 @@ -webpackJsonp([29],{457:function(s,t,a){s.exports=a(521)},521:function(s,t,a){var n=a(11)(null,a(522),null,null,null);s.exports=n.exports},522:function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",[s._v("Quick start")]),s._v(" "),a("h3",[s._v("Install")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-shell"}},[a("span",{attrs:{class:"hljs-meta"}},[s._v("$")]),a("span",{attrs:{class:"bash"}},[s._v(" npm install cube-ui --save")]),s._v("\n")])]),s._v(" "),a("h3",[s._v("Usage")]),s._v(" "),a("p",[s._v("It is recommended to use "),a("a",{attrs:{href:"https://www.npmjs.com/package/babel-plugin-transform-modules"}},[s._v("babel-plugin-transform-modules")]),s._v(",which helps you import component modules and corresponding styles more elegantly.")]),s._v(" "),a("p",[s._v("Before use, the plugin needs some configuration. Modify .babelrc:")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-json"}},[s._v("{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"plugins"')]),s._v(": [\n ["),a("span",{attrs:{class:"hljs-string"}},[s._v('"transform-modules"')]),s._v(", {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"cube-ui"')]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"transform"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"cube-ui/lib/${member}"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"kebabCase"')]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"style"')]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"ignore"')]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v('"create-api"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"better-scroll"')]),s._v("]\n }\n }\n }]\n ]\n}\n")])]),s._v(" "),a("p",[s._v("If not using babel-plugin-transform-modules, you need to import corresponding style files by hand:")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui/lib/style.css'")]),s._v("\n")])]),s._v(" "),a("p",[a("strong",[s._v("Notice:")]),s._v(" By default cube-ui will use "),a("a",{attrs:{href:"#/en-US/docs/post-compile"}},[s._v("post-compile")]),s._v(" with webpack 2+, but post-complie needs some dependencies and configuration(see the last part in this page). If you don't want to use post-compile, just modify the webpack config file:")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-comment"}},[s._v("// webpack.config.js")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-built_in"}},[s._v("module")]),s._v(".exports = {\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n resolve: {\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n alias: {\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui'")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui/lib'")]),s._v("\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n }\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n }\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n}\n")])]),s._v(" "),a("h4",[s._v("Fully import")]),s._v(" "),a("p",[s._v("Commonly in the entry file:")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-javascript"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Cube "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui'")]),s._v("\n\nVue.use(Cube)\n")])]),s._v(" "),a("h4",[s._v("Import on demand")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-javascript"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("/* eslint-disable no-unused-vars */")]),s._v("\n Style,\n Button\n} "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui'")]),s._v("\n")])]),s._v(" "),a("p",[a("strong",[s._v("Notice:")]),s._v(" In this case, you also need to import "),a("a",{attrs:{href:"#/en-US/docs/style"}},[s._v("style module")]),s._v(".")]),s._v(" "),a("p",[s._v("You can choose to register globally or partially:")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-comment"}},[s._v("// register globally")]),s._v("\nVue.use(Button)\n\n"),a("span",{attrs:{class:"hljs-comment"}},[s._v("// or register partially")]),s._v("\n"),a("span",{attrs:{class:"hljs-comment"}},[s._v("// in certain somponents")]),s._v("\n{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("components")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("CubeButton")]),s._v(": Button\n }\n}\n")])]),s._v(" "),a("p",[s._v("All the components that can be imported on demand are listed below:")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" {\n Button,\n Checkbox,\n Loading,\n Tip,\n Toast,\n Picker,\n TimePicker,\n Dialog,\n ActionSheet,\n Scroll,\n Slide,\n IndexList\n} "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui'")]),s._v("\n")])]),s._v(" "),a("p",[s._v("You can also import "),a("a",{attrs:{href:"#/en-US/docs/create-api"}},[s._v("create-api")]),s._v(" and "),a("a",{attrs:{href:"#/en-US/docs/better-scroll"}},[s._v("better-scroll")]),s._v(" module:")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { createAPI, BetterScroll } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui'")]),s._v("\n")])]),s._v(" "),a("h4",[s._v("Examples")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"showDiaog"')]),s._v(">")]),s._v("show dialog"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n showDialog() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createDialog({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'alert'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Alert'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'dialog content'")]),s._v("\n }).show()\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])]),s._v(" "),a("h3",[s._v("Use post-compile")]),s._v(" "),a("p",[s._v("Since cube-ui will use "),a("a",{attrs:{href:"#/en-US/docs/post-compile"}},[s._v("post-compile")]),s._v(" with webpack 2+ by default, your application's webpack and babel configuration needs to be compatible with cube-ui.")]),s._v(" "),a("p",[s._v("Follow the steps below:")]),s._v(" "),a("ol",[a("li",[s._v("Modify package.json")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-json"}},[s._v("{\n // webpack-post-compile-plugin depends on compileDependencies\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"compileDependencies"')]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v('"cube-ui"')]),s._v("],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"devDependencies"')]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"babel-plugin-transform-modules"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"^0.0.2"')]),s._v(",\n // add stylus dependencies\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"stylus"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"^0.54.5"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"stylus-loader"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"^2.1.1"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"webpack-post-compile-plugin"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"^0.1.2"')]),s._v("\n }\n}\n")])]),s._v(" "),a("ol",{attrs:{start:"2"}},[a("li",[s._v("Modify .babelrc, use "),a("a",{attrs:{href:"https://www.npmjs.com/package/babel-plugin-transform-modules"}},[s._v("babel-plugin-transform-modules")]),s._v(":")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-json"}},[s._v("{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"plugins"')]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v('"transform-modules"')]),s._v(", {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"cube-ui"')]),s._v(": {\n // Notice: this path should be changed to `src/modules`\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"transform"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"cube-ui/src/modules/${member}"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"kebabCase"')]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }\n }]\n}\n")])]),s._v(" "),a("ol",{attrs:{start:"3"}},[a("li",[s._v("Modify webpack.base.conf.js")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" PostCompilePlugin = "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("require")]),s._v("("),a("span",{attrs:{class:"hljs-string"}},[s._v("'webpack-post-compile-plugin'")]),s._v(")\n"),a("span",{attrs:{class:"hljs-built_in"}},[s._v("module")]),s._v(".exports = {\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n plugins: [\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" PostCompilePlugin()\n ]\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n}\n")])]),s._v(" "),a("ol",{attrs:{start:"4"}},[a("li",[s._v("Modify "),a("code",{pre:!0},[s._v("exports.cssLoaders")]),s._v(" function in build/utils.js")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[s._v("exports.cssLoaders = "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v(" ("),a("span",{attrs:{class:"hljs-params"}},[s._v("options")]),s._v(") ")]),s._v("{\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" stylusOptions = {\n "),a("span",{attrs:{class:"hljs-string"}},[s._v("'resolve url'")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// https://vue-loader.vuejs.org/en/configurations/extract-css.html")]),s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("css")]),s._v(": generateLoaders(),\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("postcss")]),s._v(": generateLoaders(),\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("less")]),s._v(": generateLoaders("),a("span",{attrs:{class:"hljs-string"}},[s._v("'less'")]),s._v("),\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("sass")]),s._v(": generateLoaders("),a("span",{attrs:{class:"hljs-string"}},[s._v("'sass'")]),s._v(", { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("indentedSyntax")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(" }),\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("scss")]),s._v(": generateLoaders("),a("span",{attrs:{class:"hljs-string"}},[s._v("'sass'")]),s._v("),\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("stylus")]),s._v(": generateLoaders("),a("span",{attrs:{class:"hljs-string"}},[s._v("'stylus'")]),s._v(", stylusOptions),\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("styl")]),s._v(": generateLoaders("),a("span",{attrs:{class:"hljs-string"}},[s._v("'stylus'")]),s._v(", stylusOptions)\n }\n}\n")])]),s._v(" "),a("p",[s._v("See "),a("a",{attrs:{href:"https://github.com/vuejs-templates/webpack/pull/970/files"}},[s._v("https://github.com/vuejs-templates/webpack/pull/970/files")])])])}]}}}); \ No newline at end of file diff --git a/docs/js/29.ad932638131e22192155.js b/docs/js/29.ad932638131e22192155.js new file mode 100644 index 0000000000000000000000000000000000000000..5d9f9c561216228d5d73ee3f40ba11da11f62d64 --- /dev/null +++ b/docs/js/29.ad932638131e22192155.js @@ -0,0 +1 @@ +webpackJsonp([29],{457:function(s,t,a){s.exports=a(521)},521:function(s,t,a){var n=a(11)(null,a(522),null,null,null);s.exports=n.exports},522:function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",[s._v("Quick start")]),s._v(" "),a("h3",[s._v("Install")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-shell"}},[a("span",{attrs:{class:"hljs-meta"}},[s._v("$")]),a("span",{attrs:{class:"bash"}},[s._v(" npm install cube-ui --save")]),s._v("\n")])]),s._v(" "),a("h3",[s._v("Usage")]),s._v(" "),a("p",[s._v("It is recommended to use "),a("a",{attrs:{href:"https://www.npmjs.com/package/babel-plugin-transform-modules"}},[s._v("babel-plugin-transform-modules")]),s._v(",which helps you import component modules and corresponding styles more elegantly.")]),s._v(" "),a("p",[s._v("Before use, the plugin needs some configuration. Modify .babelrc:")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-json"}},[s._v("{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"plugins"')]),s._v(": [\n ["),a("span",{attrs:{class:"hljs-string"}},[s._v('"transform-modules"')]),s._v(", {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"cube-ui"')]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"transform"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"cube-ui/lib/${member}"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"kebabCase"')]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"style"')]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"ignore"')]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v('"create-api"')]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v('"better-scroll"')]),s._v("]\n }\n }\n }]\n ]\n}\n")])]),s._v(" "),a("p",[a("strong",[s._v("Notice:")]),s._v(" By default cube-ui will use "),a("a",{attrs:{href:"#/en-US/docs/post-compile"}},[s._v("post-compile")]),s._v(" with webpack 2+, but post-complie needs some dependencies and configuration(see the last part in this page). If you don't want to use post-compile, just modify the webpack config file:")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-comment"}},[s._v("// webpack.config.js")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-built_in"}},[s._v("module")]),s._v(".exports = {\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n resolve: {\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n alias: {\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui'")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui/lib'")]),s._v("\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n }\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n }\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n}\n")])]),s._v(" "),a("h4",[s._v("Fully import")]),s._v(" "),a("p",[s._v("Commonly in the entry file:")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-javascript"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Cube "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui'")]),s._v("\n\nVue.use(Cube)\n")])]),s._v(" "),a("h4",[s._v("Import on demand")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-javascript"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("/* eslint-disable no-unused-vars */")]),s._v("\n Style,\n Button\n} "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui'")]),s._v("\n")])]),s._v(" "),a("p",[a("strong",[s._v("Notice:")]),s._v(" In this case, you also need to import "),a("a",{attrs:{href:"#/en-US/docs/style"}},[s._v("style module")]),s._v(".")]),s._v(" "),a("p",[s._v("You can choose to register globally or partially:")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-comment"}},[s._v("// register globally")]),s._v("\nVue.use(Button)\n\n"),a("span",{attrs:{class:"hljs-comment"}},[s._v("// or register partially")]),s._v("\n"),a("span",{attrs:{class:"hljs-comment"}},[s._v("// in certain somponents")]),s._v("\n{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("components")]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("CubeButton")]),s._v(": Button\n }\n}\n")])]),s._v(" "),a("p",[s._v("All the components that can be imported on demand are listed below:")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" {\n Button,\n Checkbox,\n Loading,\n Tip,\n Toast,\n Picker,\n TimePicker,\n Dialog,\n ActionSheet,\n Scroll,\n Slide,\n IndexList\n} "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui'")]),s._v("\n")])]),s._v(" "),a("p",[s._v("You can also import "),a("a",{attrs:{href:"#/en-US/docs/create-api"}},[s._v("create-api")]),s._v(" and "),a("a",{attrs:{href:"#/en-US/docs/better-scroll"}},[s._v("better-scroll")]),s._v(" module:")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { createAPI, BetterScroll } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui'")]),s._v("\n")])]),s._v(" "),a("h4",[s._v("Examples")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"showDiaog"')]),s._v(">")]),s._v("show dialog"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),a("span",{attrs:{class:"javascript"}},[s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n showDialog() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createDialog({\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'alert'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Alert'")]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'dialog content'")]),s._v("\n }).show()\n }\n }\n }\n")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("")]),s._v("\n")])]),s._v(" "),a("h3",[s._v("Use post-compile")]),s._v(" "),a("p",[s._v("Since cube-ui will use "),a("a",{attrs:{href:"#/en-US/docs/post-compile"}},[s._v("post-compile")]),s._v(" with webpack 2+ by default, your application's webpack and babel configuration needs to be compatible with cube-ui.")]),s._v(" "),a("p",[s._v("Follow the steps below:")]),s._v(" "),a("ol",[a("li",[s._v("Modify package.json")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-json"}},[s._v("{\n // webpack-post-compile-plugin depends on compileDependencies\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"compileDependencies"')]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v('"cube-ui"')]),s._v("],\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"devDependencies"')]),s._v(": {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"babel-plugin-transform-modules"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"^0.0.2"')]),s._v(",\n // add stylus dependencies\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"stylus"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"^0.54.5"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"stylus-loader"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"^2.1.1"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"webpack-post-compile-plugin"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"^0.1.2"')]),s._v("\n }\n}\n")])]),s._v(" "),a("ol",{attrs:{start:"2"}},[a("li",[s._v("Modify .babelrc, use "),a("a",{attrs:{href:"https://www.npmjs.com/package/babel-plugin-transform-modules"}},[s._v("babel-plugin-transform-modules")]),s._v(":")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-json"}},[s._v("{\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"plugins"')]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v('"transform-modules"')]),s._v(", {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"cube-ui"')]),s._v(": {\n // Notice: this path should be changed to `src/modules`\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"transform"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"cube-ui/src/modules/${member}"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v('"kebabCase"')]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }\n }]\n}\n")])]),s._v(" "),a("ol",{attrs:{start:"3"}},[a("li",[s._v("Modify webpack.base.conf.js")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("var")]),s._v(" PostCompilePlugin = "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("require")]),s._v("("),a("span",{attrs:{class:"hljs-string"}},[s._v("'webpack-post-compile-plugin'")]),s._v(")\n"),a("span",{attrs:{class:"hljs-built_in"}},[s._v("module")]),s._v(".exports = {\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n plugins: [\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" PostCompilePlugin()\n ]\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n}\n")])]),s._v(" "),a("ol",{attrs:{start:"4"}},[a("li",[s._v("Modify "),a("code",{pre:!0},[s._v("exports.cssLoaders")]),s._v(" function in build/utils.js")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[s._v("exports.cssLoaders = "),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v(" ("),a("span",{attrs:{class:"hljs-params"}},[s._v("options")]),s._v(") ")]),s._v("{\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" stylusOptions = {\n "),a("span",{attrs:{class:"hljs-string"}},[s._v("'resolve url'")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n }\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// https://vue-loader.vuejs.org/en/configurations/extract-css.html")]),s._v("\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("css")]),s._v(": generateLoaders(),\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("postcss")]),s._v(": generateLoaders(),\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("less")]),s._v(": generateLoaders("),a("span",{attrs:{class:"hljs-string"}},[s._v("'less'")]),s._v("),\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("sass")]),s._v(": generateLoaders("),a("span",{attrs:{class:"hljs-string"}},[s._v("'sass'")]),s._v(", { "),a("span",{attrs:{class:"hljs-attr"}},[s._v("indentedSyntax")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(" }),\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("scss")]),s._v(": generateLoaders("),a("span",{attrs:{class:"hljs-string"}},[s._v("'sass'")]),s._v("),\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("stylus")]),s._v(": generateLoaders("),a("span",{attrs:{class:"hljs-string"}},[s._v("'stylus'")]),s._v(", stylusOptions),\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("styl")]),s._v(": generateLoaders("),a("span",{attrs:{class:"hljs-string"}},[s._v("'stylus'")]),s._v(", stylusOptions)\n }\n}\n")])]),s._v(" "),a("p",[s._v("See "),a("a",{attrs:{href:"https://github.com/vuejs-templates/webpack/pull/970/files"}},[s._v("https://github.com/vuejs-templates/webpack/pull/970/files")])])])}]}}}); \ No newline at end of file diff --git a/docs/js/manifest.3348cb55438fa605ded8.js b/docs/js/manifest.3348cb55438fa605ded8.js deleted file mode 100644 index ea9d13928fc5d89afec4e734d7a92e126214d845..0000000000000000000000000000000000000000 --- a/docs/js/manifest.3348cb55438fa605ded8.js +++ /dev/null @@ -1 +0,0 @@ -!function(e){function c(a){if(d[a])return d[a].exports;var f=d[a]={i:a,l:!1,exports:{}};return e[a].call(f.exports,f,f.exports,c),f.l=!0,f.exports}var a=window.webpackJsonp;window.webpackJsonp=function(d,n,r){for(var b,t,o,u=0,i=[];u