Vue component/data 不渲染

Question

我有一个 python 项目（使用 flask），我试图在其中使用 Vue。问题是，如果我查看 html 定义，则不会呈现与 vue 相关的内容。我已经通过 npm 安装了 vue，还安装了 webpack 和 laravel-mix。看来配置还不错。

我有实例

import Vue from 'vue';
import alert from './components/Alert.vue';

new Vue({
  el: '#app',
  delimiters: ['[[', ']]'],
  data: {
    test: 'is it working?'
  },
  components: {
    alert
  }
});

组件

<template>
  <div class="alert" v-text="message"></div>
</template>

<script>
  export default {
    name: 'alert',
    data() {
      return {
        message: 'I am an alert.'
      };
    }
  };

</script>

<style>
  .alert {
    background: red;
  }

</style>

我只是想呈现消息

<div class="mdl-card__title mdl-color--primary mdl-color-text--white relative">
  <h2 class="mdl-card__title-text">Login</h2>
</div>

<div id="app">
  [[ test ]]
</div>

但是当我尝试在 html 中查看时，我什么也没看到。 Component not showing bellow the Login h2 tag

Package.json

{
  "name": "I've hidden it",
  "version": "1.0.0",
  "description": "<h1>I've hidden it</h1>",
  "main": "webpack.mix.js",
  "directories": {
    "test": "tests"
  },
  "scripts": {
    "dev": "npm run development",
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "prod": "npm run production",
    "production": "mix --production"
  },
  "repository": {
    "type": "git",
    "url": "i've hidden it"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "laravel-mix": "6.0.6",
    "postcss": "8.1",
    "vue-loader": "^15.9.8",
    "vue-template-compiler": "^2.6.14"
  },
  "dependencies": {
    "vue": "^2.6.14"
  }
}

Answer 1

On 运行 npm mix, laravel-mix 将编译您提供给 mix.js 函数的文件并将其保存到函数的第二个参数，这是项目中的 public/js 目录。 .vue() 告诉 laravel-mix 它是一个 vue 应用程序入口点。

编译后，您需要将编译后的脚本导入您的 html。

<script src="public/js/main.js"/>

现在你的 Vue 应用程序应该可以正常工作了。

Vue component/data 不渲染

Vue component/data not rendering

vue.js

vue-component