vite

此次使用vite工具代替之前使用的打包工具。vite是一款意图取代webpack的工具。利用es6的import会发送请求去加载文件的特性，拦截这些请求，做一些预编译处理，省去webpack冗长的打包时间。
与vue-cli3最大的区别就是：在创建项目时，可以非常快速的完成，在完成后再去安装运行项目的依赖。

安装vite

npm i -g create-vite-app

利用vite创建vue3

create-vite-app project

安装依赖运行项目

yarn add
yarn run dev

element-plus

进入element-plus官网，根据步骤安装element-plus。
在使用日期时，如果需要使用中文的日期显示，则需要引入中文配置。在main.js中引用：

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import locale from 'element-plus/lib/locale/lang/zh-cn'
createApp(App).use(ElementPlus, { locale }).mount('#app');

由于使用的是vite，则还需要额外在vite.config.js中配置：

import path from 'path';
export default {
    alias: {
        "@": path.resolve(__dirname, 'src'),
    },
    optimizeDeps: {
        include: ["element-plus/lib/locale/lang/zh-cn"],
    },
}

alias是配置的路径别名。

vue3

在vue3中使用element-plus与element2类似，直接拷贝你需要的组件，在scsript中定义所需要的业务数据和逻辑。

  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"> </el-table-column>
    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
    <el-table-column prop="address" label="地址"> </el-table-column>
    <el-table-column label="操作" width="100">
      <template #default="scope">
        <el-button
          @click="removeClick(scope.$index, scope.row)"
          type="text"
          size="small"
          >
          删除
          </el-button>
      </template>
    </el-table-column>
  </el-table>

在setup中，定义需要的数据和方法：

setup() {
	let state = reactive({
      // reactive支持数组、object变化
      tableData: [
        {
          id: "1",
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      	...
      ],
    });
    let removeClick = (index, row) => {
      state.tableData = state.tableData.filter((item) => row.id !== item.id);
    };
     return {
      ...toRefs(state),
      removeClick
      };
}

导入响应的vue依赖，使用toRefs解构state中数据，就可以在template直接使用state中的变量。然而这样的写法与vue2差不多，都是先定义数据在实现业务逻辑。
除了上面的写法，还可以将数据和逻辑包装到一个方法里，真正实现数据、业务的整合。

export default {
  setup() {
    let { state, removeClick } = useRemove();
    return {
      ...toRefs(state),
      removeClick,
    };
  },
};
function useRemove() {
  let state = reactive({
    // reactive支持数组、object变化
    tableData: [
      {
        id: "1",
        date: "2016-05-02",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1518 弄",
      },
      ...
    ],
  });
  let removeClick = (index, row) => {
    state.tableData = state.tableData.filter((item) => row.id !== item.id);
  };
  return { state, removeClick };
}

不光可以写到同一文件内，还可以将方法写到一个文件内，使用导入导出的方式引用所需方法。

一个简单的vue3 table Demo