Vue+Webpack使用规范

蔚落 2022-06-06 01:25 232阅读 0赞

# 一、注意事项  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混用  ![1240][]  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 目录内  ![1240 1][]     Paste\_Image.png  6、css的使用  将业务型的css单独写一个文件，     ![1240 2][]     Paste\_Image.png     功能型的css，最好和组件一起，不推荐拆离，比如一个通用的confirm确认框。               #

[1240]: http://upload-images.jianshu.io/upload_images/2452733-427d80bb83e7b5bf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[1240 1]: http://upload-images.jianshu.io/upload_images/2452733-898976d6dab0b242.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[1240 2]: /images/20220606/8ef4e323c39a4f3ba8565c8954e8af1d.png