在nuxt项目中引入fontawesome和echarts

写在前面

之前在nuxt里面引入fontawesome的时候,用的是别人封装好的组件nuxt-fontawesome,还写了在Nuxt项目中引入fontawesome记录下来操作方法,后面引入Echarts的时候,也是引用封装好的组件v-charts, 结果老大review代码的时候,全部否定,改用引入原生的fontawesome 和echarts,修改后,代码看着清晰简单,记录下。

引入fontawesome

参考官网上的setup,先安装。

npm:

1
npm install --save-dev @fortawesome/fontawesome-free

Yarn:

1
yarn add --dev @fortawesome/fontawesome-free

安装后,在assets/stylesheets目录下,新增文件fontawesome.scss

1
@import '@fortawesome/fontawesome-free/css/all.css';

最后配置下nuxt.config.js

nuxt.config.js的css 部分,添加如下代码:

1
2
3
4
 css: [
......
'~assets/stylesheets/fontawesome.scss'
],

修改配置后,重启。

大功告成,直接在页面使用即可,比如添加一个音乐的icon:

1
<i class="fas fa-music"></i>

引入echarts

安装:

npm:

1
npm install echarts --save

Yarn:

1
yarn add echarts

安装后,在需要使用Echarts的组件中,引入echarts,设置好配置项即可。

index.vue为例,组件中使用了柱状图:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
## pages/xxx/index.vue
<template>
<div id="echart" />
</template>

<script>
import echarts from 'echarts'

export default {
mounted() {
const barChartElement = this.$el.querySelector("#echart")
const barChart = echarts.init(barChartElement)
const options = {
title: {
text: '柱形图示例'
},
tooltip: {},
legend: {
data:['含糖量']
},
xAxis: {
data: ["苹果","橙子","西瓜","菠萝","雪梨","柿子"]
},
yAxis: {},
series: [{
name: '含糖量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}
barChart.setOption(options)
}
}
</script>

各个图表的详细配置可以参考Echarts文档

参考

Font Awesome

Echarts