nuxt中正确的引包方式。
写在前面
之前在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文档。