目录
一、创建项目
- 输入命令：
vue create oj-frontend来到如下界面：
- 选择
Manually select features
- 选择如下图的组件：
注意空格是选择，之后回车即可。
- 选择
3.x版本
- 继续选择：
- 选择代码何时进行校验：选择
Lint on save
- 选择配置文件是否选择独立，建议选择独立，即第一个（
In dedicated config files）
- 最后选择是否将当前的配置保存为一个预设，这里我选择的是否
- 接着就创建成功了
- 之后再运行项目：
出现上面这个页面说明运行成功了。
二、前端工程化配置
为了保证代码开发过程中代码质量是过关的，我们需要配置一些代码检测、代码美化、代码格式化插件，而vue-cli脚手架帮我们配置了代码美化、自动校验、格式化插件等，无需再进行配置。比如Vue-CLI默认集成了ESLint，并且再创建项目时可以选择不同的ESLint配置。
而开发工具（这里使用的是WebStorm）默认的格式化和代码校验校验工具ESLint的配置不同
现在我们进行相关配置：
Settings->Prettier，配置如下：
之后打开eslint，配置如下：
配置完成之后如果在vue文件中按格式化快捷键（ctrl+alt+L）而没有进行报错，说明前端工程化配置成功。
三、引入组件
vue-router引入：由于创建项目时，vue-cli已经帮我们引入了，所以这里就不需要再次引入vue-router了。@arco-design/web-vue引入：@arco-design/web-vue是一个vue3的UI组件库，提供了多个UI组件，如按钮、表单、布局、导航等，可以用于构建现代化的web应用程序。
执行命令：npm install --save-dev @arco-design/web-vue
修改main.js文件
cpp
import { createApp } from "vue";
import App from "./App.vue";
import "@arco-design/web-vue/dist/arco.css";
import ArcoVue from "@arco-design/web-vue";
import router from "./router";
import store from "./store";
createApp(App).use(ArcoVue).use(store).use(router).mount("#app");现在检查一下是否引入成功，我们在这个UI组件库中随便找一个组件看看能够运行车成功：
我这里选择的是日历：<a-calendar v-model="value" />
效果如下：
