Vue+Webpack使用规范 蔚落 2022-06-06 01:25 186阅读 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
还没有评论,来说两句吧...