vue项⽬规范
⼀.核⼼⽬录分⼯
1. ⽬录结构
1. │ index.html // ⾸页⼊⼝页⾯。可以配置⼀些meta信息或者统计代码。
2. │ package-lock.json // 记录⼀次本地安装的包版本的所有信息，包括版本号和依赖。本地安装时，如果有该⽂件，会先按照该⽂件安装npm包。
3. │ package.json // 本地安装时，项⽬所需要的npm包。
4. │ README.md // 项⽬的说明⽂档，markdown 格式
5. ├─build // 编译配置⽬录。
6. ├─config // 配置⽬录。
7. │ v.js // 开发环境⽂件。
8. │ index.js // 配置⽣产环境、开发环境、端⼝号等。
9. │ v.js // ⽣产环境⽂件。
10. ├─node_modules // npm加载的项⽬依赖模块，⽆需提交到git仓库。
11. └─src // 开发⽬录
12. │ App.vue // 项⽬⼊⼝⽂件。⾮必要不允许修改。
13. │ main.js // 项⽬核⼼js⽂件。主要⽤于初始化vue实例以及引⼊⼀些全局组件。
14. ├─api // 项⽬接⼝调⽤配置，⾮必要不允许修改。
15. ├─assets // 项⽬静态⽂件⽬录。
16. │├─css // 样式⽂件。
17. │├─images // 图⽚。
18. │└─js
19. ├─components // 页⾯组件⽬录。
20. ├─config // 配置⽂件。环境配置+api配置+url配置+键盘事件配置。
21. ├─pages // 页⾯⼊⼝⽂件⽬录。
22. ├─router // 路由配置。
23. ├─store // vuex配置。
24. ││ index.js // 配置⽂件，⽤来组装模块和导出store。
25. │└─modules // 模块⽬录。
26. └─util // 存放公共js⽬录。
2. pages&compnents⽬录
pages：页⾯⼊⼝⽂件⽬录，router⽬录中引⼊的页⾯路径。该⽂件应尽量保持整洁易读，遇到⽐较复杂的页⾯，可以引⼊组件去写。
compnents：组件⽬录。公共的组件可放在common⽂件夹中，其他的组件按照功能不同，分到不同的⽂件夹中。
ps:⽂件命名统⼀使⽤驼峰形式。
⼆.顺序规范
1. 组件/实例顺序（列举了项⽬中⽐较常⽤的组件/实例，详细请看）
1. {
2. name: 'tradeDetail',
3. /** 模板依赖 **/
4. components: {},
5. directives: {},
6. /** 组合 **/
7. mixins: [listMix],
8. /** 接⼝ **/
9. props: {},
10. /** 本地状态 **/
11. data: {
12. return {}
13. },
14. computed: {},
15. /** 事件 **/
16. watch: {},
17. /** ⽣命周期 **/
18. beforeCreate () {},
19. created () {},
20. beforeMount () {},
21. mounted () {},
22. beforeUpdate () {},
23. updated () {},
24. activated () {},
25. deactivated () {},
26. beforeDestroy () {},
27. destroyed () {},
28. /** ⾮响应式的属性 **/
29. methods: {}
30. }
2. html标签中元素特性/属性顺序
1. <div
2. class=""
3. is=""
4. v-for="(item, index) in list"
5. v-if/v-else-if/v-else=""
6. v-show=""
7. v-cloak=""
8. v-pre
9. v-once
10. id=""
11. ref=""
vue json字符串转数组
12. :key=""
13. slot=""
14. v-model=""
15. 组件本⾝⽀持的特性/属性
16. v-on:click/submit=""
17. v-html=""
18. v-text=""
19. >
20. </div>
三.html代码规范<template>
1. 属性等号后⾯全统⼀使⽤双引号，如果双引号中有字符串拼接，就⽤单引号包字符串。例如<el-dialog :title="'编辑优惠券' + title"
:visible.sync="isShow">
2. 缩进2个空格。缩进没有报错，但是⾃⼰得注意缩进。
3. 所有运算符两边都要有空格，根据js的标准来。
4. v-show、v-if的使⽤。
v-show：需要频繁切换的使⽤。
v-if：初始化渲染后不太会改变的。
ps：v-show 不⽀持<template>元素，也不⽀持 v-else。在element-ui部分组件中也会失效。
5. v-for ⼀定要有键值 key。
6. v-for和v-if尽量避免在⼀个html标签中使⽤。如果同时使⽤，v-for的优先级⼤于v-if。
7. 静态资源引⽤使⽤绝对路径，如:”~assets/xxx.png”，禁⽌使⽤相对路径，如：”../../xx.png”。
8. 指令缩写。组件中v-bind:value⽤:value代替；v-on:focus⽤代替。
四.js代码规范<script>
1. 字符串赋值统⼀使⽤单引号。
2. this复制统⼀使⽤let that = this。
3. vue中变量定义声明⽤let或const。
4. 临时变量统⼀使⽤驼峰形式命名。
五.css规范<style>
1. 页⾯中样式尽量写在<style scoped></style>中，避免引起多页⾯样式被覆盖。
2. <style></style>中的样式都需要加上⽗元素class，且这个⽗元素class在所有页⾯中必须是唯⼀的。
3. 覆盖饿了么组件样式时，统⼀加上⽗元素class。
六.vue相关
1. 组件⽂件中必须包含name，name必须是由多个单词组成，并且是驼峰形式。
2. 组件中的prop变量统⼀使⽤驼峰形式。
3. prop定义要尽量详细。例如：
1. propE: {
2. type: Object,
3. // 对象或数组默认值必须从⼀个⼯⼚函数获取
4. default: function () {
5. return { message: 'hello' }
6. }
7. }
七.vue-router
所有的vue项⽬，统⼀使⽤路由懒加载。例如：
1. {
2. path: '(dealer/)?trade/details/:id',
3. name: 'tradeDetail', // 订单详情
4. component (resolve) {
5. require(['@/pages/trade/Details.vue'], resolve)
6. }
7. }
⼋.关于静态资源（图⽚）的使⽤
1.img标签中直接使⽤本地静态图⽚。
1. <img src="~assets/images/icon-payment-WeChat.png"/>
2.import或者require中引⼊本地静态图⽚。
1. import iconAalipay from '@/assets/images/icon-payment-Alipay.png'
2. data () {
3. return {
4. imgUrl: require('@/assets/images/icon-payment-Alipay.png')
5. }
6. }
3.样式background中使⽤的本地静态图⽚。
1. background:url(~assets/images/icon-item-grid-selected.png) FAQ

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。