如何自定义“gulp-vue-single-file-component”的编译选项？答案

【问题标题】：How can I customize compiling options for 'gulp-vue-single-file-component'?如何自定义“gulp-vue-single-file-component”的编译选项？
【发布时间】：2018-06-22 12:03:58
【问题描述】：

输入 .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 组件，因为：

定义应该是这样的：定义(['exports','vue'], function (exports,Vue) {
exports.default 应该是这样的 export.default = Vue.component('my-gauge',{

如何在生成的文件中添加这两件事？如果我想在生成的文件中添加更多内容，我该如何实现？是否有其他插件可以按预期方式为我做到这一点？

【问题讨论】：

标签： vue.js vuetify.js transpiler

【解决方案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>

【讨论】：