我正在使用我Vue.js的一个前端项目.
如您所知,Vue附带了特殊的组件语法 - each component can be declared in a single .vue file.这意味着,您可以在单个文件中定义所有相关内容,如下所示:
<tamplate>
...component template goes here...
</template>
<script>
...component code goes here...
</script>
<style>
...component style goes here...
</style>
Run Code Online (Sandbox Code Playgroud)
当然,各种IDE中的vue支持还不完善.Vue是一个相对年轻的框架,但我认为它很快就会流行起来.在Angular之后它看起来如此简单和可预测,我甚至决定在所有即将到来的前端项目中使用它,但它当然是另一个故事.
好吧,WebStorm对.vue文件一无所知,但是vue看起来像html,所以你可以轻松地解决这个问题 - 只需将*.vue模式添加到HTML文件类型的模式列表中(设置 - >编辑器 - >文件类型).
在调整之后一切正常,直到您尝试使用非CSS样式 - 由于某些原因,WebStorm无法突出显示类型为text/less的嵌入样式等等.我尝试以不同的方式解决它:
<style type="text/css></style>
Run Code Online (Sandbox Code Playgroud)
要么
<style rel="stylesheet/less"></style>
Run Code Online (Sandbox Code Playgroud)
......但没有任何成功.
幸运的是vue-loader(我正在使用WebPack来构建我的项目)supports another syntax of .vue files, which allows to declare template, code and style in a separate files.没关系,但我认为每个组件的单个文件更好(至少它更容易管理).现在我被迫单独声明我的样式,因为我不能让WebStorm突出显示嵌入的LESS样式.
我试图使用WebStorm language injections,但也没有任何成功(或者我只是错过了我的WebStorm配置中的一些东西). …