umd 组件构建及使用

2.0开始,推荐使用webpack来调用组件,因此不再在repo中保存umd文件,但提供了生成命令。

请更新 NodeJS 到版本 7.6.0及以上。

例子可查看:https://github.com/airyland/vux/tree/v2/docs/examples

强烈建议使用 webpack 的方式开发,在 3.0 之后可能不再提供支持。

生成命令

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,如vuxGroupvuxCell,你可以在命令行中配置。

npm run build-components -- --locale='en' --namespace='X'

目录结构

生成的文件夹结构如:

出于目录结构一致性考虑,即使是子组件也是一个文件夹,并且会有一个空的index.min.css样式文件。

|- dist/
  |- vux.min.js ------------ 所有组件打包,仅用于测试,不推荐在生产环境使用
  |- vux.min.css ----------- 所有组件样式打包,同样仅用于测试
  |- components
      |- actionsheet
        |- index.min.js -------- 组件js代码
        |- index.min.css ------- 组件css代码

vux.min.js 包括了所有的组件、插件及默认地址库,都挂载在全局变量vux上。当然为了使用方便同样直接挂载到了window上。

组件调用举例: vuxCell

插件调用举例:vuxAlertPlugin

默认地址库调用:vuxChinaAddressData

组件使用

<!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>

插件使用

<!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,构建方式:

npm run build-styles

为了使用方便,可以使用npm run xbuild来执行build-componentsbuild-styles