search

vuejs / laravel-elixir-vue-2

Laravel Elixir Vue 2.0 support plugin
105 stars 20 forks source link

Failed to mount component: template or render function not defined #20

Open youngerrainbow opened 7 years ago

youngerrainbow commented 7 years ago

gulpfile.js

const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
// require('laravel-elixir-webpack-official');    require  this  not show the error
elixir((mix) => {
    mix.webpack('app.js');
});

app.js

import Vue from 'vue';
// import Vue from 'vue/dist/vue.js';
import App from './App.vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-default/index.css';

Vue.use(ElementUI);

const app = new Vue({
  el: '#app',
  render: h => h(App)
});

app.vue

<template>
  <div id="app">
    <example></example>
    <el-button>Hello Element</el-button>
  </div>
</template>
<script>
  import Example from './components/Example.vue';
  export default {
    name: 'app',
    components: {
      Example
    }
  };
</script>

welcome.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example</title>
</head>
<body>
  <div id="app">
    <example></example>
    <el-button>Hello</el-button>
  </div>

  <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

example.vue

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Example Component</div>

                    <div class="panel-body">
                        I'm an example component!
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component ready.')
        }
    }
</script>
youngerrainbow commented 7 years ago

package.json

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "autoprefixer": "^6.4.0",
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-plugin-component": "^0.5.0",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "babel-register": "^6.0.0",
    "bootstrap-sass": "^3.3.7",
    "chalk": "^1.1.3",
    "connect-history-api-fallback": "^1.1.0",
    "css-loader": "^0.25.0",
    "element-ui": "^1.0.1",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.13.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "function-bind": "^1.0.2",
    "gulp": "^3.9.1",
    "html-webpack-plugin": "^2.8.1",
    "http-proxy-middleware": "^0.17.2",
    "jquery": "^3.1.0",
    "json-loader": "^0.5.4",
    "laravel-elixir": "^6.0.0-14",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "lodash": "^4.16.2",
    "opn": "^4.0.2",
    "ora": "^0.3.0",
    "ruby": "^0.6.1",
    "sass-loader": "^4.0.2",
    "semver": "^5.3.0",
    "shelljs": "^0.7.5",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "vue": "^2.0.1",
    "vue-loader": "^9.4.0",
    "vue-resource": "^1.0.3",
    "vue-router": "^2.0.1",
    "vue-strap": "^1.1.29",
    "vue-style-loader": "^1.0.0",
    "vue-template-compiler": "^2.0.3",
    "webpack": "^1.13.2",
    "webpack-dev-middleware": "^1.8.3",
    "webpack-hot-middleware": "^2.12.2",
    "webpack-merge": "^0.14.1"
  }
}