2024技能大赛Vue流程复现

1. 关于版本的控制

1. @vue/cli 5.0.8
2. vscode 最新下载版本

2.  创建vue@cli项目

    若没有安装vue@cli则可以先安装

npm install -g @vue/cli    # 默认下载最新版本。vue --version
vue -V    # 查看版本，两个选一

使用vuecli来创建一个新的vue项目，vs code打开终端并且输入（ctrl + j）

vue create competition    # 创建cli项目

选择vue3，并且进行正常创建。

这里vscode终端控制台老是卡顿，所以采用cmd的形式

 等待完成

 

然后cd到competition中去

 得到以下入口

 

├── node_modules/          # 项目依赖
├── public/                # 静态文件，包含 `index.html`
├── src/                   # 源代码
│   ├── assets/            # 静态资源（如图片、样式等）
│   ├── components/        # Vue 组件
│   ├── views/             # 页面视图
│   ├── App.vue            # 根组件
│   └── main.js            # 项目的入口文件
├── package.json           # 项目配置文件，包含依赖和脚本
└── .gitignore             # Git 忽略文件

 2.1 安装axios

找到项目目录下，并且执行 npm install axios

 

 是script中引入axios

import axios from 'axios';

然后开始通过异步的方式进行请求，以提高加载速度。(特殊情况若加载高于请求速度则需要尽可能更改钩子函数或者同步加载）

启动服务。

在控制台输入npm run serve，等待build完成之后自行启动。

 

 此时并没有地方访问组件，我们需要在App.vue中引入我们的组件并且进行访问。