需要解决的问题

上一章主要大概介绍了Nuxt3的安装和基本使用，路由和组件配置看文档足够，但是在实际开发中还有几个痛点要去解决，我总结了下要改造的地方，大概是如下几点：

项目需要的插件怎么导入使用（文档并不是很清晰）？
对于接口的调用使用方法。（因为改造的项目不是要做全栈，只是要用它做SSR加载页面，并不牵扯到操作数据库，开发接口和设置权限等后端逻辑）
页面使用的静态资源怎么引入，比如cdn和一些外部资源
打包上线部署问题（文档只是给了部分环境的部署，还是要根据运维的实际情况来做）

插件引入问题

文档提供

文档大概简单讲了怎么创建怎么简单配置，包括最后给了一个安装vue-gtag插件的示例。

那么我们现在开始就把自己项目的插件放进去试一下，目前项目用到的ui框架是vant，还有echarts图表插件

vant

1.创建plugins子文件-vantconfig.ts文件

// vantconfig.ts
import { defineNuxtPlugin } from '#app';
import vant from 'vant';
import 'vant/lib/index.css';

export default defineNuxtPlugin(nuxtApp => {
    // Doing something with nuxtApp
    nuxtApp.vueApp.use(vant)
  })

// App.vue
<template>
  <div style="text-align: center;">
    <h1 >试试按钮样式</h1>
    <van-button type="primary">主要按钮</van-button>
  </div>
</template>

我这里是全局引用，用yarn dev跑了一下搞定！

echarts

照猫画虎，在plugin里面继续新建echarts

// plugins/chart.js
import * as echarts from 'echarts'; // echarts 按需引入

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.config.globalProperties.$echarts = echarts
});

可是这时候一个大坑来了~ 跑yarn dev的时候，直接报错了

填坑

根据字面意思，是我引入的有问题，问过度娘我发现大概是两种办法

一个是改变package.json里的配置，加一行 "type": "module",
不能全局引入需要，按需引入echarts组件。。。结果这两个方法全部无用~~~ 看来只能动用官方力量了

提问

上github的issues提问

这里要跟nuxt团队点个赞，很快得到了大神的回复~~

解释一下：引入的插件模块是ESM 没有被命名，所以需要去nuxt.config里面配置一下，而且给到了一个链接

要在nuxt.config里面配置build/transpile，当前是echarts，所以我把名字换了一下

import { defineNuxtConfig } from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
    build: {
        transpile: [
            'echarts',
            'vant'
        ],
      },
})

这里还有一个坑，就是你一旦使用了build添加的插件都要去注册一下，要不然熟悉的错误还会出现，所以之前不用这种方式引用的vant也要写进去。。。 dev跑一下，搞定！添加个图表试一下：

// page下面定义一个index.vue
<template>
    <div>
        <div id="myEcharts"></div>
    </div>
</template>

<script setup>
     import { ref, onMounted, defineEmits, defineProps, defineExpose, reactive, getCurrentInstance, watch ,watchEffect} from "vue";
     const instance = getCurrentInstance()
	 const echarts = instance.appContext.config.globalProperties.$echarts

    onMounted(() =>{
         initChart()
    })
    // 基础配置一下Echarts
    const  initChart = () => {
        let chart = echarts.init(document.getElementById("myEcharts"), "dark");
        // 把配置和数据放这里
        chart.setOption({
            xAxis: {
            type: "category",
            data: [
                "一月",
                "二月",
                "三月",
                "四月",
                "五月",
                "六月",
                "七月",
                "八月",
                "九月",
                "十月",
                "十一月",
                "十二月"
            ]
            },
            tooltip: {
            trigger: "axis"
            },
            yAxis: {
            type: "value"
            },
            series: [
            {
                data: [
                820,
                932,
                901,
                934,
                1290,
                1330,
                1320,
                801,
                102,
                230,
                4321,
                4129
                ],
                type: "line",
                smooth: true
            }
            ]
        });
      }

</script>
<style>
    #myEcharts{
        width: 500px;
        height: 500px;
    }
</style>

最终效果：

经过反复折腾，终于把这种插件引入的方式搞明白了，总之文档写的比较隐晦，里面应该还是有很多坑需要去填，但我相信nuxt团队，还有自己的解决的能力，下期继续~~

Nuxt3体验和实战（二）- 插件引入问题

需要解决的问题

插件引入问题

vant

echarts

填坑

提问