案例开发-前端环境搭建| 学习笔记

简介: 快速学习案例开发-前端环境搭建。

开发者学堂课程【Spring Boot+Vue.js+FastDFS实现分布式图片服务器 :案例开发-前端环境搭建】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/742/detail/13147


案例开发-前端环境搭建

 

前端页面通过 html,再通过 Vue.Js 前端框架实现。

1. 创建前端工程  使用 webstorm 创建前端工程

(1)打开 webstorm

在 code 中的 fastDFSTest01 中创建目录 fastdfs-ui(前端)

使用 webstorm 打开此目录,并创建新的 css.js文档

image.png

因为需要采用 vue.js 方法,则需要从 vue 官方下载 vue.js 包以及 element-ul(上传图片会采用 element-ui 实现),接下来使用组件的时候会进行介绍。

(2)需要将提供的 js 库以及 element-ui 库拷贝到工程当中。

资料/前端库 /css  复制拷贝到 css 中(ui 库)

image.png

资料/前端库/js  复制拷贝到 js 中(vue 库)

(3)在将来,用户会访问到 upload.Html 网页进行上传图片,所以创建 upload.html 文件,这是一个 h5 页面,对刚才导入的库进行引用。

<link rel="stylesheet” href="css/el/index.css”/>

<script src="js/vue/vue.min.js">

</script><script src="css/el/index.js"></script>

image.png

以上全部环境已经搭建完毕。

相关文章
|
21天前
|
前端开发 编解码 数据格式
浅谈响应式编程在企业级前端应用 UI 开发中的实践
浅谈响应式编程在企业级前端应用 UI 开发中的实践
20 0
浅谈响应式编程在企业级前端应用 UI 开发中的实践
|
1月前
|
JavaScript 前端开发 Java
纯前端JS实现人脸识别眨眨眼张张嘴案例
纯前端JS实现人脸识别眨眨眼张张嘴案例
48 0
|
1月前
|
开发框架 前端开发 JavaScript
前端框架演进史:从HTML到现代化开发
前端框架演进史:从HTML到现代化开发
34 0
|
1月前
|
前端开发 开发者
探索前端技术的新趋势:Web组件化开发
【2月更文挑战第11天】 在这篇文章中,我们将深入探讨Web组件化开发的概念及其对前端开发领域的影响。不同于传统的摘要方式,我们通过一个故事来引入主题:想象在一个快速变化的数字世界里,有一座由各种小型、独立、可复用的建筑块构成的城市,每个建筑块都拥有独特的功能和风格,它们可以自由组合,创造出无限可能的城市景观。这座城市,就像是使用了Web组件化开发技术的前端项目。接下来,我们将详细探讨Web组件化开发的优势、实现方式以及面临的挑战,为前端开发者提供一个全面的视角来理解和应用这一重要的技术趋势。
62 5
|
13天前
|
小程序 前端开发 JavaScript
小程序全栈开发:前端与后端的完美结合
【4月更文挑战第12天】本文介绍了小程序全栈开发,涵盖前端和后端的关键点。前端使用WXML和WXSS进行页面结构和样式设计,JavaScript处理逻辑及组件使用;后端采用Node.js等语言处理业务逻辑、数据库设计和API接口开发。前端与后端通过数据交互实现结合,采用前后端分离模式,支持跨平台运行。调试测试后,提交微信审核并上线运营。掌握前端后端结合是小程序成功的关键。
|
1月前
|
前端开发 数据可视化 搜索推荐
数据驱动的前端设计与开发实践
本文将介绍如何在前端设计与开发中充分利用数据驱动的方法,通过数据分析、用户行为追踪和可视化等手段,指导前端界面设计和功能开发,提高用户体验和产品质量。
|
1月前
|
前端开发 JavaScript NoSQL
从前端到后端:构建全栈开发的技术生态
本文将探讨如何在全栈开发中构建完整的技术生态,从前端到后端各个层面进行深入剖析,讨论不同技术之间的协作与整合,为开发人员提供全面的指导与启示。
|
1月前
|
前端开发 JavaScript Apache
web前端-Echarts-5.3安装配置和案例
web前端-Echarts-5.3安装配置和案例
|
8月前
|
Web App开发 前端开发 JavaScript
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
95 0
|
8月前
|
前端开发 定位技术
前端学习笔记202305学习笔记第二十三天-地图单线程配置
前端学习笔记202305学习笔记第二十三天-地图单线程配置
64 0
前端学习笔记202305学习笔记第二十三天-地图单线程配置