Question

我尝试使用gulp和browserify编译vue组件。我使用vueify来满足我的需求。

这是我的代码。

Vue.config.delimiters = ['${', '}'];

<style>
    .layout-wrapper { width: ${ canvas.test }; }
</style>

module.exports = {
    props: ['theme_id'],
    data: function() {
        return {
            canvas: {
                test: '12345px',
                content: {},

问题是，它没有编译。但是当我尝试

时

    .layout-wrapper { width: ${ '12345px' }; }

虽然确实奏效了。调用数据对象有问题吗？

Answer 1

查看文档中的示例.vue文件：

https://vuejs.org/guide/application.html#Single-File-Components

格式应为：

<style>

</style>
<template>

</template>
<script>
  module.exports = {

  }
</script>

在style部分中也没有办法使用Vue变量。您需要在模板中内联使用它们：

<div :style="{width:canvas.test}">

如果要在样式部分中使用其他语言，请添加lang属性。如果你知道任何其他的css语言，那么你可以使用变量：

<style lang="scss">
  $canvaswidth = '123px';
  .layout-wrapper {width: $canvaswidth}

Gulp Vue JS没有编译样式标记上的冲突

1 个答案: