Online Judge——【前端项目初始化】Vue-CLI初始化项目、组件库引入

目录

一、创建项目

  • 输入命令: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" />

效果如下:

相关推荐
小飞悟9 分钟前
那些年我们忽略的高频事件,正在拖垮你的页面
javascript·设计模式·面试
绅士玖12 分钟前
📝 深入浅出 JavaScript 拷贝:从浅拷贝到深拷贝 🚀
前端
中微子22 分钟前
闭包面试宝典:高频考点与实战解析
前端·javascript
brzhang22 分钟前
前端死在了 Python 朋友的嘴里?他用 Python 写了个交互式数据看板,着实秀了我一把,没碰一行 JavaScript
前端·后端·架构
G等你下课1 小时前
告别刷新就丢数据!localStorage 全面指南
前端·javascript
该用户已不存在1 小时前
不知道这些工具,难怪的你的Python开发那么慢丨Python 开发必备的6大工具
前端·后端·python
爱编程的喵1 小时前
JavaScript闭包实战:从类封装到防抖函数的深度解析
前端·javascript
LovelyAqaurius1 小时前
Unity URP管线着色器库攻略part1
前端
Xy9101 小时前
开发者视角:App Trace 一键拉起(Deep Linking)技术详解
java·前端·后端
lalalalalalalala1 小时前
开箱即用的 Vue3 无限平滑滚动组件
前端·vue.js