在nuxt项目中引入fontawesome和echarts

写在前面

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

引入fontawesome

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

npm:

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

Yarn:

yarn add --dev @fortawesome/fontawesome-free

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

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

最后配置下nuxt.config.js

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

  css: [
    ......
    '~assets/stylesheets/fontawesome.scss'
  ],

修改配置后,重启。

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

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

引入echarts

安装:

npm:

npm install echarts --save

Yarn:

yarn add echarts

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

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

## 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