01.目标
我在后端有zdppy这个框架, 实现了零依赖这个伟大的目标, 实现了轻量级, 低代码开发, 能够极大的提高开发效率, 我现在想要在前端通过vue3来复现这一个伟大的目标, 而这个目标的起点, 就是这个用户管理系统.
在这个用户管理系统中, 我要先实现不依赖任何ui组件库和样式库, 来实现对员工数据的渲染, 增加, 删除, 修改, 分页等常见的基础操作, 而我也将会用笔记的方式把这个步骤完整的记录下来, 最后再录制成录播课, 还有直播课.
希望我能够完成这一个目标, 也希望在此过程中, 能够帮助到那些想要学习Python+Vue全栈开发的同学.
02.搭建前端环境
前端环境我不会选择ts, 我会选择更简单的js, 首先, 基于vite创建一个前端基础环境:
npm init vite
到了这一步以后, 我们能够拿到vite+vue的一个基础的demo, 不要着急打开, 因为我此时创建了一个叫zdpui的项目, 我想要把我封装的样式, js代码, 以及一些组件放到这个项目中, 而从本质上来讲, 我希望这个项目就是一个纯粹的vue项目, 后面可以通过复制粘贴的形式, 复制里面的某个模块, 实现代码的复用.
在此之前, 我已经提前把zdpui的仓库建立好,然后拉取到本地了.
git clone git@gitee.com:zhangdapeng520/zdpui.git
然后, 我选择把刚才创建的demo里面的代码复制到zdpui里面去.
实际上, 最终我只留下了这几个文件:
我先稍加修改一下.
03.初始代码
我对代码进行了简单的修改, 初始代码如下.
index.html
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>zdpui</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
package.json
{"name": "zdpui","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vite build","preview": "vite preview"},"dependencies": {"vue": "^3.5.13"},"devDependencies": {"@vitejs/plugin-vue": "^5.2.1","vite": "^6.0.5"}
}
vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],
})
src/main.js
import { createApp } from 'vue'
import App from './App.vue'const app = createApp(App)
app.mount('#app')
src/App.vue
<template><div>zdpui</div>
</template>
然后, 安装依赖:
pnpm i
配置一个启动项:
启动项目:
浏览器访问: http://localhost:5173/
