liubaiyan dbecc186d7 1 | 3 lat temu | |
---|---|---|
public | 3 lat temu | |
src | 3 lat temu | |
.env.development | 3 lat temu | |
.env.production | 3 lat temu | |
.gitignore | 3 lat temu | |
README.md | 3 lat temu | |
index.html | 3 lat temu | |
package-lock.json | 3 lat temu | |
package.json | 3 lat temu | |
vite.config.js | 3 lat temu |
该项目是在node环境下,使用vue(3.0.5)、vue-router(4.0.5)及vuex(4.0.0)开发,基于vite2并提供相应打包服务,搭配element-plusUI框架构建,并以axios封装拦截的的web前端项目
# 安装依赖
npm install
# 在本地主机上进行热加载
npm run dev
# 小型化打包项目
npm run build
有关工作原理详细说明,请参阅 指南 。
HTML
1. 结构、样式、行为分离
确保文档和模板只包含 HTML 结构,样式都放到样式表里,行为都放到脚本里
2. 缩进
统一二位缩进,不要使用Tab、空格混搭
3. 标签一律使用小写字母
例: <!-- Recommended推荐 -->
<img src="google.png" alt="Google">
color: #e5e5e5;
4. HTML 注释
模块注释
<!-- 文章列表列表模块 -->
<div class="article-list">
...
</div>
区块注释
<!--
--!>
5. 标签
遵循 HTML 语义,使用最少的标签并保持最小的复杂度。
常见标签语义:
<p> 段落
<h1> <h2> <h3> 标题
<ul> 无序列表
<ol> 有序列表
<blockquote> 大段引用
<cite> 一般引用
<b> 为样式加粗而加粗
<strong> 为强调内容而加粗
<i> 为样式倾斜而倾斜
<em> 为强调内容而倾斜
Class 与 ID
class 应以功能或内容命名;
class 与 id 单词字母小写,多个单词组成时,采用驼峰命名法
属性顺序
HTML 属性应该按照特定的顺序出现以保证易读性。
id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role
布尔值属性
HTML5 规范中 disabled、checked、selected 等不用设置值
Css
1. 注释
组件块和子组件块以及声明块之间使用一空行分隔,子组件块之间三空行分隔;
/* ==============================
组件块
===============================*/
/* 子组件块
===============================*/
.selector {
padding: 15px;
}
2. 推荐使用 “SASS” CSS扩展语言
3. 慎重选择高消耗的样式
box-shadows
border-radius
transparency
transforms
CSS filters
4. 正确使用 Display 的属性
display 属性会引起回流和重绘,影响页面的渲染,请合理使用。
JavaScript
1. 注释
单行注释
必须独占一行。// 后跟两个空格,缩进与下一行被注释说明的代码一致
多行注释
/**
* 这样的多行注释,有多行注释内容时
*/
函数/方法注释
函数/方法注释必须包含函数说明,有参数和返回值时必须使用注释标识
参数和返回值注释必须包含类型信息和说明
当函数是内部函数,外部不可访问时,可以使用 @inner 标识
/**
* 函数描述
* @param {string} p1 参数p1的说明 (必传)
* @param {string} p2 参数p2的说明(可选)
* @return {Object} 返回值描述
*/
function foo(p1) {
return {
p1: p1
};
}
在无参数与返回值情况下,需用单行注释描述函数作用
文件注释
文件注释用于告诉不熟悉这段代码的读者这个文件中包含哪些什么。 应该提供文件的大体内容, 作者, 依赖关系。
/**
* 文件概述,文件的使用和信息。
* 对xxx依赖性。
* 作者名称 xxx
*/
2. 命名
变量, 函数, 函数的参数, 类的方法和属性, 使用 驼峰 命名法。
私有属性、变量和方法以下划线 _ 开头。
常量, 枚举的属性, 使用全部字母大写,单词间下划线分隔的命名方式。
类, 枚举变量, 使用 帕斯卡 命名法
配置
1. 直连服务器
当在本地主机上进行热加载并直连服务器时,可在 vite.config.js 下配置多服务器连接目标
'/device': {
target: 'xxx',
changeOrigin: true,
ws: true,
rewrite: (path) => path.replace(/^\/device/, '/device')
},
2. 连接网关
热加载下可在 .env.development 下的 VITE_BASE_API 属性中配置连接目标
打包下可在 .env.production 下的 VITE_BASE_API 属性中配置连接目标
3. 其他环节变量
VITE_TIME_OUT为请求超时时限
VITE_MENUCODE为菜单目录字典
开发
1. 模块
模块应部署于 @/src/views 文件夹下,使用 驼峰 命名法命名各文件及其对应文件夹
2. 组件
组件应部署于 @/src/components 文件夹下,使用 驼峰 命名法命名各文件及其对应文件夹
3. 应用及接口
应用及接口应部署于 @/src/api 文件夹
使用 驼峰 命名法命名各文件及其对应文件夹
4. 拦截器
拦截器分为 request 与 download 两部分
request
当 api 文件传入对象中的 type 为 JSON 时,为正常请求
当 api 文件传入对象中的 type 为 FORM 时,为表单式请求,请求头 Content-type 为 application/x-www-form-urlencoded
download
当 api 文件传入对象中的 method 为 get 时
请求头 Content-type 为 application/x-www-form-urlencoded
当 api 文件传入对象中的 method 为 post 时
当 api 文件传入对象中的 type 为 JSON 时,请求发送数据为对象,请求头 Content-type 为 application/json
当 api 文件传入对象中的 type 为 FORM 时,请求发送数据为表单,请求头 Content-type 为 application/x-www-form-urlencoded
5. 工具
工具应部署于 @/src/utils 文件夹下,使用 驼峰 命名法
拦截器、正则、存储、用户信息、日期等公用工具下新增函数应新增至已有文件
6. 存储
内部存储应部署于 @/src/store/index.js 文件中,使用 驼峰 命名法
外部存储可使用工具 @/src/utils/store.js 下的各函数进行操作
7. 路由
路由应部署于 @/src/router/index.js 文件中
8. 静态文件
资源建议放置于 @/src/assets 下
LBY 2021/03/30