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/
在这里插入图片描述
