项目初始化-准备工作

项目初始化相关

1.ElementUi安装

1.项目下载element-ui包

npm i element-ui -S

2.在main.js中引入element

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Element)

3.重启项目
4.用一下element的组件测试一下是否安装成功

<el-button type="primary">哈哈打不到我吧~</el-button>

成功引入element-ui~

2.sass/scss安装引入

vue3 下载安装sass/scss

3.font字体包引入

1.下载字体包ttf 将文件放入assets里新建的fonts文件夹

3.当前fonts目录新建fonts文件，fonts.css文件：

@font-face {
    font-family: 'AlibabaPuHuiTi-2-35-Thin';
    src: url('AlibabaPuHuiTi-2-35-Thin.ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'AlibabaPuHuiTi-2-45-Light';
    src: url('AlibabaPuHuiTi-2-45-Light.ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'AlibabaPuHuiTi-2-55-Regular';
    src: url('AlibabaPuHuiTi-2-55-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'AlibabaPuHuiTi-2-65-Medium';
    src: url('AlibabaPuHuiTi-2-65-Medium.ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'AlibabaPuHuiTi-2-75-SemiBold';
    src: url('AlibabaPuHuiTi-2-75-SemiBold.ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'AlibabaPuHuiTi-2-85-Bold';
    src: url('AlibabaPuHuiTi-2-85-Bold.ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'AlibabaPuHuiTi-2-95-ExtraBold';
    src: url('AlibabaPuHuiTi-2-95-ExtraBold.ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'AlibabaPuHuiTi-2-105-Heavy';
    src: url('AlibabaPuHuiTi-2-105-Heavy.ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'AlibabaPuHuiTi-2-115-Black';
    src: url('AlibabaPuHuiTi-2-115-Black.ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'PingFang SC-Regular';
    src: url('PingFang\ SC-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

3.使用：

font-family: AlibabaPuHuiTi-2-95-ExtraBold;