开发者学堂课程【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文档
因为需要采用 vue.js 方法,则需要从 vue 官方下载 vue.js 包以及 element-ul(上传图片会采用 element-ui 实现),接下来使用组件的时候会进行介绍。
(2)需要将提供的 js 库以及 element-ui 库拷贝到工程当中。
资料/前端库 /css 复制拷贝到 css 中(ui 库)
资料/前端库/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>
以上全部环境已经搭建完毕。