乐意购项目前端开发 #3

一、icon的使用

前往网站挑选要的图标

iconfont-阿里巴巴矢量图标库https://www.iconfont.cn/?spm=a313x.manage_type_myprojects.i3.2.2f173a81fQSVOU

创建项目添加图标

选择Font Class 下载到本地

解压后会看到这个页面

在asserts目录下创建iconfont目录,然后将最底下的6个文件拉进去

在main.js添加

import "@/assets/iconfont/iconfont.js"
import "@/assets/iconfont/iconfont.css"

基本使用

方法一

 是在iconfont页面

方法二

打开iconfont.css文件,修改名称

如何使用

二、对特定颜色进行命名

在styles下创建var.scss

$lygColor: #ffd000;
$helpColor: #e26237;
$sucColor: #f9d11e;
$warnColor: #ff9204;
$priceColor: #d44040;

在vue.config.js中添加配置

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  transpileDependencies: true,
  lintOnSave: false,//关闭语法检测
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver({
          importStyle: "sass"
        })],
      }),
      Components({
        resolvers: [ElementPlusResolver({
          importStyle: "sass"
        })],
      }),
    ],
  },
  css: {
    loaderOptions: {
      scss: {
      	// 这里是修改默认样式的scss文件
        additionalData: `
        @use "@/styles/element/index.scss" as *;
        @use "@/styles/var.scss" as *;
        `,
      },
    },
  }
}

三、搭建首页组件结构

效果预览:

创建三个vue文件

在Layout目录下创建component目录, 然后创建 LayoutNav.vue , LayoutHeader.vue , LayoutFooter.vue 三个文件

LayoutNav.vue

LayoutHeader.vue

LayoutFooter.vue

修改 Layout/index.vue 文件

最后运行项目, 如果页面上没有图标, 应该是iconfont.css文件没有修改

.icon-search:before {
  content: "\e752";
}

.icon-weibo:before {
  content: "\e600";
}

.icon-weixin:before {
  content: "\e601";
}

.icon-quality:before {
  content: "\e602";
}

.icon-jiage:before {
  content: "\e603";
}

.icon-kefu:before {
  content: "\e67a";
}

.icon-question:before {
  content: "\e613";
}

.icon-wuliu:before {
  content: "\e614";
}

.icon-user:before {
  content: "\e678";
}