d2项目插件组件引入

1.新建的项目的初始目录

再创建以下几个目录

• src/api 目录
  • 存储接口封装
• src/utils 目录
  • 存储一些工具模块
• src/styles 目录
  • index.less 文件，存储全局样式
  • 在 main.js 中加载全局样式 import ‘./styles/index.less’

调整之后的目录结构如下。

.                                 
├── README.md                     
├── babel.config.js               
├── package-lock.json             
├── package.json                  
├── public                        
│   ├── favicon.ico               
│   └── index.html                
└── src                           
    ├── api
    ├── App.vue                   
    ├── assets                    
    ├── components                
    ├── main.js                   
    ├── router
    ├── utils
    ├── styles
    ├── store                     
    └── views

1. 将项目目录结构调整后更新到远程仓库
   git add .
   git commit -m ‘项目目录结构初始化’
   git push
   将本地仓库代码与远程仓库代码保持一致

导入图标素材

05-项目初始化-导入图标素材

制作字体图标的工具有很多，在这里推荐使用：https://www.iconfont.cn/。

一、注册账户

直接选择第三方登录即可

二、创建项目

三、上传图标到项目

四、生成链接

五、配置到项目中使用

1. 在styles目录下创建icon.less,将对应的图标样式代码复制过来

2. 在mian.js(入口文件）中引用图标样式
   // 全局样式文件

   // 加载图标样式图标
   import './iconfont.css';
   

3. 在App.vue中使用字体图标

<div id="app">
       <router-view/>
       <i class="toutiao toutiao-lishi"></i>//类名根据你iconfont.css中的类名来决定
   </div>

4. 将资料中的素材图片复制到自己项目的assets文件夹中，并将favicon.ico剪切到public目录下，替换默认的ico

一种方式是将 SVG 图标 包装为 Vue 组件来使用。

一种方式是将 SVG 制作为字体图标来使用：

引入 Vant 组件库

Vant 是有赞商城前端开发团队开发的一个基于 Vue.js 的移动端组件库，它提供了非常丰