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

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

2021-04-28 18:17 300人阅读评论(0)

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

项目基本结构搭建

项目整体架构

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

项目目录说明

|- 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配置文件

配置字体图标

在该项目中引入阿里图标字体 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>
```