初学者指南：结合Webpack、Vue、Typescript，仿写Element UI源码！

2023-12-29 01:31:08

webpack+Vue+ts+仿写element-ui源码1(持续更新)

目录：

搭建开发环境
创建第一个组件
组件的开发和实现
将组件库发布到npm

1. 搭建开发环境

首先，我们需要搭建一个开发环境。您可以使用自己熟悉的工具，比如Webpack、Vite或者Rollup。这里我们推荐使用Webpack，因为它是最流行的前端构建工具之一，并且有很多现成的资源可以参考。

npm install webpack webpack-cli vue vue-loader ts-loader

创建一个webpack.config.js文件，内容如下：

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
    library: 'my-ui',
    libraryTarget: 'umd',
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
      },
      {
        test: /\.vue$/,
        use: 'vue-loader',
      },
    ],
  },
};

2. 创建第一个组件

现在，我们创建一个第一个组件。在src目录下创建一个Button.vue文件，内容如下：

<template>
  <button @click="handleClick">
    {{ msg }}
  </button>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello World',
    };
  },
  methods: {
    handleClick() {
      alert(this.msg);
    },
  },
};
</script>