2024-07-18-多多OJ评测系统-前端项目环境初始化-安装Vue脚手架-引入Arco-Design组件
目录
多多OJ评测系统 前端项目环境初始化 安装Vue脚手架 引入Arco Design组件
目录
确定环境
推荐的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
配置脚手架后我们先运行
先运行看看
我们这边能获取到网址
访问
代表的是项目运行成功
我们在前端工程化的时候实际上
我们有一些代码规范的校验
其实我们脚手架已经帮我们做到了
就是这个
接下来要引入相关的组件
选择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");
能正常启动
我们首先试着引入一个组件试试看
我们尝试引入日历
就说明我们的项目引入成功
成功了
个人号推广
博客主页
Web后端开发
Web前端开发
数据库开发
项目实战
算法与数据结构
计算机基础
回忆录
68747470733a2f2f62:6c6f672e6373646e2e6e65742f71715f33303530303537352f:61727469636c652f64657461696c732f313430353038363430