项目构建
本科期间因为学过相关课程，已经配好了相关的环境，所以直接进行了版本确认。
一、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-2allfirst_rank_ecpm_v1~rank_v31_ecpm-1-86064204-null-null.142v73insert_down1,201v4add_ask,239v2insert_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
