walle-ui v1.0.6

walle-ui

组件库还在搭建中，暂时还不能投入使用！！！

walle-ui 是一个 Vue 移动端 UI 组件库，适合在 vue2.X 技术栈项目中使用。

• 提供 20+ 高质量组件，覆盖移动端各类场景
• 灵活扩展，丰富的属性配置
• 高性能
• 完善的文档和示例
• 支持按需加载
• 移动端适配
• 主题色配置

组件

• 开发中 Button 按钮
• 开发中 Popup 弹出层
• 开发中 Dialog 模态窗
• 开发中 ActionSheet 动作面板
• 开发中 TabBar 选项卡

安装

npm i walle-ui

完整引入

import Vue from 'vue';
import App from './App.vue';
import WalleUI from 'walle-ui';

Vue.use(WalleUI);

new Vue({
  render: h => h(App)
}).$mount('#app');

按需引入

按需引入方式一：babel-plugin-component

# 安装插件
npm i babel-plugin-component -D

// 可以在 babel.config.js 中配置
{
  "plugins": [
    [
      "component",
      {
        "libraryName": "walle-ui",
        "style": false
      }
    ]
  ]
}

按需引入方式二：babel-plugin-import

# 安装插件
npm i babel-plugin-import -D

// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "walle-ui",
      "libraryDirectory": "lib",
      "style": false
    }]
  ]
}

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'walle-ui',
      libraryDirectory: 'lib',
      style: false
    }, 'walle-ui']
  ]
};

引入所需组件

接下来，如果你只希望引入部分组件，比如 Button 和 TabBar，那么需要在 main.js 中写入以下内容：

import Vue from 'vue';
import App from './App.vue';
import { Button, TabBar } from 'walle-ui';

Vue.use(Button);
Vue.use(TabBar);

new Vue({
  render: h => h(App)
}).$mount('#app');

或者你只想在某个页面单独引入：

<template>
  <div>
    <wa-button></wa-button>
  </div>
</template>

<script>
import { Button } from 'walle-ui';

export default {
  components: {
    'wa-button': Button
  }
};
</script>