前端开发规范及发展

依旧i248

已于 2022-10-08 09:17:48 修改

阅读量261

点赞数

分类专栏：前端知识文章标签： javascript 前端 vue.js

于 2022-10-04 22:24:09 首次发布

本文链接：https://blog.csdn.net/weixin_65548623/article/details/127166488

版权

前端知识专栏收录该内容

22 篇文章 1 订阅

订阅专栏

文章目录

一、开发规范
二、Vue

一、开发规范

（一）工作目录构建规范

在这里插入图片描述

node_modules:项目的所有依赖包
public:可以放一些图片，如网站的图标
src是项目的主要部分:
（1）api定义访问后端的函数
（2）assets 文件夹里面主要放置一些资源文件。比如js 、css 之类的文件。
（3）components存放 vue 的公共组件，可以全局复用。
（4）router用来存放路由信息，一般是一个index.js文件。
（5）views用来放主体页面，区别于components，views可在路由中配置。
（6）main.js是项目的入口文件，作用是初始化 vue 实例、引入所需要的插件。
（7）less可以放重定义的css
（8）App.vue是项目的主组件，所有页面都是在该组件下进行切换的。app.vue可以当做是网站首页，也可以写所有页面中共同需要的动画或者样式，不在他上面写代码也可以。只要你在router文件夹中的index.js填写好路由，就是一个普通vue文件，只不过命名为app.vue，类似于函数命名，语义化，让人更加一目了然看到这个是入口vue文件。
（9）utils放一些js，定义一些工具
10）store包含全局变量，一些get、set方法

（二）代码命名规范

1.BEM命名方式

在这里插入图片描述

推荐博客
BEM命名规范

Block：代表了一个独立的块级元素，可以理解为功能组件块。
Element：是 Block 的一部分不能独立来使用的，所有的 Element 都是与 Block 紧密关联的。
Modifier：是用来修饰 Block 或 Element，表示 block 或者 element 在外观或行为上的改变。例如，上面提到的输入框 Block，当鼠标悬停时边框高亮，那么这个高亮的效果就应该用 Modifier 来实现。