VueGlobalSearch安装
使用包管理器
我们建议您使用包管理器安装 VueGlobalSearch
bash
# 选择一个你喜欢的包管理器
# NPM
$ npm install vue-global-search --save
# Yarn
$ yarn add vue-global-search
# pnpm
$ pnpm install vue-global-search
# 选择一个你喜欢的包管理器
# NPM
$ npm install vue-global-search --save
# Yarn
$ yarn add vue-global-search
# pnpm
$ pnpm install vue-global-search
浏览器直接引入
直接通过浏览器的 HTML 标签导入 VueGlobalSearch，然后就可以使用全局变量 VueGlobalSearch 了。
根据不同的 CDN 提供商有不同的引入方式， 我们在这里以 unpkg 和 jsDelivr 举例。 你也可以使用其它的 CDN 供应商。
unpkg
html
<head>
<!-- Import style -->
<link rel="stylesheet" href="//unpkg.com/vue-global-search/lib/style.css" />
<!-- Import component library -->
<script src="//unpkg.com/vue-global-search"></script>
</head>
<head>
<!-- Import style -->
<link rel="stylesheet" href="//unpkg.com/vue-global-search/lib/style.css" />
<!-- Import component library -->
<script src="//unpkg.com/vue-global-search"></script>
</head>
jsDelivr
html
<head>
<!-- Import style -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/vue-global-search/lib/style.css" />
<!-- Import component library -->
<script src="//cdn.jsdelivr.net/npm/vue-global-search"></script>
</head>
<head>
<!-- Import style -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/vue-global-search/lib/style.css" />
<!-- Import component library -->
<script src="//cdn.jsdelivr.net/npm/vue-global-search"></script>
</head>
Hello World
通过 CDN 的方式我们可以很容易地使用 VueGlobalSearch 写出一个 Hello world。
html
<html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-global-search/lib/style.css">
<script src="https://unpkg.com/vue-global-search/lib/vue-global-search.umd.js"></script>
</head>
<body>
<div id="app">
<vue-global-search :data="data"></vue-global-search>
</div>
<script>
const { createApp } = Vue
const app = createApp({
data() {
return {
data: [{
title: '光锥',
url: 'https://light-cone.cn'
}]
}
}
})
app.use(VueGlobalSearch)
app.mount('#app')
</script>
</body>
</html>
<html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-global-search/lib/style.css">
<script src="https://unpkg.com/vue-global-search/lib/vue-global-search.umd.js"></script>
</head>
<body>
<div id="app">
<vue-global-search :data="data"></vue-global-search>
</div>
<script>
const { createApp } = Vue
const app = createApp({
data() {
return {
data: [{
title: '光锥',
url: 'https://light-cone.cn'
}]
}
}
})
app.use(VueGlobalSearch)
app.mount('#app')
</script>
</body>
</html>
如果是通过包管理器安装，并希望配合打包工具使用，请阅读下一节：快速开始。