标签: vueify

我已经在我的工作流程中使用了gulp,我目前没有使用webpack或browserify,但似乎编译Vue 2.x组件需要一个或另一个,没有主动维护的机制来直接编译Vue组件作为gulp任务.

我已经搜索过,似乎无法找到一个工作参考,只需将*.vue组件中的目录编译成单个JavaScript文件,然后我可以从我的页面链接.我只是想创建和使用一些组件,我不是在创建SPA.

这就是我所拥有的:

gulpfile.js

const scriptDestFolder = "\\foo\\";
const browserify = require('browserify');
const source = require('vinyl-source-stream');
const gulp = require("gulp");
const vueify = require('vueify');

gulp.task('vue', function () {
    return browserify({ 
                entries: ['./vuecomponents.js'],
                transform: [vueify]
        })
        .bundle()
        .pipe(source('vue-bundle.js'))
        .pipe(gulp.dest(scriptDestFolder));
});

vuecomponents.js

var Vue = require('vue');
var App = require('./vue/app.vue');

app.vue文件与此处的示例相同.我无意实际拥有一个"app"组件,我只想尝试一个示例,我会用一个单文件组件列表替换它.

这是结果:

Error: Parsing file \\blah\vue\app.vue:
'import' and 'export' may only appear at the top level (14:0)

我很难过.我认为 browserify试图在编译之前解析原始的vue代码,但同样,我在browserify上是一个完整的新手.

基于Vuejs文档示例,我试图做一个简单的树视图组件,我可以在没有任何交互的情况下显示一个帐户图表(没有添加没有拖放...非常简单).

我在FiddleJs上做了一个例子,但是我的例子很好用......我不知道为什么在我的应用程序上我无法使它工作!我不知道是否有一些Vueify问题......可能你可以帮助我!

有我的代码:

OzChartTree.vue

<template>

    <ul v-if="model.length">
        <li v-for="m in model" :class="{ 'is-group': m.children }">
            {{ m.name }}
            <ul v-if="m.accounts">
                <li v-for="a in m.accounts">
                    {{ a.name }}
                </li>
            </ul>
            <oz-tree :model="m"></oz-tree>
        </li>
    </ul>

</template>

<script type="text/babel">

    import OzChartTree from './OzChartTree.vue'

    export default {

        components: {
            OzTree: OzChartTree
        },

        props: {
            model: Array,
        }

    }

</script>

我第一次调用树视图组件

<oz-chart-tree :model="chart"></oz-chart-tree>

问题是当我在ja .vue文件上递归调用组件时.

如上所述我得到以下错误:

app.js:23536 [Vue警告]:未知的自定义元素: - 您是否正确注册了组件？对于递归组件,请确保提供"名称"选项.

但是是否正确注册为OzTree!我无法理解!

有人有什么想法吗？

我有几个文本字段的表单，这没有给我带来任何问题。但是我有这个文件字段我无法绑定到我的模型。任何猜测。

<template>
    <v-form ref="form" @submit.prevent="submit" lazy-validation v-model="valid">
        <v-card outlined>
            <v-card-text>
                <v-file-input
                    type="file"
                    :label="labels.user_header_photo"
                    v-model="form.user_header_photo"
                    :error-messages="errors.user_header_photo"
                    :rules="[rules.required('user_header_photo')]"
                    :disabled="loading"
                    @input="clearErrors('user_header_photo')"
                >
                </v-file-input>

                <v-file-input
                    type="file"
                    :label="labels.user_profile_photo"
                    v-model="form.user_profile_photo"
                    :error-messages="errors.user_profile_photo"
                    :rules="[rules.required('user_profile_photo')]"
                    :disabled="loading"
                    @input="clearErrors('user_profile_photo')"
                >
                </v-file-input>

            </v-card-text>
        </v-card>

        <v-divider class="mb-4 mt-4"></v-divider>

        <v-card>
            <v-card-text>
                <v-text-field
                    :label="labels.user_name"
                    v-model="form.user_name"
                    :error-messages="errors.user_name"
                    :disabled="loading"
                    hint="At least 6 characters"
                    autocomplete="user_name"
                    @input="clearErrors('user_name')"
                ></v-text-field>

                <v-text-field
                    :label="labels.user_subscription_fee"
                    v-model="form.user_subscription_fee"
                    :error-messages="errors.user_subscription_fee"
                    :disabled="loading"
                    autocomplete="user_subscription_fee"
                    @input="clearErrors('user_subscription_fee')"
                ></v-text-field>
            </v-card-text>
        </v-card>

        <v-layout mt-12 mx-0>
            <v-spacer></v-spacer>

            <v-btn
                text
                :disabled="loading"
                :to="{ name: 'profile' }"
                color="grey darken-2"
                exact
            >
                Cancel
            </v-btn>

            <v-btn
                type="submit"
                :loading="loading"
                :disabled="loading" …