Vue+Webpack使用规范

最新推荐文章于 2025-07-11 16:02:57 发布

蔡俊锋

最新推荐文章于 2025-07-11 16:02:57 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： html 数据 class dom Vue+Webpack使用规范

本文链接：https://blog.csdn.net/caijunfen/article/details/78355203

vue 专栏收录该内容

40 篇文章

订阅专栏

本文档详细介绍了Vue.js项目的开发规范，包括ES2015的使用、DOM操作方式、语法糖应用、组件及事件命名规则等。此外还提供了使用第三方插件如ECharts的具体示例，并强调了资源高度复用的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、注意事项
1、开发尽量使用ES2015，遵循CommonJS规范
2、切勿直接操作DOM，要操作数据
3、尽量使用Vue的语法糖，比如可以用:style代替v-bind:style；用@click代替v-on:click
二、规范
1、命名
组件名称(含路由组件)使用“-”分割，如person-new-com，不推荐驼峰
2、事件
事件名称使用“-”分割，且前缀为该组件的名称，例如当前组件为open-layer.vue，则事件名称为 open-layer-close
3、数据
1、不要将html的attribute和vue的model混用


Paste_Image.png

2、class和style使用
new Vue({
    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}"></div>
4、在组件中使用第三方插件
组件的初始化代码<style></style>
<template></template>
<script>
import echarts from 'echarts';
 export default {`
  data () {
      return {
      }
  },
  ready: {
  },
  destroyed: {
  },
  methods: {
  }
}
</script>
要创建一个echarts实例，应该在ready里面完成，但代码较多且需要拆分，可在methods里定义：
<template>
   <div class="chart" v-el:dom-line></div>
</template>
<script>
 import echarts from 'echarts';
 import $ from 'jquery';
 export default {
  data () {
      return {
          chartData: {}
      }
  },
  ready: {
      this.getData();
  },
  beforeDestroy: {
      // 销毁定时器
      if (this.chartTimeout) {
          clearTimeout(this.chartTimeout);
      }
      // 销毁echart实例
      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 = data;
                  Vue.nextTick(function() {
                      _this.initChart();
                  });
                  _this.chartTimeout = setTimeout(function() {
                      _this.getData();
                  }, 1000 * 60);
              }
          })

      }
  }
}
</script>
5、资源的高度可复用
为了使组件，自定义指令，自定义过滤器复用，要将可复用的内容单独拆离，
将组件放置在components目录内，
将自定义指令放置在 directives 目录内，
将自定义过滤器放置在 filters 目录内

Paste_Image.png
6、css的使用
将业务型的css单独写一个文件，

Paste_Image.png

功能型的css，最好和组件一起，不推荐拆离，比如一个通用的confirm确认框。