# robert-ui

**Repository Path**: CodeHare/robert-ui

## Basic Information

- **Project Name**: robert-ui
- **Description**: 使用webpack+vue+ts从0开始仿写element源码。学习wenpack使用，element源码，ts，npm包开发这四部分。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: dev
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-05-22
- **Last Updated**: 2021-05-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

> A Vue.js 2.0 UI Toolkit for Web.

## 说明

robert-ui 是用 ts 对 element 进行仿写开发的。

## Links

- [官网](http://robert.xlmx.xyz)

## Install

```shell
npm install robert-ui -S
```

## Quick Start

```javascript
import Vue from "vue";
import Robert from "robert-ui";

Vue.use(Robert);

// or
import {
  Alert,
  Button
  // ...
} from "robert-ui";

Vue.component(Alert.name, Alert);
Vue.component(Button.name, Button);
```



```javascript
const { CleanWebpackPlugin } = require('clean-webpack-plugin')  //清除文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin') //最小css文件
const config = require('./config')
module.exports = {
  mode: 'production',     //打包模式
  entry: {                //打包入口
    app: ['./src/index.ts']
  },
  module: {               //module决定了如何处理不同类型的模块
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'ts-loader',
            options: { appendTsxSuffixTo: [/\.vue$/] }
          }
        ]
      },
      {
        test: /\.(scss|css)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // 这里可以指定一个 publicPath
              // 默认使用 webpackOptions.output中的publicPath
              // publicPath的配置，和plugins中设置的filename和chunkFilename的名字有关
              // 如果打包后，background属性中的图片显示不出来，请检查publicPath的配置是否有误
              publicPath: './'
              // publicPath: devMode ? './' : '../',   // 根据不同环境指定不同的publicPath
            }
          },
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
        loader: 'url-loader',
        query: {
          limit: 10000
        }
      }
    ]
  },
  performance: {//配置如何展示性能提示。例如，如果一个资源超过 250kb，webpack 会对此输出一个警告来通知你
    hints: 'error',
    maxEntrypointSize: 4000,
    maxAssetSize: 1000
  },
  stats: 'none',
  optimization: {
    minimize: false //必须为false。否则在生产环境无法解析组件
  },
  plugins: [
    new CleanWebpackPlugin(), //打包时清理dist
    new VueLoaderPlugin(),
    // new UglifyJSPlugin({
    //     uglifyOptions: {
    //         compress: {
    //             drop_debugger: true,
    //             drop_console: true
    //         }
    //     },
    //     sourceMap: true,
    //     parallel: true
    // }),
    new MiniCssExtractPlugin({
      filename: 'index.css',
      chunkFilename: '[id].css'
    })
  ],
  resolve: {
    extensions: ['.ts', '.js', '.vue', '.json'],
    alias: {
      main: path.resolve(__dirname, '../src'),
      packages: path.resolve(__dirname, '../packages'),
      examples: path.resolve(__dirname, '../examples'),
      'robert-ui': path.resolve(__dirname, '../')
    },
    modules: ['node_modules']
  },
  externals: config.externals, //不需要打包的内容
  output: {
    path: path.resolve(process.cwd(), './lib'),
    publicPath: '/dist/',
    filename: 'robert-ui.common.js',
    chunkFilename: '[id].js',
    libraryExport: 'default',
    library: 'Robert',
    libraryTarget: 'commonjs2'
  }
}

```