Vue前端Flask后端

项目构建

本科期间因为学过相关课程，已经配好了相关的环境，所以直接进行了版本确认。

一、Vue2

1. 前端环境确认

Vue：@3.2.47 |

踩过的坑使用1的时候一直为empty，加 -g仍是empty
在项目下1，非项目下要用2

1$ npm info vue
2$ npm list vue

Vue脚手架：3.10.0

1$ vue -V
2$ vue --version

Nodejs：v14.15.4

$ node -v

2. 创建项目

$ vue init webpack frontend

注意这是👆vue2创建项目的口令！！！！！后来导入element-plus报错是我因为我创建错了vue的项目版本

报错：
Command vue init requires a global addon to be installed.
Please run npm install -g @vue/cli-init and try again.
解决：按所给提示
npm install -g @vue/cli-init

成功：

括号中是默认给的选项，如果同意直接空格就可以，否则可以直接键入

配置完成

可以执行npm run dev看是否正常

3.安装element-ui

$ npm i element-ui -S

在 vue-cli 帮我们生成的目录中/src/main.js中导入ElementUI

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

最后使用

Vue.use(ElementUI)

4.安装axios

因为是前后端分离的应用，所以还要安装请求的库axios。axios 是基于 promise 的 HTTP 客户端。

$ npm install --save axios

同样在/src/main.js导入axios

import axios from 'axios'

注册axios

Vue.prototype.axios = axios

安装失败，用👇这个，安装成功
npm install axios --save --legacy-peer-deps

5.编写页面

一、Vue3

1. 前端环境确认

Vue：@3.2.47 |

踩过的坑使用1的时候一直为empty，加 -g仍是empty
在项目下1，非项目下要用2

1$ npm info vue
2$ npm list vue

Vue脚手架：3.10.0

1$ vue -V
2$ vue --version

Nodejs：v14.15.4

$ node -v

2. 创建项目

$ vue create 项目名字

3.安装element-ui

$ npm install element-plus --save

在 vue-cli 帮我们生成的目录中/src/main.js中导入ElementUI

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

运行时候可能报错：具体如下
https://blog.csdn.net/PGY0000/article/details/86064204?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167731988316800184171118%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=167731988316800184171118&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allfirst_rank_ecpm_v1~rank_v31_ecpm-1-86064204-null-null.142^v73insert_down1,201^v4add_ask,239^v2insert_chatgpt&utm_term=Errors%3A%20%20%205%20%20http%3A%2F%2Feslint.org%2Fdocs%2Frules%2Findent%20%20%201%20%20http%3A%2F%2Feslint.org%2Fdocs%2Frules%2Fno-trailing-spaces%20%20%201%20%20http%3A%2F%2Feslint.org%2Fdocs%2Frules%2Feol-last&spm=1018.2226.3001.4187