vue 项目中命名方法

简介: vue命名

命名
命名的方法通常有以下几类:

命名法说明
1).camelCase,形如thisIsAnApple
2).PascalCase,形如ThisIsAnApple
3).下划线命名法,形如this_is_an_apple ·
4).kebab-case,形如this-is-an-apple
说明: 所有的名称,包括文件名都作为大小写敏感来处理

JS

根据不同类型的内容,必须严格采用如下的命名法:

变量名:必须使用camelCase
参数名:必须使用camelCase
函数名:必须使用camelCase
方法/属性:必须使用camelCase
私有(保护)成员:必须以下划线_开头
常量名:必须使用全部大写的下划线命名法,如IS_DEBUG_ENABLED
类名:必须使用PascalCase
枚举名:必须使用PascalCase
枚举的属性:必须使用全部大写的下划线命名法
命名空间:必须使用camelCase
语义:命名同时还需要关注语义,如:
变量名应当使用名词
boolean类型的应当使用is、has等起头,表示其类型
函数名应当用动宾短语
类名应当用名词
Vue 项目中的命名

Store 中的Module 使用 camelCase
Store 中的Mutation 使用 全部大写的下划线命名法
Store 中的state/getters/action 使用camelCase
组件必须使用PascalCase
引用组件时禁止使用别名,模板内组件标签名遵循html 标签命名规范,或者使用组件名
组件名必须避免使用Vue保留标签名(包括HTML标签和Vue内部标签)
组件文件和组件使用相同的名字
前端路由路径使用全小写命名法
HTML

html 文件名必须使用小写字母
标签名必须使用小写字母
属性名必须使用小写字母
以上名称有多个单词情况下使用中划线分割
属性值必须用双引号包围
CSS

css 文件名必须使用小写字母
选择器必须单词全字母小写,多个单词情况下使用中划线分割
class选择器必须代表相应模块或部件的内容或功能,不得以样式信息进行命名
id 选择器必须保证页面唯一
同一页面,应避免使用相同的 name 与 id

相关文章
|
3天前
|
JSON JavaScript 前端开发
在Vue3项目中,Vite起到的作用及其可以做的事情
Vite是Vue 3项目的关键快速开发服务器和高效的热模块替换(HMR)。它的亮点包括:使用ES模块实现快速启动和动态加载,模块级别HMR提升开发效率,Rollup打包优化生产构建。此外,Vite还支持插件系统、自定义配置、静态资源处理和现代JS特性。通过`npm create vite`可快速搭建Vue项目,配置文件`vite.config.js`可定制行为,`.env`文件管理环境变量。Vite优化了开发与构建流程,提高开发者效率并保证构建性能。
|
3天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
18 3
|
1天前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
54 7
使用 Vue CLI 脚手架生成 Vue 项目
|
3天前
|
JavaScript 算法
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
8 1
|
3天前
|
JavaScript
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
9 1
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1002 0
|
11天前
|
JavaScript 前端开发 开发者
vue3+ts配置跨域报错问题解决:> newpro2@0.1.0 serve > vue-cli-service serve ERROR Invalid options in vue.
【6月更文挑战第3天】在 Vue CLI 项目中遇到 "ERROR Invalid options in vue.config.js: ‘server’ is not allowed" 错误是因为尝试在 `vue.config.js` 中使用不被支持的 `server` 选项。正确配置开发服务器(如代理)应使用 `devServer` 对象,例如设置代理到 `http://xxx.com/`: ```javascript module.exports = { devServer: {
24 1
|
4天前
|
JavaScript 前端开发 Java
【vue实战项目】通用管理系统:作业列表
【vue实战项目】通用管理系统:作业列表
18 0
|
4天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
21 2
|
4天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息录入
【vue实战项目】通用管理系统:信息列表,信息录入
13 3