ccqgithub / fis3-parser-vue-component Goto Github PK

<template>
    <div>
         <p v-show="visible">测试</p>
         <p @click="close">关闭</p>
    </div>
</template>
<script>
export default {
    data() {
        return {
            visible: true
        }
    },
    methods: {
        close() {
            this.visible = false
        }
    }
}
</script>

这段代码，在chrome、或者系统自带的魅族浏览器都是正常的，但是在微信webview中，视图可以正常加载，事件也可以正常执行，但是好像this.visible=false没有作用，怎么点击，p标签都不会隐藏。

Vue packages version mismatch:

• [email protected]
• [email protected]

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

解析出来的js文件只支持同名依赖这种加载方式吗？
能不能把拆出来的文件做合并处理呢？
我自己使用packTo方法做合并失败了。。

能像vueloader + webpack支持sourceMap么？即可以在*.vue源码中进行调试。

https://github.com/ccqgithub/fis3-parser-vue-component/blob/master/index.js#L23

这里应该修改为 var fragment = parse5.parseFragment(content.toString()

I install jade-loader in local. but not parser.

比如：
现有 a.vue(__vuec__4) b.vue(__vuec__5)
重启FIS3(这个功能每个人都需要,比如第二天使用FIS) 修改a.vue一开始ID是__vuec__1多修改几次后跟b重复了。
其实就是--clear后ID值重新计算，这对文件版本控制不利。
可能hash还是最优的。

jade is ok, 3ks ccqgithub.

It's new issue:
file: header.vue

fis-conf.js :
fis.match('*.scss', {
rExt: '.css',
useSprite: true,
postprocessor: fis.plugin('autoprefixer'),
parser: fis.plugin('node-sass')
});

error log:
Can't find /src/common/header-vue-style-0.scss
at Object.opts.importer (/usr/local/lib/node_modules/fis3-parser-node-sass/index.js:153:19)

发现新版本对于.vue文件里面的template进行了render函数的转换，并没有对入口文件处的new Vue({ template: '<App/>' })的template字段进行render函数的替换，导致vue报错

我一个header, 一个footer， 都import了 variable.less.

生成的都有重复的定义变量那部分的css。

另外，产出顺序的问题。

vue组件生成的link的css，在html之前。

eg.

index.html

<link rel="stylesheet" href="./index.less">
<ent-header></ent-header>
<ent-footer></ent-footer>

output: index.html source code

<link rel="stylesheet" type="text/css" href="/src/common/header-vue-style-0.css" />
<link rel="stylesheet" type="text/css" href="/src/common/footer-vue-style-0.css" />
<link rel="stylesheet" href="/src/index.css" />

配置

fis.match('*.{scss,vue:scss}', {
    parser: fis.plugin('node-sass', {
        sourceMap: DEBUG,
    }),
    rExt: 'css',
})

普通scss文件有map生成，vue内的scss无map生成。
是否有什么需要注意的。

我们有项目用vue1.x,有项目用vue2.x；但用的是同一个编译机，这种该怎么搞呢？

如果vue安装到node_modules会出现以下错误

 [ERROR]

Vue packages version mismatch:

- [email protected]
- [email protected]

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

找了一下发现是vue-template-compiler会检测vue版本，用回v3.0.1就不存在这问题了，建议在文档提一下这个问题。

可以考虑下

如果把test2里的fis-config.js里的

var parserVuePlugin = require('../index');

改为：

var parserVuePlugin = require('fis3-parser-vue-component');;

fis3 release时就会报错

这个问题是我用的时候，.vue里的js代码中的export default不能用，貌似没被babel转换？我的fis3配置是：

fis.match('/src/**.vue', {
    isMod: true,
    rExt: 'js',
    parser: [
        fis.plugin('vue-component', {
          runtimeOnly: true
        })
    ]
});

fis.match('/src/**.vue:js', {
    isMod: true,
    rExt: 'js',
    parser: [
      fis.plugin('babel-6.x', {
        presets: ['es2015-loose', 'stage-3']
      })
    ],
});

莫非是我配置有问题？

[ERROR] Could not locate the bindings file. Tried:
→ F:\fis3-typescript-vue-hackernews-2.0-master\node_modules\deasync\build\deasync.node
→ F:\fis3-typescript-vue-hackernews-2.0-master\node_modules\deasync\build\Debug\deasync.node
→ F:\fis3-typescript-vue-hackernews-2.0-master\node_modules\deasync\build\Release\deasync.node
→ F:\fis3-typescript-vue-hackernews-2.0-master\node_modules\deasync\out\Debug\deasync.node
→ F:\fis3-typescript-vue-hackernews-2.0-master\node_modules\deasync\Debug\deasync.node
→ F:\fis3-typescript-vue-hackernews-2.0-master\node_modules\deasync\out\Release\deasync.node
→ F:\fis3-typescript-vue-hackernews-2.0-master\node_modules\deasync\Release\deasync.node
→ F:\fis3-typescript-vue-hackernews-2.0-master\node_modules\deasync\build\default\deasync.node
→ F:\fis3-typescript-vue-hackernews-2.0-master\node_modules\deasync\compiled\8.9.2\win32\x64\deasync.node

直接git clone这个仓库的报错 请问下是哪里出问题了么？

win7
fis3 3.3.29
node 4.4.4
其他都是npm install

[ERROR] parser.0: parser.babel-6.x: Couldn't find preset "stage-3" relative to directory "F:/fis3-parser-vue-component/test/src/component" [F:/fis3-parser-vue- component/test/src/component/a.vue] [F:/fis3-parser-vue-component/test/src/compo nent/a.vue]

比如：module/a.js 和module/a.vue这两个文件在编译后由于文件名一样都输出了a.js所以导致冲突了，有什么解决办法吗？

看了下源码（npm 包），原来在没有template的情况下，会直接用一个默认的空函数覆盖 render，可以加一个条件判断，如果有 render 则取render

scriptStr += '\nif(module && module.exports){ module.exports.render=module.exports.default && module.exports.default.render || renderFun; module.exports.staticRenderFns=staticRenderFns;}\n';
scriptStr += '\nif(exports && exports.default){ exports.default.render=exports.default.render || renderFun; exports.default.staticRenderFns=staticRenderFns;}\n';

现在是只支持 css scoped吧

我的td写在另一个 组件内
比如
有一个table组件叫my-table
这个组件有默认插槽slot如下代码。

 <thead>
        <tr>
            <slot></slot>
        </tr>
    </thead>

当我写

<my-table>
<my-td></my-td>
</my-table>

整个table 无法渲染
去掉插槽正确
当我吧上面的slot放到td里 可以正常工作
如下

<thead>
        <tr>
          <td>
            <slot></slot>
         </td>
        </tr>
    </thead>

补充一下，在webpack里ok

<script>
  import Header from 'vux/src/components/x-header'
</script>
<style lang='scss'>
  .vux-header .vux-header-title, .vux-header h1{
    overflow: visible !important;
  }
</style>

编译后，<style>内的样式，在import进来模板依赖的样式之前，导致业务模板不能覆写组件样式

fis3 release 运行错误提示： [ERROR] parser.translate-es3ify: Parse Error: Line 5818: Invalid regular expression [F:/web/h5v3.0-demo/src/lib/vue2.0/vue.js] in [/js/house/house-list.js]

house-list.js代码：__inline('/lib/vue2.0/vue.js');

您好，用了您的插件，vue文件组件里的做编译产出后template模板做了处理，但是产出的<script>里面的es6代码没有被编译成es5可能是什么原因，fis3也没报错！
比如在<script>标签里这么写

 let typeMap = {
    success: 'circle-check',
    info: 'information',
    warning: 'warning',
    error: 'circle-cross'
  };

源文件:

<template>
    <div>login</div>
    <button @click="ddd">ddd</button>
</template>

<script>
    export default {
        props: {
        login: {
          type: String,
          default: 'login'
        }
      },
      methods: {
            ddd() {
                alert()
            }
      }
    }
</script>

<style>
.test{
    color: red;
}
</style>

配置文件：

fis.match('/components/**.vue', {
  isMod: true,
  rExt: 'js',
  useSameNameRequire: true,
  parser: [
    fis.plugin('vue-component', {
        // 暂时还没有自定义配置哦
    }),
   fis.plugin('babel')
  ]
});

scriptStr += '\nmodule && module.exports && (module.exports.template = ' + JSON.stringify(templateFile.getContent()) + ');\n';
scriptStr += '\nexports && exports.default && (exports.default.template = ' + JSON.stringify(templateFile.getContent()) + ');\n';

为何分别赋值? 这样会导致模板字符串重复, 增加文件大小

https://github.com/ccqgithub/fis3-parser-vue-component/blob/master/index.js#L111

vuec 做了更细粒度的是挺好，但是还想要style级别的支持。

比如

const foo = resolve => require(['components/foo.vue'], resolve)

控制台报错

[Vue warn]: Failed to mount component: template or render function not defined.
(found in - use the "name" option for better debugging messages.)

mac上有这个问题，windows上没问题，mac上只要

fis.match('/components/**.vue', {
  isMod: true,
  rExt: 'js',
  useSameNameRequire: true,
  parser: fis.plugin('vue-component', {
    cssScopeFlag: 'vuec'
  })
});

这样配置就会报错，注释掉 isMod: true ,就不报错了，是什么原因呢？