在 nuxt 客户端使用 NPM 包 [英] Using NPM packages client-side with nuxt

问题描述

我对 nuxt 和 javascript 非常陌生，我正在尝试弄清楚如何在客户端使用我的应用程序的依赖项.我在我的 nuxt.config.js 中列出了它们并安装了 npm.我在 /plugins 目录中还有一个导入它们的文件(不确定这是否好).这是我遇到麻烦的地方:我的 /static 目录中有两个脚本需要利用我的 npm 包.在这些脚本中放置导入语句会导致错误.在页面 vue 文件的脚本部分导入包也不起作用.如何在包含在页面客户端的脚本中使用 npm 包?

I'm very new to nuxt and javascript and I'm trying to figure out how to use my app's dependencies client-side. I have them listed in my nuxt.config.js and installed with npm. I also have a file in the /plugins directory that imports them (not sure if this is good or not). Here is where I run into trouble: I have two scripts located in my /static directory that need to take advantage of my npm packages. Putting an import statement in those scripts causes an error. Importing the packages in the script section of the page vue file also doesn't work. How can I use npm packages in scripts that are included in pages client-side?

推荐答案

您能否提供更多信息，关于发生了哪种错误以及您尝试安装了哪些软件包?

Can you provide a more information, about which kind of error is happening and which kind of packages did you try to install?

在这个例子中，我将向你展示我如何在我的 nuxt 项目 npm 包中包含 vuelidate

In this example I am going to show you how I included in my nuxt project npm package vuelidate

安装 vuelidate 后:

after installing vuelidate:

1. 添加到 nuxt.config.js

plugins: [
   { src: "~/plugins/vuelidate", mode: "client" },
 ],

1. 在我的插件文件夹 (plugin/vuelidate.js) 中创建 vuelidate.js 文件

import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate);

1. 之后我可以在我的 .vue 组件中使用 vuelidate(并不总是需要导入一些东西，因为在我们的 2 阶段 Vue.use(Vuelidate) 我们已经全局安装了 vuelidate)

1. after that I can use vuelidate in my .vue components (no always necessary to import something because in our 2 stage Vue.use(Vuelidate) we already installed vuelidate globally)

<script>
import { required, minLength } from "vuelidate/lib/validators";

export default {
  name: "OrderByLinkForm",
  components: {},
  ...
};
</script>

这篇关于在 nuxt 客户端使用 NPM 包的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！