Question

在先前的项目中，我们用Vuejs替换了jQuery，以处理一些更复杂的视图。它主要还是一个服务器渲染的应用程序。我们没有使用构建步骤，因此无法使用ES6功能。现在，我们有一些时间来重写/重构某些内容，我想介绍一下webpack / babel。现在我发现我无法像以前一样使用vue语法增强现有视图。因为这些视图未包含在构建步骤中，所以我想这是缺少上下文，但是我想更好地理解原因，然后再放弃这种方法。

这些是粗略的内容，还有一个非常基本的webpack + babel + vue-loader设置。这似乎如广告所示。

//index.js
import vue from 'vue';
import greet from './components/greet.vue';

const vm = new Vue({
  el: '#app',
  components: {greet},
  mounted() {
    alert('this works');
  },
});

//components.greet.vue
<template>
  <h1>{{ greet }}</h1>
</template>

<script>
  export default {
    data() {
     return {
       greet: 'hey',
     }
    }
  }
</script>

//html from the server
<head>
   ..etc
</head>
<body>
  <div id="app">
    <greet></greet>
    <span v-if="true">true</span>
    <span v-if="false">false</span>
    <div id="server-rendered-content">
      ...some content from the server
    </div>
  </div>
</body>

已触发安装中的警报，但不显示带有v-if和greet组件的跨度。

谢谢大家！

我可以通过vue使用webpack来逐步增强现有应用中的视图

0 个答案: