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

2024-07-18 09:38:04
开发
22

确定环境

命令行输入

装一下脚手架

确定环境

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

npm版本为9.5.1

命令行输入

node -v
npm -v

初始化工具

Vue - cli

装一下脚手架

npm install -g @vue/cli

监测一下是否安装成功

版本为5.0.8

如果找不到命令

要去重新配置环境变量

创建一个项目

vue create Dduooj

选择一系列的配置后

就会进行安装

创建一个项目

我们打开webStorm

配置脚手架后我们先运行

先运行看看

我们这边能获取到网址

访问

代表的是项目运行成功

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

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

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

就是这个

接下来要引入相关的组件

Arco Design - 企业级产品的完整设计和开发解决方案

选择vue的组件库

查看文档

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

选择用npm进行安装

安装成功

我们建议的是完整引入

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

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://blog.csdn.net/qq_30500575/article/details/140508640 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1813750049876873216.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部