Vue.js 实战系列之实现视频类WebApp的项目开发——2. 搭建项目基本骨架

如果想看该实战系列的其他内容，请移步至 Vue.js 实战系列之实现视频类WebApp的项目开发。

项目仓库地址，欢迎 Star

---

项目基本结构搭建

1. 项目整体架构
   

图片引用自 https://xiaozhuanlan.com/topic/3682047591

2. 项目目录说明

   |- assets                    资源文件夹
         |--- fonts                   图标字体 阿里图标字体
         |--- icons                   项目图标
         |--- style                   封装的公共样式    
   |- common                    公共文件夹
         |- componments               封装的组件文件夹
         |- mixins                    封装的mixins文件夹
         |- directives                封装的directives文件夹
         |- styles                    公共样式文件夹
   |- layouts                   整个应用的布局文件
   |- middlewares               中间件
   |- modules                   应用的核心文件夹
   |- router                    路由
   |- store                     vuex 状态管理
   |- utils                     工具类
   |- views                     视图页面
     main.js                    vue项目入口
     App.vue                    根页面
     .eslint.js                 eslint配置文件
     babel.config.js            解析babel的配置文件
     vue.config.js              webpack配置文件
   

3. 配置字体图标

   在该项目中引入阿里图标字体 iconfont.cn

   1. 为什么采用图标字体

      常规的本地图标加载会增加很多额外的 “http请求”，这将会大大降低网页的性能。
      另外，图片还有一个缺点就是不能很好的进行 “缩放”，有时候在 “响应式设计” 中需要使用图像的最好解决方案就是不去使用图片。

   2. 阿里图标库的使用

      1. 打开 阿里图标库官网
         

      2. 根据实际需求，选择对应的图标，并添加到购物车
         

      3. 将购物车里面的图标 添加至项目，加入已有的项目列表中
         

      4. 拷贝项目下面生成的 fontclass 在线代码，添加到项目的 fonts 文件夹下：

         //at.alicdn.com/t/font_8d5l8fzk5b87iudi.css
         

         

      5. 在 mian.js 文件中导入该字体库

         import './assets/fonts/iconfont.css';
         

      6. 挑选相应图标并获取类名，应用于页面即可使用

         <i class="iconfont icon-xxx"></i>
         

---

总结

该章节主要介绍了项目的整体架构和项目对应的目录说明，另外着重讲解了在 vue 中如何使用阿里图标库 iconfont 配置字体图标以及为什么在项目中要使用字体图标。

---

上一章节： 项目初始化

下一章节： 底部状态栏实现(实现原生APP 底部导航栏)

项目整体介绍：Vue.js 项目实战之实现视频播放类WebApp的项目开发（仿抖音app）

---

项目仓库地址，欢迎 Star。

有任何问题欢迎评论区留言讨论。