从2.0
开始,推荐使用webpack
来调用组件,因此不再在repo
中保存umd
文件,但提供了生成命令。
请更新 NodeJS
到版本 7.6.0
及以上。
强烈建议使用 webpack
的方式开发,在 3.0 之后可能不再提供支持。
git clone https://github.com/airyland/vux.git --depth=1 // or just update: git pull\ncd vux\nnpm install\nnpm run build-components\n
\n默认生成的语言是zh-CN
,模块命名空间为vux
,如vuxGroup
,vuxCell
,你可以在命令行中配置。
npm run build-components -- --locale='en' --namespace='X'\n
\n生成的文件夹结构如:
\n出于目录结构一致性考虑,即使是子组件也是一个文件夹,并且会有一个空的index.min.css
样式文件。
|- dist/\n |- vux.min.js ------------ 所有组件打包,仅用于测试,不推荐在生产环境使用\n |- vux.min.css ----------- 所有组件样式打包,同样仅用于测试\n |- components\n |- actionsheet\n |- index.min.js -------- 组件js代码\n |- index.min.css ------- 组件css代码\n
\nvux.min.js 包括了所有的组件、插件及默认地址库,都挂载在全局变量vux上。当然为了使用方便同样直接挂载到了window
上。
组件调用举例: vuxCell
插件调用举例:vuxAlertPlugin
默认地址库调用:vuxChinaAddressData
<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>scripts</title>\n <link rel=\"stylesheet\" href=\"../dist/vux.min.css\">\n <script src=\"https://unpkg.com/vue/dist/vue.js\"></script>\n</head>\n<body>\n <div id=\"demo\">\n <group>\n <cell title=\"Vue\" :value=\"how\"></cell>\n </group>\n </div>\n\n <script src=\"../dist/components/group/index.js\"></script>\n <script src=\"../dist/components/cell/index.js\"></script>\n\n <script>\n Vue.component('group', vuxGroup)\n Vue.component('cell', vuxCell)\n new Vue({\n el: '#demo',\n data: {\n how: 'Cool'\n }\n })\n </script>\n</body>\n</html>\n
\n
\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width,initial-scale=1,user-scalable=0\">\n <title>scripts</title>\n <link rel=\"stylesheet\" href=\"../../dist/styles/reset.css\">\n <link rel=\"stylesheet\" href=\"../../dist/plugins/alert/index.min.css\">\n <script src=\"https://unpkg.com/vue/dist/vue.js\"></script>\n</head>\n<body>\n <div id=\"demo\">\n </div>\n\n <script src=\"../../dist/plugins/alert/index.min.js\"></script>\n\n <script>\n Vue.use(vuxAlertPlugin)\n\n new Vue({\n el: '#demo',\n data: {\n how: 'Cool'\n },\n mounted () {\n this.$vux.alert.show('hello')\n }\n })\n </script>\n</body>\n</html>\n
\n
\n包括1px
解决方案,构建文件位于dist/styles/*.css
,构建方式:
npm run build-styles\n
\n为了使用方便,可以使用npm run xbuild
来执行build-components
及 build-styles