@euler-material/euler-material-vue v0.0.2

euler-materal-vue

命令

  # "dev": "vue-cli-service serve",本地测试examples示例
  $ npm run dev
  # "build": "vue-cli-service build && npm run docs",构建vue组件并且生成文档
  $ npm run build
  # "docs": "vue-docgen -c docgen.config.js", 生成文档
  $ npm run docs
  # "test": "vue-cli-service test:unit", 执行单元测试
  $ npm run test

使用

vue2 中全局使用，默认 ecm 前缀

// main.js,全局引入组件和样式
import ecm from '@euler-material/euler-material-vue';
import '@euler-material/euler-material-vue/lib/style';
Vue.use(ecm);

<template>
  <ecm-tree-picker />
</template>

<script>
export default {
  name: 'App',
};
</script>

vue2 中组件中使用

安装babel插件npm install babel-plugin-import --save-dev实现按需加载，配置babel.config.js如下：

// babel.config.js
module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'import',
      {
        libraryName: '@euler-material/euler-material-vue',
        libraryDirectory: 'es',
        //关闭驼峰自动转链式
        camel2DashComponentName: false,
        //关闭蛇形自动转链式
        camel2UnderlineComponentName: false,
        style: (name) => {
          const cssName = name.split('/')[2];
          return `@euler-material/euler-material-vue/lib/style/${cssName}.css`;
        },
      },
    ],
  ],
};

引用 euler-material-vue根据需要是否加上ecm前缀

<template>
  <TreePicker />
  <ecm-tree-search />
</template>

<script>
import { TreePicker, TreeSearch } from '@euler-material/euler-material-vue';
export default {
  name: 'App',
  components: {
    TreePicker,
    EcmTreeSearch: TreeSearch,
  },
};
</script>