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。
在使用日期时，如果需要使用中文的日期显示，则需要引入中文配置。
网络异常，图片无法展示
|
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 }; }
不光可以写到同一文件内，还可以将方法写到一个文件内，使用导入导出的方式引用所需方法。
作者：ClyingDeng
链接：https://juejin.cn/post/6926735663882567694
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
