准备工作

我们需要准备以下工具

• 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

1. npm install tailwindcss@3.3.5
   安装tailwind css 3.3.5 版本，不安装最新版本的原因是怕冲突，导致css样式失效。
2. npm install postcss autoprefixer，安装
3. npx tailwindcss init初始化tailwind css ，此时会多出一个文件tailwind.config.js，粘贴覆盖以下内容

  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}', // 根据项目类型调整
  ],
  theme: {
    extend: {}, // 自定义主题
  },
  plugins: [], // 添加插件
}

4. 配置tailwind.css
   在src/assets文件下建立文件tailwind.css，并粘贴以下内容

@tailwind base;
@tailwind components;
@tailwind utilities;

5. 配置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里的所有代码，只留下模板。