基于vue3和flask开发的前后端管理系统（一）：项目启动准备

准备工作

我们需要准备以下工具

vue3：构建前端 tailwind css：样式库vite：快速构建vue项目pinia ：vue3 的事件管理器 flask：后端代码Mysql：数据库 heidisql：数据库图形化界面 vscode：用来运行前端代码 vue 插件 pycharm ：用来跑后端服务器chrome：用来预览整个项目，edge上的vue插件比较垃圾 vue.devtools：谷歌浏览器的插件，针对vue开发十分有用 前端 2.1 利用vite新建一个vue项目

在终端里输入以下命令

PS C:\Users\24343\PycharmProjects\TEST> npm create vite@latest csdntest --template vue//安装最新的vite版本，并构建vue3 > npx > create-vite csdntest vue │ ◇ Select a framework: │ Vue │ ◇ Select a variant: │ JavaScript │ ◇ Scaffolding project in C:\Users\24343\PycharmProjects\TEST\csdntest... │ └ Done. Now run: cd csdntest npm install //安装依赖 npm run dev // 启动项目

vscode打开对应文件夹进入前端项目，内容如下：

注意一定要把升到一个高的版本，因为vitejs/plugin-vue@5.2.1需要5.0以上的版本，不然不兼容

2.2 安装tailwind css npm install tailwindcss@3.3.5 安装tailwind css 3.3.5 版本，不安装最新版本的原因是怕冲突，导致css样式失效。npm install postcss autoprefixer，安装npx tailwindcss init初始化tailwind css ，此时会多出一个文件tailwind.config.js，粘贴覆盖以下内容 content: [ './index.html', './src/**/*.{vue,js,ts,jsx,tsx}', // 根据项目类型调整 ], theme: { extend: {}, // 自定义主题 }, plugins: [], // 添加插件 } 配置tailwind.css 在src/assets文件下建立文件tailwind.css，并粘贴以下内容 @tailwind base; @tailwind components; @tailwind utilities; 配置postcss.config.js export default { plugins: { tailwindcss: {}, autoprefixer: {}, }, }; 2.3 安装pinia

npm install pinia@latest 进行安装

2.4 杂项

删除默认项目的不需要的东西，例如删除src/components里的helloworld.vue文件，和/src/assets里的vue.svg文件。以及清空app.vue里的所有代码，只留下模板。