前端界面搭建

已于 2024-03-08 16:12:51 修改
阅读量139 收藏
点赞数 2
文章标签： 前端
于 2024-01-30 15:57:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2303_79474796/article/details/135933456
版权
本文指导如何在Vite项目中迁移Arco项目并解决依赖问题，包括设置package.json、Vite.config.ts，安装less和less-loader，配置别名以及处理VueCLI3中less变量错误，同时介绍了前端代码规范工具如ESLint、Prettier等的最佳实践。
摘要由CSDN通过智能技术生成

vite创建项目

将Arco项目的src文件夹复制过来

导入Arco Design Vue依赖和其他所有依赖

使用 npm run dev 可以看出来缺哪一个依赖

下面处理问题

  • 设置package.json设置（参考web开发总结文章）
  • 设置Vite.config.ts设置（参考web开发总结文章）
  • 项目中安装less和less-loader（参考web开发总结文章）
  • 设置vite 项目配置别名 @（很重要）（参考web开发总结文章）
  • vue cli3 全局使用less变量报错“Variable xxx is undefined”（参考web开发总结文章）
  • 前端代码规范最佳实践,开启高效开发之旅！(ESLint + Prettier + Stylelint + husky + lint-staged+Commitizen)  参照这个链接操作

https://zhuanlan.zhihu.com/p/682777421

  • 处理ESLint的问题（参考web开发总结文章）
