在 NativeScript-Vue 应用中使用插件
作为程序员，我们学习的第一件事就是“不要重新发明轮子”。在开发过程中，你可能需要为移动应用添加原生功能和特殊功能，为此，你很可能会使用社区构建或官方的 NativeScrpt 插件。如果你查看 NativeScript 市场，你就会发现针对你想要在应用中使用的绝大多数高级功能的插件。但是，让这些插件在你的 NativeScript-Vue 应用中运行并非特别简单，至少在你学会操作之前是这样。在本文中，我假设你已经通过 Vue CLI 中的模板以首选方式创建了一个应用。
在官方 vue-cli 模板中安装插件的方式与其他 NativeScript 项目不同。
提示：在 YouTube 上观看 NativeScript-Vue 2.0 网络研讨会：NativeScript-Vue 2.0：重返 Vueture
让我们看看如何通过安装插件 nativescript-star-ratings 来安装插件。
步骤 1：打开终端并 cd 到项目的根目录。
步骤 2
不要使用 tns plugin add 命令安装插件，而是运行以下命令
$ npm install nativescript-star-ratings
这会在 node_modules 文件夹中将插件安装到应用程序的根目录。
步骤 3
$ npm run clean
如果项目以前构建过，这将清除 dist 文件夹。
步骤 4
再次运行项目
$ npm run debug:android
注意：如果你使用的是该平台，则可以将
android更改为ios
步骤 5
在 main.js 中导入 Vue 之后，要求并注册插件
import Vue from 'nativescript-vue'
Vue.registerElement('StarRating', ()=> require('nativescript-star-ratings').StarRating)
registerElement 函数将 XML 元素的名称作为第一个参数，将返回插件的函数作为第二个参数。
步骤 6
使用插件。在模板块中，添加以下内容
<StarRating emptyBorderColor="white" emptyColor="white" filledBorderColor="black" filledColor="red" value="2" max="5"/>
你已成功在使用 Vue CLI 构建的 NativeScript-Vue 应用中安装、注册和使用插件！
如果我的插件不需要 XML 标签怎么办？
如果你使用的是不使用 XML 标签的插件，则可以跳过步骤 5-6，并将其作为单个文件组件中的 const 添加。一个示例是使用语音识别插件
const SpeechRecognition = require('nativescript-speech-recognition').SpeechRecognition;
这些类型的插件可能需要额外的初始化；例如，语音识别插件必须在 data 块中进行初始化。然后在 mounted（在 iOS 上），你可以检查是否已授予访问麦克风的权限
export default {
data: () => ({
speechRecognition: new SpeechRecognition()
}),
mounted() {
this.speechRecognition.requestPermission().then((granted) => {
if (!granted){
alert("It seems that you haven't enabled the microphone. Please visit your app settings and let this app listen to your voice!")
}
});
},
}
结果
每个插件的初始化模式略有不同，但这两个示例涵盖了你使用插件时会遇到的基本用例。
这里发生了什么？
NativeScript-Vue 应用对插件的使用类似于我们在 NativeScript 中使用 Angular 的模式，而不是 NativeScript Core。例如，我们不会在 StarRatings 标签或 Page 元素上添加命名空间，就像你在构建 NativeScript Core 应用时那样。这是因为在步骤 5 中我们使用了“神奇的”registerElement 函数，它会自动为我们处理命名空间。
那么这一切是如何运作的呢？当你运行步骤 4 中的应用时，它会看到 dist 文件夹已清除（在步骤 3 中），并重新生成应用。这会将你添加的所有插件捆绑到 dist 文件夹中。如果你没有执行步骤 3，它将不会将新添加的插件捆绑到 dist 文件夹中，它们将无法使用。
在该模板的未来版本中，计划是删除步骤 3。因此，请查看 vue-cli 模板的文档和 #vue Slack 频道，了解何时不再需要步骤 3。
即插即用！
插件对于任何 NativeScript 应用的成功完成至关重要。幸运的是，我们有一个充满活力的社区，他们不断地构建和迭代这些插件；值得注意的是 Osei Fortune 努力将其套件插件“vue 化”；一个示例是他的分页器插件，该插件在其 Vue 实现上有文档。其他多产的插件作者也是“Vue 友好的”，例如无与伦比的 Eddy Verbruggen。只要在 Slack 频道上联系他们就行了！