aliens-ui v0.1.11

快速上手

1. 安装 ant-design-vue

yarn add ant-design-vue
或
npm i --save ant-design-vue

2. 安装 AliensUI

yarn add aliens-ui
或
npm i aliens-ui -S

3. 在 main.js 中引入 ant-design-vue 和 AliensUI (注意，ant-design-vue 的样式文件不需要引入，已在 AliensUI.css中集成)

import Vue from 'vue';
import App from './App.vue';

import Antd from 'ant-design-vue'; // 引入 ant-design-vue
Vue.use(Antd);

import AliensUI from 'aliens-ui'; // 引入 AliensUI
import 'aliens-ui/lib/aliensUI.css';
Vue.use(AliensUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

使用示例

<AliensUIText></AliensUIText>

扩展

一、与组件库共享 全局主题色变量

1. 先安装 style-resources-loader

yarn add style-resources-loader 
或
npm i style-resources-loader --save-dev   

2. 再安装 vue-cli-plugin-style-resources-loader

yarn add vue-cli-plugin-style-resources-loader 
或
npm i vue-cli-plugin-style-resources-loader --save-dev 

3. 新建less入口文件 并写入(例如: src/assets/variable.less)

@import '~aliens-ui/src/assets/less/variable.less'; // 引入组件库已导入相应的全局变量

4. 在vue.config.js文件中配置全局变量入口文件

const path = require('path')

module.exports = {
  // css: { // 根据情况配置
  //   loaderOptions: {
  //     less: {
  //       javascriptEnabled: true,
  //     }
  //   }
  // },
  pluginOptions: {// 引入全局样式变量
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [path.resolve(__dirname, "src/assets/variable.less")] // 引入全局样式变量
    }
  }
}

5. 使用示例

<template>
    <div class="global">与组件库共享 全局主题色变量 测试</div>
</template>

<style lang="less">
  .global{
    width: 100px;
    height: 100px;
    background-color: @warning-color;
    margin: 20px auto;
  }
</style>

二、package.json相关插件版本推荐

  "ant-design-vue": "^1.7.7",
  "aliens-ui": "最新版"
  
  "vue": "^2.6.11",
  "vue-router": "^3.2.0"

  "less": "^3.0.4",
  "less-loader": "^5.0.0",
  "@vue/cli-plugin-babel": "~4.5.0",
  "@vue/cli-plugin-router": "~4.5.0",