\n 从`2.0`开始,推荐使用`webpack`来调用组件,因此不再在`repo`中保存`umd`文件,但提供了生成命令。\n
\n 请更新 `NodeJS` 到版本 `7.6.0`及以上。\n
\n 例子可查看:[https://github.com/airyland/vux/tree/v2/docs/examples](https://github.com/airyland/vux/tree/v2/docs/examples)\n
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\n 出于目录结构一致性考虑,即使是子组件也是一个文件夹,并且会有一个空的`index.min.css`样式文件。\n
\n|- dist/\n |- vux.min.js ------------ 所有组件打包,仅用于测试,不推荐在生产环境使用\n |- vux.min.css ----------- 所有组件样式打包,同样仅用于测试\n |- components\n |- actionsheet\n |- index.min.js -------- 组件js代码\n |- index.min.css ------- 组件css代码\n
\n \n vux.min.js 包括了所有的组件、插件及默认地址库,都挂载在全局变量vux上。当然为了使用方便同样直接挂载到了`window`上。\n
\n 组件调用举例: `vuxCell`\n
\n 插件调用举例:`vuxAlertPlugin`\n
\n 默认地址库调用:`vuxChinaAddressData`\n
<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`