After studying vue for a period of time, summarize the Vue writing specification
Naming conventions
In group development projects, write maintainable code for all members of the team, rather than one-time code, so that other people in the team can see your code at a glance, and even after a period of time, you will come back to see yourself sometime The written code can also be understood, so naming is very important.
Common Variable Naming Conventions
Naming method: camel case
naming convention:
The name must be a word related to the content of the requirement. For example, if I want to declare a variable to represent my school, then we can define constmySchool = "my school"; when the name is plural, s needs to be added, for
example I want to declare an array to represent the names of many people, so we can define constnames=newArray();
Constant naming convention
Naming method: All uppercase
Naming convention:
Use capital letters and underscores to combine names, and underscores to separate words.
const MAX_COUNT = 10
const URL = 'https://www.csdn.net/
Component naming convention
Official document recommendation and usage follow the rules:
PascalCase (the first letter of the word is capitalized) is the most common declaration convention
kebab-case (dash-separated naming) is the most common usage convention
Component names should always be multiple words, except for the root component App
Meaningful nouns, short and readable, naming follows the PascalCase convention
Public components start with Abcd (company name abbreviation), such as (AbcdDatePicker, AbcdTable)
internal page components start with the component module name abbreviation, and end with Item, such as (StaffBenchToChargeItem, StaffBenchAppNotArrItem) use follows the kebab-case convention
Components used in the page need to be closed before and after and separated by dashes, such as ( , ). When importing and registering components, follow the PascalCase convention. At the same time, you need to pay attention to: must comply with the custom element specification: do not use reserved words.
method method naming convention
CamelCase naming, uniform use of verbs or verbs + nouns
//bad
go、nextPage、show、open、login
// good
jumpPage、openCarInfoDialog
请求数据方法，以 data 结尾
//bad
takeData、confirmData、getList、postForm
// good
getListData、postFormData
init、refresh 单词除外
Try to use the beginning of common words (set, get, go, can, has, is)
Attachment: Verbs commonly used in function methods:
get get/set setting,
add increase/remove delete
create create/destory remove
start start/stop stop
open open/close close,
read read/write write
load load/save save,
create create/destroy destroy
begin start/ end end,
backup backup/restore restore
import import/export export,
split split/merge merge
inject inject/extract extract,
attach attach/detach break away from
bind bind/separate separate,
view view/browse browse
edit edit/modify modify,
select select /mark mark
copy copy/paste paste,
undo undo/redo redo
insert insert/delete remove,
add join/append add
clean clean/clear clear,
index index/sort sort
find find/search search,
increase increase/decrease reduce
play play/pause pause,
launch start/run run
compile compile/execute execute,
debug debug/trace track
observe observe/listen monitor,
build build/publish publish
input input/output output,
encode encode/decode decode
encrypt encrypt/decrypt decrypt,
compress compress/decompress decompress
pack packaging/unpack unpacking,
parse analysis/emit generate
connect connection/disconnect disconnection,
send send/receive receive download
download/upload upload,
refresh refresh/synchronize synchronous
update/revert recovery,
lock lock/unlock unlock
check out check out /check in,
submit submit/commit delivery
push push/pull pull,
expand expand/collapse collapse
begin start/end end,
start start/finish complete
enter enter/exit exit,
abort give up/quit leave
obsolete waste/depreciate waste,
collect collection/aggregate gather
File naming under views
If there is only one file, no folder will appear, but it will be placed directly under the views directory. For example, index.vue
should be a noun as much as possible, and use camel case naming.
The word at the beginning is the name of the module to which it belongs (workbenchIndex, workbenchList, workbenchEdit)
at least two words (good: workbenchIndex) (bad: workbench)
props naming convention
When declaring props, their names should always use camelCase, and in templates they should always use
kebab-case
Exceptions
Temporary variables with limited scope can be abbreviated, such as: str, num, bol, obj, fun, arr.
Loop variables can be abbreviated, such as: i, j, k, etc.
structured specification
Directory folder and sub-file specification
The following unified management offices correspond to the corresponding modules. The
following global files are exported with index.js, and the following temporary files are imported in main.js.
After use, the interface already exists, and it will be cleared after release
src source directory
|-- api interface, unified management
|-- assets static resources, unified management
|-- components public components, global files
|-- filters filters, global tools
|-- icons icons, global resources
|-- datas simulation data, Temporary storage
|-- lib externally referenced plug-in storage and modification files
|-- mock simulation interface, temporary storage
|-- router routing, unified management
|-- store vuex, unified management
|-- views view directory
| |-- staffWorkbench View module name
| |-- |-- staffWorkbench.vue module entry page
| |-- |-- indexComponents module page-level component folder
| |-- |-- components module common component folder
The above is the basic structure of the files in the vue project, which are all composed in this way. The standardized naming and basic file structure facilitate us to better manage and maintain the code.