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

最新推荐文章于 2024-07-30 16:34:14 发布

八了个戒

最新推荐文章于 2024-07-30 16:34:14 发布

阅读量1.4k

点赞数 5

分类专栏： Vue 实战系列文章标签： vue 移动开发 icons vue.js app

本文链接：https://blog.csdn.net/XH_jing/article/details/116148358

版权

Vue 实战系列专栏收录该内容

22 篇文章 3 订阅

订阅专栏

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

项目仓库地址，欢迎 Star

项目基本结构搭建

项目整体架构

图片引用自 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>
```