Web前端-vue 开发命名规范
1、views 命名
views 文件夹下面是由 以页面为单位的 vue 文件 或者 模块文件夹 组成的
放在 src 目录之下,与 components、assets 同级
目录解析
目录/文件 | 说明 |
---|---|
build | 项目构建(webpack)相关代码 |
config | 配置目录,包括端口号等。我们初学可以使用默认的。 |
node_modules | npm 加载的项目依赖模块 |
src |
这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:
|
static | 静态资源目录,如图片、字体等。 |
test | 初始测试目录,可删除 |
.xxxx文件 | 这些是一些配置文件,包括语法配置,git配置等。 |
index.html | 首页入口文件,你可以添加一些 meta 信息或统计代码啥的。 |
package.json | 项目配置文件。 |
README.md | 项目的说明文档,markdown 格式 |
打开 APP.vue 文件,代码如下(解释在注释中):
src/APP.vue
<!-- 展示模板 -->
<template><div id="app"><img src="./assets/logo.png"><hello></hello></div>
</template><script>
// 导入组件
import Hello from './components/Hello'export default {name: 'app',components: {Hello}
}
</script>
<!-- 样式代码 -->
<style>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>
2、views 下的文件夹命名
(1)views 下面的文件夹代表着模块的名字
(2)由名词组成(car、order、cart)
(3)单词只能有一个(good: car order cart)(bad: carInfo carpage)
(4)尽量是名词(good: car)(bad: greet good)
(5)以小写开头(good: car)(bad: Car)
3、views 下的 vue 文件命名
(1)views 下面的 vue 文件代表着页面的名字
(2)放在模块文件夹之下
(3)只有一个文件的情况下不会出现文件夹,而是直接放在 views 目录下面,如 Login Home
(4)尽量是名词
(5)大写开头,开头的单词就是所属模块名字(CarDetail、CarEdit、CarList)
(6)名字至少两个单词(good: CarDetail)(bad: Car)
(7)常用结尾单词有(Detail、Edit、List、Info、Report)
(8)以 Item 结尾的代表着组件(CarListItem、CarInfoItem)
4、vue 方法命名
vue 方法放置顺序
(1)components
(2)props
(3)data
(4)created
(5)mounted
(6)activited
(7)update
(8)beforeRouteUpdate
(9)metods
(10)filter
(11)computed
(12)watch
5、method 自定义方法命名
(1)动宾短语(good:jumpPage、openCarInfoDialog)(bad:go、nextPage、show、open、login)
(2)ajax 方法以 get、post 开头,以 data 结尾(good:getListData、postFormData)(bad:takeData、confirmData、getList、postForm)
(3)事件方法以 on 开头(onTypeChange、onUsernameInput)
(4)init、refresh 单词除外
(5)尽量使用常用单词开头(set、get、open、close、jump)
(6)驼峰命名(good: getListData)(bad: get_list_data、getlistData)
6、data props 方法注意点
(1)使用 data 里的变量时请先在 data 里面初始化
(2)props 指定类型,也就是 type
(3)props 改变父组件数据 基础类型用 $emit ,复杂类型直接改
(4)ajax 请求数据用上 isLoading、isError 变量
(5)不命名多余数据,现在是详情页、你的数据是 ajax 请求的,那就直接声明一个对象叫 d,而不是每个字段都声明
(6)表单数据请包裹一层 form
7、生命周期方法注意点
(1)不在 mounted、created 之类的方法写逻辑,取 ajax 数据,
(2)在 created 里面监听 Bus 事件
Web前端-vue 开发命名规范相关推荐
- Web前端企业开发命名规范
一个好的前端项目代码离不开好的命名规范,试想一下叫你接手一个项目,你看到之前开发的代码的命名一团糟,那是多么痛苦的事啊.或者你自己把一个项目命名的一团糟,等过段时间让你重构该项目的时候,估计肠子都要悔 ...
- Web 前端——项目文件夹命名规范
文件夹名称 含义 src,source 源代码,用src居多 test,__tests__ 测试文件,也经常用__test__,facebook的测试框架jest默认的测试文件目录就是__test__ ...
- Web前端设计开发规范
前言 本文主要整理了Web前端设计开发的相关规范,主要由网络收集,希望对大家在Web设计和开发的过程中有一些帮组. 目录 一.界面设计规范细则 二.CSS编写和命名规范 三.JavaScript编程规 ...
- Web前端工程师开发规范必须要注意的事
Web前端工程师开发规范必须要注意的事 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范 ...
- web前端模块化开发_真正的模块化Web应用程序:为什么没有开发标准?
web前端模块化开发 OSGI , SpringSource , Jboss模块 ,J2EE和清单永远不会结束.所有这些技术都向他们的最终用户/开发人员保证了相同的东西,或多或少是Java模块化Web ...
- Web前端-Vue.js必备框架(一)
Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head><meta char ...
- html5 可拖动悬浮按钮,前端vue开发:可移动的悬浮按钮的应用
前端vue开发:可移动的悬浮按钮的应用. class="callback float" @click="onClick" @mousedown="do ...
- 前端vue开发连续签到功能
前端vue开发连续签到功能 UI设计图 参数说明 HTML部分 渲染已经签到过的天数 js代码 签到功能前端只需要调用两个接口 完整代码 UI设计图 参数说明 days_num:已经签到多少天 tod ...
- Web前端-Vue.js必备框架(二)
Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...
最新文章
- MySQL主从数据库同步延迟问题解决
- 使用sun.net.ftp.FtpClient进行上传功能开发,在jdk1.7上不适用问题的解决
- Log4j.xml配置日志按级别过滤并将指定级别的日志发送到ActiveMQ
- 为什么word下面有红线_这4个Word细节不做好,老板看了都想骂人!赶紧记下来
- spring @component的作用详细介绍
- 流行前沿的暗黑APP主题UI设计素材模板
- CSS 布局 - Overflow
- hash ruby 定义 嵌套_【译】rails的嵌套属性(Nested Attributes)使用
- POJ 2182 Lost Cows (线段树)
- 用eclipse调用远程webservice生成客户端代码
- SQLserver C#将图片以二进制方式存储到数据库,再从数据库读出图片
- 左神直通BAT算法(进阶篇)-上
- 浅谈Dubbo服务引入源码(@ReferenceBean依赖注入)
- TB6612与电机编码器
- 单片机程序配置成开漏输出_单片机的GPIO配置
- 本科学计算机大学学金融工程,2020年金融工程专业排名
- 戴尔电脑怎么录屏?这6个方法教你轻松录屏
- Vue中components几个组件
- 关于linux中DBG调试宏的使用总结,减少代码冗余
- Web初学-2022.10.15-21