jjzjj

Vue3 & app.use 与 install 函数的作用

cookcyq 2024-07-19 原文

1. app.use

在 vue3 中，默认初始化 vue 的方式是这样的

// src/main.js
import { createApp } from 'vue'
import App from '@/App.vue'
const app = createApp(App)
app.mount('#app')
export default app

如果我们需要引入 vue-router 则需要修改成比如这样

// src/main.js
import { createApp } from 'vue'
...
++++++++
import Home from '@/pages/Home.vue'
import {
  createRouter,
  createWebHistory
} from "vue-router"

const routes = [
  { path: '/home', component: Home },
]
const router = createRouter({
  history: createWebHistory('/'),
  routes
})
// 最后通过 app.use 方法引入 Router
app.use(router)

类似的，其它插件如 i18n、vuex、vant 等都要借助 app.use 引入，
官方也解释了 app.use 就是用来引入插件，这里不在赘述。

2. install

在介绍 install 方法前，我们需要知道有这么一个方法 app.use(plugin, options)
其中 plugin 表示要传递的插件对象， options 参数是可选的，表示选项配置，
install 方法的定义就插件对象里面，install 方法会在引入插件时自动被 vue 调用，
并传参 vue 实例和 options ，具体代码如下：

// src/plugins/my-plugin.js
const myPlugin = {
	install(app, options) {
		// { name: 'Jack' }
		console.log(options);

		// 有了 app，我们注入一个全局组件
		app.component('my-button', import('@/components/my-button.vue'))
		// 也可以声明一个全局属性/函数
		app.config.globalProperties.$Tools = () => console.log('Hello,world')
	}
}
// src/main.js
app.use(myPlugin, { name: 'Jack' })

以上代码的作用在 vue 官方都有解释，但它还隐藏了与 vue-cli 构建有关的一个很有用的功能，
install 方法除了在插件对象内定义外，组件也可以自定义 install 方法，是的，组件本身也是一个对象，
因此组件被引入时也会自动触发 install，代码如下

// src/components/my-buttonn.js
import MyButton from '@/components/my-button.vue'
MyButton.install = (app) => {
	app.component('MyButton', MyButton)
}

上面在 my-button.js 中引入 my-butgton.vue 组件，并新增了 install 方法，里面通过 vue 实例加载了这个 my-button 组件，这有什么用呢？我们可以先看看 vue-cli 构建
里面解释了在打包 vue 时，有个选项 --target lib 命令，此命令可以将文件打包成一个可作为依赖导入的 js 库，
我们可以将这个库推送到 npm 中，然后通过 npm install [name] 的方式安装下来，接着在项目中引入这个依赖，就可以像往常那样使用组件了，伪代码如下：

// 例如：npm install cookcyq/MyButton

// 在代码中引入
// demo.vue
<template>
	<div class="main">
		<MyButton/>
	</div>
</template>
<script>
import MyButton from '@/cookcyq/Mybutton';
export default {
  components: {
	MyButton,
  }
}
</script>

当依赖引入时，便会触发 install 方法，实现组件自引，一个库不止一个组件，你可以在 my-button.js 引入额外的组件，
构建属于自己的组件库，这样既可以单独维护，也可以减少主体项目的代码量。

对库感兴趣的同学可以往下读 Vue3 & 详解 vue-cli 使用 --target lib 打包的方式

完！

ampinstallspanclasstokenvue.jsjavascript前端

有关Vue3 & app.use 与 install 函数的作用的更多相关文章

  1. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

    我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou

  2. ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  3. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  4. ruby-on-rails - 如何从 format.xml 中删除 <hash></hash> - 2

    我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为

  5. ruby - 检查 "command"的输出应该包含 NilClass 的意外崩溃 - 2

    为了将Cucumber用于命令行脚本，我按照提供的说明安装了arubagem。它在我的Gemfile中，我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作，我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了，但失败的原因是错误的:@announceScenario:Testingcucumber/ar

  6. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

    我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

  7. ruby-on-rails - 如何优雅地重启 thin + nginx？ - 2

    我的瘦服务器配置了nginx，我的ROR应用程序正在它们上运行。在我发布代码更新时运行thinrestart会给我的应用程序带来一些停机时间。我试图弄清楚如何优雅地重启正在运行的Thin实例，但找不到好的解决方案。有没有人能做到这一点？ 最佳答案 #Restartjustthethinserverdescribedbythatconfigsudothin-C/etc/thin/mysite.ymlrestartNginx将继续运行并代理请求。如果您将Nginx设置为使用多个上游服务器，例如server{listen80;server

  8. ruby - 在 jRuby 中使用 'fork' 生成进程的替代方案？ - 2

    在MRIRuby中我可以这样做:deftransferinternal_server=self.init_serverpid=forkdointernal_server.runend#Maketheserverprocessrunindependently.Process.detach(pid)internal_client=self.init_client#Dootherstuffwithconnectingtointernal_server...internal_client.post('somedata')ensure#KillserverProcess.kill('KILL',

  9. ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗？ - 2

    刚入门rails，开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗？有哪些用例。您如何为Rails应用程序使用应用程序Controller？我不想在那里放太多代码，因为据我了解，每个请求都会调用此Controller。这是真的？ 最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度，尽管在某些情况下ApplicationContr

  10. ruby - 主要 :Object when running build from sublime 的未定义方法 `require_relative' - 2

    我已经从我的命令行中获得了一切，所以我可以运行rubymyfile并且它可以正常工作。但是当我尝试从sublime中运行它时，我得到了undefinedmethod`require_relative'formain:Object有人知道我的sublime设置中缺少什么吗？我正在使用OSX并安装了rvm。 最佳答案 或者，您可以只使用“require”，它应该可以正常工作。我认为“require_relative”仅适用于ruby​​1.9+ 关于ruby-主要:Objectwhenrun

随机推荐