问题：如何让phpstorm等IDE支持vuejs的vue文件？
描述:如题，，在ide中
setTimeout(() =& this.show = false, 3000);
}全是XX，，，请问该如何支持呢...找到解决方案了。。解决方案1:从phpstorm的插件（plugins）管理中添加vue.js打开preferences,搜索 plugin, 点击Browse Repository, 搜索vue.js, 点击install，重启解决方案2:语言模式直接设置成HTML就好了解决方案3:提醒一下，es6在手机浏览器上很多都不支持解决方案4:怎么解决？我也在找，求指导！
以上介绍了“如何让phpstorm等IDE支持vuejs的vue文件？”的问题解答，希望对有需要的网友有所帮助。
本文网址链接：/itwd/1268525.html
上一篇： 下一篇：javascript（75）
转载自：/article/4556372
本文为系列文章，总共分四节，建议按顺序阅读：
开发尽量使用ES2015，遵循CommonJS规范切勿直接操作DOM，要操作数据尽量使用Vue的语法糖，比如可以用:style代替v-bind:style；用@click代替v-on:click
刚开始使用Vue比较容易进入的一个误区，Vue是以数据驱动的，所以只用关系数据的变化即可，不是万不得已，千万不要主动操作DOM；
不要在JS里绑定跟业务相关的事件，业务事件及逻辑，应该在HTML上绑定。在JS里绑定事件应该用于使用了第三方的插件等场景，如果主动绑定了事件，记得在相关生命周期接触绑定以及销毁相关实例，比如在组件内创建了一个百度echarts，并加了一个定时器来更新数据，在组件销毁时，应该销毁这个echarts实例，并将定时器clear；
命名。组件名称（包括路由组件）使用&-&来分割，比如persons-new-poi.vue，不推荐使用驼峰，详见事件。在派发和广播事件时，事件的名称也使用&-&来分割，而且前缀为该组件的名称，不能使用驼峰&，例如当前组件为open-layer.vue，则事件名称为&open-layer-close
比如最终要实现的代码是：
src=123.jpg&
href=&index.html?id=123&&&
id=&id-123&&&
比如Vue实例为：
& & el: 'body',
& & data: {
& & & & id: 123
错误 的使用是：
src={{ id }}.jpg&
href=&index.html?id={{ id }}&&&
id=&id-{{ id }}&&&
正确 的使用是：
&img :src=id + '.jpg'&
&a :href=&'index.html?id=' + id&&&/a&
&div :id=&'id-' + id &&&/div&
静态的class放在HTML的class特效内，而动态的应该使用:class，比如
& & el: 'body',
& & data: {
& & & & list: [
& & & & & & {
& & & & & & & & name: '《HTML权威指南》',
& & & & & & & & is_read: 0
& & & & & & },
& & & & & & & & & & & & {
& & & & & & & & name: '《深入浅出NodeJS》',
& & & & & & & & is_read: 1
& & & & & & },
&div v-for=&item in list& class=&book_item& :class=&{'off': !item.is_read}&&&
比如组件初始化为：
& & import echarts from 'echarts';
& & export default {
& & & & data () {
& & & & & & return {
& & & & & & }
& & & & },
& & & & ready: {
& & & & },
& & & & destroyed: {
& & & & },
& & & & methods: {
要创建一个echarts实例，应该在ready里面完成，但代码可能很多而且需要拆分，所以可以在methods里定义许多方法，最终代码如下：
class=&chart& v-el:dom-line&&
& & import echarts from 'echarts';
& & import $ from 'jquery';
& & export default {
& & & & data () {
& & & & & & return {
& & & & & & & & chartData: {}
& & & & & & }
& & & & },
& & & & ready: {
& & & & & & this.getData();
& & & & },
& & & & beforeDestroy: {
& & & & & &
& & & & & & if (this.chartTimeout) {
& & & & & & & & clearTimeout(this.chartTimeout);
& & & & & & }
& & & & & &
& & & & & & if (this.myChart) {
& & & & & & & & this.myChart.dispose();
& & & & & & }
& & & & },
& & & & methods: {
& & & & & & initChart () {
& & & & & & & & if (!this.myChart) {
& & & & & & & & & & this.myChart = echarts.init(this.$els.domLine);
& & & & & & & & }
& & & & & & & & var option = {
& & & & & & & & & &
& & & & & & & & }
& & & & & & & & this.myChart.setOption(option);
& & & & & & },
& & & & & & getData() {
& & & & & & & & var _this = this;
& & & & & & & & $.ajax({
& & & & & & & & & & url: '',
& & & & & & & & & & type: 'get',
& & & & & & & & & & data: {},
& & & & & & & & & & success (data) {
& & & & & & & & & & & &
& & & & & & & & & & & & _this.data =
& & & & & & & & & & & & Vue.nextTick(function() {
& & & & & & & & & & & & & & _this.initChart();
& & & & & & & & & & & & });
& & & & & & & & & & & & _this.chartTimeout = setTimeout(function() {
& & & & & & & & & & & & & & _this.getData();
& & & & & & & & & & & & }, 1000 * 60);
& & & & & & & & & & }
& & & & & & & & })
& & & & & & }
为了使组件、自定义指令、自定义过滤器高度可复用，需要尽可能地将可复用的内容单独拆离，将 组件 放置在 components 目录内（如果需要，可以在components目录内再创建目录），将 自定义指令 放置在 directives 目录内（如果需要，可以在directives目录内再创建目），将自定义过滤器放置在 filters 目录内（如果需要，可以在filters目录内再创建目）。使用方法举例：
& & import Picker from '../picker'
& & import Cell from '../cell'
& & import Popup from '../popup'
& & import Flexbox from '../flexbox'
& & import FlexboxItem from '../flexbox-item'
& & import array2string from '../../filters/array2String'
& & import value2name from '../../filters/value2name'
& & module.exports = {
& & & & components: {
& & & & & & Picker,
& & & & & & Cell,
& & & & & & Popup,
& & & & & & Flexbox,
& & & & & & FlexboxItem
& & & & },
& & & & filters: {
& & & & & & array2string,
& & & & & & value2name
& & & & },
& & & & data: function() {
& & & & & & return {}
& & & & },
& & & & methods: {
可将业务型的CSS代码单独写一个css文件，比如首页，index.css，放置在 styles 目录内（如果需要，可以在styles目录内再创建目录），在使用index.css的组件内，使用@import引入css，，对于局部的css，可以在style上增加scoped，举例:
& & @import('reset.css');
& & @import('index.css');
& & & & color:
& & &title&
功能型的css，建议和组件一起，不推荐拆离，比如一个通用的confirm确认框。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：350810次
积分：4475
积分：4475
排名：第5663名
转载：483篇
评论：17条
(7)(3)(5)(3)(2)(2)(2)(1)(1)(2)(6)(1)(1)(2)(1)(1)(9)(3)(6)(1)(4)(6)(4)(1)(2)(2)(4)(3)(3)(4)(5)(1)(11)(3)(1)(3)(6)(3)(5)(1)(6)(2)(3)(2)(23)(4)(3)(3)(4)(15)(11)(9)(8)(17)(13)(8)(15)(6)(7)(4)(2)(9)(5)(3)(13)(5)(5)(12)(9)(5)(3)(4)(1)(3)(6)(3)(5)(7)(11)(6)(19)(14)(10)(1)(7)(2)(7)(20)