KeepMoveOnWorld
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
快速搭建一个前端模板
weixin_50699509的博客
03-16 2720
之前写过好几个前端页面，都是从网上copy下来别人的模板，总是因为本案或者其他环境问题弄个半天，主要是影响心态，所以这次专门记录一下怎么快速生成一个前端模板； 1.下载并且安装打开 HBuilder X 这个软件 2.新建 3.然后 npm run serve 就这样了 访问浏览器 后续的代码编辑都在HelloWorld.vue这个文件里就OK ...
学会Web UI框架--Bootstrap，快速搭建出漂亮的前端界面
最新发布
景天科技苑
03-10 1万+
bootstrap是一个基于HTML、CSS和Javascript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件，bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。 Bootstrap诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架。 是一个用于快速开发Web应用程序和网站的前端框架。 Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷。
自己仿照5年前京东项目（前端界面搭建排版）不涉及后端
09-20
自己仿照5年前京东项目（仅前端界面搭建排版）不涉及后端，练习html5、css样式排版可参考 自己仿照5年前京东项目（仅前端界面搭建排版）不涉及后端，html5、css
vue 下拉框_前端页面的简单学习与项目搭建（主要针对HTML和VUE的学习）
weixin_39564368的博客
12-11 169
备注：只是本人的自学与备注，自己本身不是做前端的，只是简单搭建一些前端的东西，自己玩的。一、HTML简单的回顾（一）HTML 基本结构<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <!-- he...
前端页面开发
qq_45859377的博客
04-22 7550
前言 因为现如今的开发大部分都是前后端分离的开发，而这篇文章将主要讲的是前后端接口的对接过程。 一、前端的搭建 1、模板的引入 我这次项目引用的模板为vue-element-admi，这是一个基于vue-element-admin的一套后台管理系统基础模板。我将在这个模板的基础上进行二次开发。 GitHub地址：https://github.com/PanJiaChen/vue-element-admin 项目在线预览：https://panjiachen.gitee.io/vue-element-admi
谷粒学苑项目实战（七）：搭建前端页面
m0_49499183的博客
12-17 431
一、使用压缩模板文件 找到 vue-admin-template-master 压缩文件，解压后，将文件夹放到vscode的工作区 二、下载依赖 cmd进入文件夹目录下，使用命令下载依赖： npm install 这个命令可能会出现错误，如果出现错误，可以重试（这个命令需要首先安装node.js，网上有很多安装教程）； 也可以安装淘宝镜像： npm install -g cnpm -registry=https://re...
搭建项目前端页面环境
Leon_Jinhai_Sun的博客
08-01 221
vue-element-admin 简介 而vue-element-admin是基于element-ui的一套后台管理系统集成方案。 功能：https://panjiachen.github.io/vue-element-admin-site/zh/guide/#功能 GitHub地址：https://github.com/PanJiaChen/vue-element-admin 项目在线预览：https://panjiachen.gitee.io/vue-element-admin ...
精美的前端界面
05-08
【标题】"精美的前端界面"揭示了这个压缩包文件主要包含的是用于创建美观前端页面的设计资源。前端界面是用户与网站或应用交互的第一层，它不仅需要吸引眼球，还要提供直观、易用的用户体验。这里提到的"精美"可能指...
博客前端界面
12-22
【博客前端界面】是网页设计领域的一个基础项目，主要目标是创建一个简洁且具有自适应能力的用户界面，使得博客内容能在不同设备上流畅展示。这个项目非常适合初学者，可以帮助他们掌握基本的Web前端开发技能。 在...
小兔鲜项目前端界面编程
04-08
在“小兔鲜项目前端界面编程”中，我们主要探讨的是如何使用前端技术来构建一个交互式的、用户体验良好的在线购物平台。在这个项目中，HTML、CSS3和可能的JavaScript（虽然标签未明确提及，但在现代前端开发中是必不...
好看前端界面
12-25
【标题】"好看前端界面"揭示了这个项目的核心——它是一个设计美观的前端用户界面。在Web开发领域，一个优秀的前端界面是吸引用户并提供良好用户体验的关键。这可能包括精心设计的布局、色彩搭配、图标选择以及交互...
手把手教你搭建vue-cli前端页面【超详细教程】
xinin919的博客
06-23 3467
前端运行环境Node.js、npm工具、vue-cli脚手架项目、路由组件、ElementUI框架、Hbuilder
02---前端框架搭建
Zero摄氏度的博客
12-18 2400
1.该有的nodejs 、vue都要安装上，我用的是vuecli3，所以可以使用来创建项目（更加直观），当然你也可以采用命令行的方式创建项目。2.cmd命令行输入： vue ui3.在打开的可视化页面中，开始创建一个vue项目脚手架，插件可以先不勾选，到时候用什么再下，这里我选择的版本是vue2.0，而不是新版的3(因为3是最新版的有很多功能还不太熟悉，很多组件下载也不一样)，看个人习惯。
页面可视化搭建工具技术要点
weixin_33962621的博客
02-12 781
背景 页面可视化搭建工具, 是互联网公司中常见的运营工具, 实现了运营人员快速生成和发布页面, 提升页面上线效率; 且无需开发人员介入, 节省开发人力. 页面可视化搭建工具搭建出的页面示例: 但从零开始设计和开发出这种工具并不简单. 笔者维护的页面可视化搭建框架 pipeline, 提供了页面可视化搭建的核心功能, 免去从零实现页面可视化搭建工具的困难. 本文主要包含以下内容: 活动页面重复开...
Vue+Element-UI快速搭建前端界面
cbb944131226的博客
06-30 2万+
Vue+Element-UI快速搭建前端界面 文章目录Vue+Element-UI快速搭建前端界面主要参考：Vue主要使用总结概述组成v-model绑定数据v-for循环构造v-on:click点击处理beforeMount()Element-UI主要组件总结el-buttonel-inputel-menujs正则表达式进行合法性判断 主要参考： Vue官方文档 Element-UI官方文档 ...
项目搭建篇：前端界面（vue）
张中华的博客
10-16 739
新建vue项目： http://www.jianshu.com/p/de410cefd788 引入axios npm install axios -save 添加引用,main.js： import axios from 'axios' Vue.prototype.$http = axios 配置cofig下的index...
前端：1小时搭建简约漂亮的个人网站（Bootstrap）
热门推荐
bigname22的博客
02-03 6万+
1小时就能搭建这么简约漂亮的个人网站（Bootstrap） 有一个搭建自己个人网站的想法，把自己的一些技术文章、日记、创业想法等等统统寄托在这里。 后台前端统统来一套！ 首先是前端！ 先上这个长得好看的效果图。 概述 目前为只完成了该页面的UI开发，暂时没有实现与后台交互的功能。现在在学习ssm框架的搭建，争取过年前搞定后台的基本接口。然后把这个页面的登录、技术文章、随手记与后台交
使用div建立一个简单的前端页面
Future_LL的博客
03-28 3536
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;首页&lt;/title&gt; &lt;style type="text/css"&gt; /*取消文本的下划线*/ a{ text-decor
作为一个后端的开发人员如何快速搭建前端页面
WealChen的博客
03-21 3万+
今天分享一下对于那些不经常接触前端代码，主要业务放在Java、PHP、Android开发上的人员，自己又想开发一个网站或者系统的时候，怎么快速搭建出属于自己前端页面。其实就是借用别人写好的前端代码，直接拿过来修改，这样就节省了写前端代码的时间，让我们有更多的时间去专注后端服务器的开发，利用web浏览器可以轻易做到这一点。下面通过谷歌浏览器获取（偷取）已经写好的前端页面的代码，找到自己想要的页面下过...
vue前端举报界面搭建
03-29
1. 首先，我们需要创建一个Vue项目，可以使用Vue CLI来创建。 2. 安装需要的依赖：axios和element-ui。 ``` npm install axios element-ui --save ``` 3. 在main.js中引入axios和element-ui，并挂载到Vue实例上。 ```javascript import Vue from 'vue' import App from './App.vue' import router from './router' import axios from 'axios' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.prototype.$http = axios Vue.use(ElementUI) Vue.config.productionTip = false new Vue({ router, render: h => h(App) }).$mount('#app') ``` 4. 创建一个举报表单组件，并在其中引入element-ui的表单组件和按钮组件。 ```vue <template> <div class="report-form"> <el-form :model="reportForm" :rules="rules" ref="reportForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="举报类型" prop="type"> <el-select v-model="reportForm.type" placeholder="请选择举报类型" style="width:100%;"> <el-option label="色情低俗" value="1"></el-option> <el-option label="虚假信息" value="2"></el-option> <el-option label="诈骗信息" value="3"></el-option> </el-select> </el-form-item> <el-form-item label="举报原因" prop="reason"> <el-input type="textarea" v-model="reportForm.reason" placeholder="请输入举报原因"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('reportForm')">提交</el-button> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { reportForm: { type: '', reason: '' }, rules: { type: [ { required: true, message: '请选择举报类型', trigger: 'change' } ], reason: [ { required: true, message: '请输入举报原因', trigger: 'blur' } ] } } }, methods: { submitForm(formName) { this.$refs[formName].validate(valid => { if (valid) { this.$http.post('/api/report', this.reportForm).then(res => { if (res.data.code === 200) { this.$message.success('举报成功') this.$refs[formName].resetFields() } else { this.$message.error('举报失败') } }) } else { return false } }) } } } </script> <style scoped> .report-form { width: 500px; margin: 0 auto; } </style> ``` 5. 在路由中配置该组件的路径。 ```javascript import Vue from 'vue' import Router from 'vue-router' import ReportForm from './views/ReportForm.vue' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'report-form', component: ReportForm } ] }) ``` 6. 在后端创建一个举报接口，并在前端调用该接口来提交举报信息。 ```javascript const express = require('express') const app = express() const bodyParser = require('body-parser') app.use(bodyParser.urlencoded({ extended: false })) app.use(bodyParser.json()) app.post('/api/report', (req, res) => { console.log(req.body) res.json({ code: 200, message: '举报成功' }) }) app.listen(3000, () => { console.log('服务器已启动') }) ``` 至此，一个简单的举报界面的搭建就完成了。当用户填写完举报表单并提交后，数据会通过axios发送到后端，后端会接收到该数据并进行相应的处理，最后返回成功或失败的结果给前端。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值