移动端社区 wordpress广州网站优化服务商
准备工作
我们需要准备以下工具
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 csdntestnpm 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里的所有代码，只留下模板。