目录

2024-07-18-多多OJ评测系统-前端项目环境初始化-安装Vue脚手架-引入Arco-Design组件

多多OJ评测系统 前端项目环境初始化 安装Vue脚手架 引入Arco Design组件

目录


确定环境

推荐的node js版本为为18 或者 16

npm版本为9.5.1

https://i-blog.csdnimg.cn/direct/e84d54b99c9b4da2b0f88e238dcd1c38.png

命令行输入

node -v
npm -v

初始化工具

Vue - cli

装一下脚手架

https://i-blog.csdnimg.cn/direct/2f595250f8324bae9d362e076906daf8.png

npm install -g @vue/cli

https://i-blog.csdnimg.cn/direct/3a11482b109a4ecdbc5016a98e0c3a0e.png

https://i-blog.csdnimg.cn/direct/0a5caad44fc345d89b10880522dc6dc0.png

监测一下是否安装成功

版本为5.0.8

https://i-blog.csdnimg.cn/direct/29c8362b18154cdc9d32928c4c63ac4f.png

如果找不到命令

要去重新配置环境变量

创建一个项目

vue create Dduooj

https://i-blog.csdnimg.cn/direct/3a4dd59c56e4414dae4f9008c91d6557.png

选择一系列的配置后

就会进行安装

创建一个项目

https://i-blog.csdnimg.cn/direct/ad4b4440bc6e45639c5494ac9be60927.png

我们打开webStorm

https://i-blog.csdnimg.cn/direct/c5057a76776349bc83db9b5fe4f6700b.png

配置脚手架后我们先运行

先运行看看

https://i-blog.csdnimg.cn/direct/902181e4007048e4b570f32cb259c04e.png

我们这边能获取到网址

https://i-blog.csdnimg.cn/direct/190d4d17be344137922adf63e49bac6b.png

访问

https://i-blog.csdnimg.cn/direct/78e6a9391bc44961a0d0941906c1641c.png

代表的是项目运行成功

我们在前端工程化的时候实际上

我们有一些代码规范的校验

其实我们脚手架已经帮我们做到了

就是这个

https://i-blog.csdnimg.cn/direct/d9b27140ed384ff2b9df455521321666.png

接下来要引入相关的组件

选择vue的组件库

查看文档

https://i-blog.csdnimg.cn/direct/70b26ae501a84591a68a1e056c1e1068.png

# npm
npm install --save-dev @arco-design/web-vue

选择用npm进行安装

https://i-blog.csdnimg.cn/direct/1dd6209d80c24ea992d4fd8edef728b2.png

安装成功

https://i-blog.csdnimg.cn/direct/73ec6a5adc744e51b327171db8703875.png

我们建议的是完整引入

https://i-blog.csdnimg.cn/direct/30ee13e6d3554d93bc52104b11c739c6.png

import { createApp } from 'vue'
import ArcoVue from '@arco-design/web-vue';
import App from './App.vue';
import '@arco-design/web-vue/dist/arco.css';

const app = createApp(App);
app.use(ArcoVue);
app.mount('#app');

加到main.ts文件里面

改变main js

https://i-blog.csdnimg.cn/direct/c07e57ccab7047e591070b1b280b8dc8.png

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ArcoVue from '@arco-design/web-vue';
import '@arco-design/web-vue/dist/arco.css';

createApp(App).use(ArcoVue).use(store).use(router).mount("#app");

能正常启动

https://i-blog.csdnimg.cn/direct/7b1e8e21dfdf4f30afcf5eb9f00b4400.png

我们首先试着引入一个组件试试看

我们尝试引入日历

就说明我们的项目引入成功

https://i-blog.csdnimg.cn/direct/2993e4419a28421aa4ab66b22d6345f5.png

成功了

个人号推广

博客主页

Web后端开发

Web前端开发

数据库开发

项目实战

算法与数据结构

计算机基础

回忆录

68747470733a2f2f62:6c6f672e6373646e2e6e65742f71715f33303530303537352f:61727469636c652f64657461696c732f313430353038363430