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

Posted 2023-03-24

【中文标题】如何自定义“gulp-vue-single-file-component”的编译选项？

【英文标题】：How can I customize compiling options for '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',

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

【参考方案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>