我刚刚开始使用 Vue，但我找不到一个非常基本的问题的直接答案。
我有一个 php 项目，我想用 VueJS 替换 jquery。
我现在正在做的是对于每个页面，我都有一个 Vue 实例 (new Vue({})) 但我认为这不是最好的工作方式。
有没有办法只实例化一次vue，然后对于每个页面，我将页面的方法添加到其中？
我不使用 Vue 的路由。 我的路由来自我的 PHP 框架。
我想用js来操作DOM，调用一些API等等。
我可以只使用组件来与 dom 交互而不添加一些标签吗？
我有一个搜索引擎完整的 JS，我不把它用作组件
【问题讨论】：
标签： javascript php vue.js vuejs2
当然，你可以做到这一点没问题。我使用的方法与您所要求的完全一样。我是 C# 开发人员而不是 php 开发人员，但每个后端系统都有某种方法来创建系统中大多数网页使用的模板。例如，该模板通常用于保存网站页眉和页脚的标记。在 ASP.NET Core 中，该文件称为 _layout.cshtml。毫无疑问，您的 php 框架具有类似的概念和文件。它将被命名为其他名称，但用途相同。
我提到这一点是因为这样的文件是“新建”你的 vue 实例的理想场所，因此它可用于所有页面，因为所有页面都包含来自该模板的内容以获取其页眉和页脚 html .
这样就解决了您问题的第一部分。下一部分是单个页面如何向 vue 实例添加额外的方法和数据？最好的方法是通过 vue mixin。实例化 vue 时，您可以指定应合并到 vue 实例中的 mixin 数组。所有的数据、方法、手表等都从 mixin 合并到 vue 实例中。官方文档在这里：https://vuejs.org/v2/guide/mixins.html
基本结构是这样的：
在页面特定的 javascript 运行之前将其放置在您的模板中：
var mixinList = [];
在特定页面上的位置：
var pageMixin = {
data: function () {
return {
someData: 'someValue'
}
},
methods: {
someMethod:function(someParam) {
//does work
}
}
}
mixinList.push(pageMixin);
在页面特定的 javascript 运行后放置在布局中：
var app = new Vue({
el: '#appTemplate',
mixins: mixinList, //This is what includes the mixins in the vue instance
data:{
},
methods: {
aMethod:function(aParam) {
//does work
}
}
});
我还在这个 StackOverflow 答案中写过这种方法：Why is mixing Razor Pages and VueJs a bad thing?
**鉴于我是从内存中输入的大部分代码，此代码可能存在语法错误，但我每天在我的项目中使用类似的代码。如果您有任何问题，请告诉我。
【讨论】：
拥有多个 vue 实例绝对不是一个好主意。 要拥有多个页面，您应该使用Vue router。
拥有一个 Vue 实例将允许您在组件之间共享使用的插件。
您可以在其中定义将路由器和存储关联的主 js 文件（如果您不需要在组件之间共享大量数据，则可能不需要它）到您的 vue 实例：
import App from './App'
import router from './router'
import store from './store'
// Plugins shared
Vue.use(Vuelidate)
Vue.use(BootstrapVue)
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App },
})
您的 App 组件（根组件）：
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'app',
}
</script>
<style lang="scss">
@import "./scss/variables";
@import "./scss/colors";
#app {
position: relative;
padding-top: $full-page-top-padding-xl;
min-height: 100vh;
}
</style>
您的路线：
import Vue from 'vue';
import Router from 'vue-router';
import Page1 from '@/Page1';
import Page2 from '@/Page2';
Vue.use(Router);
const router = new Router({
routes: [
{
path: '/mypage1',
name: 'Page1',
component: Page1,
},
{
path: '/mypage2',
name: 'Page2',
component: Page2,
}
...
【讨论】：