Question

输入.vue文件

            <template>
              <div class="gauge-panel">
                  <svg viewBox="0 0 94 80">
                    <path
                          d="M13.658,79.962l2.119-2.121a43.5,0-65.672.062Z"
                          :fill="color"></path>
                  </svg>
                  <div class="gauge-value" v-bind:style="{ fontSize: fontSize + 'px' }">{{value}}</div>
              </div>
            </template>

            <script>
            export default  {
              props: ['color', 'value', 'caption'] ,
              computed: {
                fontSize: function () {
                  var fontSize = 36;
                        var valueLength = this.value.toString().length;
                        if( valueLength > 5 ) {
                            fontSize = 26;
                        } else if( valueLength > 3 ) {
                            fontSize = 28;
                        }
                        return fontSize;
                }
              }
            }
            </script>

            <style>
            </style>

gulp脚本可编译以上文件

            var gulp            = require('gulp');
            var babel           = require('gulp-babel');
            var rename          = require('gulp-rename');
            var vueComponent    = require('gulp-vue-single-file-component');

            gulp.task('vue', function() {
                return gulp.src('./src/**/*.vue')
                    .pipe(vueComponent({ debug: true, loadCssMethod: 'loadCss' }))
                    .pipe(babel({ plugins: 'transform-es2015-modules-amd',presets: ["es2015"] }))
                    .pipe(rename({ extname: '.js' }))
                    .pipe(gulp.dest('./dist/js'));
            });

生成.js文件

            define(['exports'], function (exports) {
              'use strict';

              Object.defineProperty(exports, "__esModule", {
                value: true
              });
              exports.default = {
                template: '<div class="gauge-panel"><svg viewBox="0 0 94 80"><path d="M13.658,79.962l2.119-2.121a43.5,43.5,0,1,1,61.433-.062L79.33,79.9a46.5,46.5,0,1,0-65.672.062Z" :fill="color"></path></svg><div class="gauge-value" v-bind:style="{ fontSize: fontSize + &#39;px&#39; }">{{value}}</div><div class="gauge-text">{{caption}}</div></div>',
                beforeCreate: function beforeCreate() {
                  loadCss({ content: '.gauge-panel {margin-top: 15px;margin-bottom: 15px;position: relative;width: 90px;height: 90px;}.gauge-value {text-align: center;position: absolute;bottom: 20px;width: 100%;font-weight: 100;}.gauge-text {text-align: center;font-size: 13px;}' });
                },

                props: ['color', 'value', 'caption'],
                computed: {
                  // a computed getter
                  fontSize: function fontSize() {
                    // `this` points to the vm instance
                    var fontSize = 36;
                    var valueLength = this.value.toString().length;
                    if (valueLength > 5) {
                      fontSize = 26;
                    } else if (valueLength > 3) {
                      fontSize = 28;
                    }
                    return fontSize;
                  }
                }
              };
            });

现在，当我尝试运行应用程序时，由于以下原因，它找不到vue组件：

定义应类似于： define（['exports'，'vue']，function（exports，Vue）{
exports.default应该像这样 Exports.default = Vue.component（'my-gauge'，{

如何在我生成的文件中添加这两件事？如果我想在生成的文件中添加更多内容，该如何实现？是否有另一个插件可以按预期的方式为我执行此操作？

Answer 1

当我将my.vue文件修改为

时，它可以工作

            <template>
              <div class="gauge-panel">
                  <svg viewBox="0 0 94 80">
                    <path
                          d="M13.658,79.962l2.119-2.121a43.5,43.5,0,1,1,61.433-.062L79.33,79.9a46.5,46.5,0,1,0-65.672.062Z"
                          :fill="color"></path>
                  </svg>
                  <div class="gauge-value" v-bind:style="{ fontSize: fontSize + 'px' }">{{value}}</div>
                  <div class="gauge-text">{{caption}}</div>
              </div>
            </template>

            <script>
            import Vue from "vue"
            export default Vue.component(  {
              props: ['color', 'value', 'caption'] ,
              computed: {
                // a computed getter
                fontSize: function () {
                  // `this` points to the vm instance
                  var fontSize = 36;
                        var valueLength = this.value.toString().length;
                        if( valueLength > 5 ) {
                            fontSize = 26;
                        } else if( valueLength > 3 ) {
                            fontSize = 28;
                        }
                        return fontSize;
                }
              }
            })
            </script>
            <style></style>

如何自定义'gulp-vue-single-file-component'的编译选项？

1 个答案: