01 自研zdpui项目的启动

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

<meta charset="UTF-8"/>

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<title>zdpui</title>

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

<div>zdpui</div>

然后, 安装依赖:

pnpm i

在这里插入图片描述

配置一个启动项:

在这里插入图片描述

启动项目:

在这里插入图片描述

在这里插入图片描述