Question

我刚开始使用Vue，但是找不到非常基本的问题的直接答案。

我有一个php项目，我想用VueJS代替jquery。我现在正在为每个页面做一个实例，我有一个Vue（new Vue({})）实例，但是我认为这不是最好的工作方式。

有没有一种方法可以只实例化一个vue，然后为每个页面添加页面的方法？

我不使用Vue的路由。我的路由来自我的Php框架。

我想使用js来操纵DOM，调用某些API等。

我可以仅将组件用于与dom交互的方法，而无需添加一些标签“吗？

我有一个搜索引擎完整的JS，并且没有将其用作组件

Answer 1

拥有多个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,
    }
...

Answer 2

当然，您可以做到这一点。我使用的方法完全符合您的要求。我是c＃开发人员，而不是php开发人员，但是每个后端系统都有某种方法可以创建系统中大多数网页所使用的模板。例如，该模板通常用于保存网站的页眉和页脚的标记。在ASP.NET Core中，该文件称为_layout.cshtml。毫无疑问，您的php框架具有相似的概念和文件。它将被命名为其他名称，但目的是相同的。

之所以这样说，是因为这样的文件是“更新”您的vue实例的理想场所，因此该文件将可用于所有页面，因为所有页面无论如何都包含该模板的内容，以获取其页眉和页脚html

这样可以解决您问题的第一部分。接下来的部分是各个页面如何向vue实例添加其他方法和数据？最好的方法是通过Vue Mixin。实例化vue时，您可以指定应合并到vue实例中的混合数组。所有数据，方法，监视等都将从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实例

2 个答案: