Vue项目书写规范
1. 组件名为多个单词我们开发过程中自定义的组件的名称需要为多个单词，这样做可以避免跟现有的以及未来的HTML元素相冲突，因为所有的 HTML 元素名称都是单个单词的。推荐：Vue.component('todo-item', {// ...})export default {name: 'TodoItem',// ...}不推荐：Vue.component('todo', {// ...})ex
Vue-cli2的配置：
|— build 构建脚本目录
|— build.js 生产环境构建（编译打包）脚本
|— check-versions.js 版本验证工具
|— utils.js 构建相关工具方法（主要用来处理css类文件的loader）
|— vue-loader.conf.js 处理vue中的样式
|— webpack.base.conf.js webpack基础配置
|— webpack.dev.conf.js webpack开发环境配置
|— webapck.prod.conf.js webpack生产环境配置
|— config 项目配置
|— dev.env.js 开发环境变量
|— index.js 主配置文件
|— prod.env.js 生产环境变量
|— test.env.js 测试环境变量
|— node_modules 项目依赖模块
|— mock mock数据目录，用于本地数据模拟
|— src 项目源码目录
|— assets 资源目录，资源会被webpack构建
|— js 公共js文件目录
|— css 公共样式文件目录
|— images 图片存放目录
|— components 公共组件目录
|— common
|— network 存放项目的网络模块，接口
|— tools 自己封装的一些工具
|— App.vue 根组件
|— main.js 入口js文件
|— routers 前端路由目录
|— index.js
|— pages 前端页面文件
|— store 应用级数据管理
|— index.js 组装模块并导出，统一管理导出，也可命名为store.js
|— state.js 单一状态树，定义应用数据结构及初始化状态
|— getters.js 获取state中的状态，仅单向获取数据，不做任何修改
|— actions.js 调用mutation方法对数据进行操作
|— mutation-types.js 存放vuex常用的变量
|— mutations.js 定义state数据的修改操作
|— static 纯静态资源，不会被webpack构建，eg:没有npm包模块
|— test 测试
|— unit 单元测试
|— e2e e2e测试
|— .babelrc babel的配置文件
|— .editorconfig 编辑器的配置文件
|— .gitignore git的忽略配置文件
|— .postcssrc.js postcss的配置文件
|— index.html html模板，入口页面
|— package.json npm包配置文件，依赖包信息
|— README.md 项目介绍
Vue-cli3的配置：
|-- dist 打包后文件夹
|-- public 静态文件夹
| |-- favicon.ico
| |-- index.html 入口页面
|-- src 源码目录
| |--assets 模块资源
| |--components vue公共组件
| |--views
| |--App.vue 页面入口文件
| |--main.js 入口文件，加载公共组件
| |--router.js 路由配置
| |--store.js 状态管理
|-- .env.pre-release 预发布环境
|-- .env.production 生产环境
|-- .env.test 测试环境
|-- vue.config.js 配置文件
|-- .eslintrc.js ES-lint校验
|-- .gitignore git忽略上传的文件格式
|-- babel.config.js babel语法编译
|-- package.json 项目基本信息
|-- postcss.config.js CSS预处理器(此处默认启用autoprefixer)
1. 功能页面推荐采用驼峰式命名
LeftNav
2. 页面中的每个函数推荐写上该函数的作用
/**
* @description: 跳转到找回密码页面
*/
skipPassword() {
},
3. 推荐使用turbo console log插件来生成console.log
快捷添加 console.log，一键 注释 / 启用 / 删除 所有 console.log。
ctrl + alt + l 选中变量之后，使用这个快捷键生成 console.log
alt + shift + c 注释所有 console.log
alt + shift + u 启用所有 console.log
alt + shift + d 删除所有 console.log
4. 在请求接口的时候要有错误的回调
推荐：
/**
* @description: 获取个人用户信息
*/
selectUserInfoById() {
const vm = this;
this.axios({
}) .then(function(response) {
}).catch(function(error) {
vm.handleAjaxError(error, "用户信息失败！")
})
},
/**
* @description: 处理ajax请求错误页面提示信息
*/
handleAjaxError(error, msg) {
let vm = this;
if (error && error.response) {
vm.$message.error({
type: "error",
message: error.response.data,
})
} else {
vm.$message.error({
type: "error",
message: msg,
})
}
},
不推荐：
/**
* @description: 获取个人用户信息
*/
selectUserInfoById() {
const vm = this;
this.axios({
}) .then(function(response) {
}).catch(function(error) {
console.log("error submit!!");
})
},
5. 每个页面推荐写上该功能模块所属页面信息
<!--
* @Descripttion: 上传附件公共组件
* @version:
* @Author:
* @email:
* @Date:
* @LastEditors:
* @LastEditTime:
-->
6. 每次写完代码时候局部格式化代码
7. 每个页面都会用到的功能封装成公共组件，并且注册成全局组件
推荐：
//注册全局公共组件确认框组件
import confirm from '@/components/confirm/index.js'
Vue.component("confirm", confirm)
8. el-option选项过多的时候使用计算属性来生成
推荐：
<el-form-item label="日期" prop="salaryDay" >
<el-select placeholder="请选择" clearable filterable>
<el-option
v-for="(item,index) in daySelct"
:key="index"
:value="item.value"
:label="item.label"
></el-option>
</el-select>
</el-form-item>
computed: {
daySelct() {
var daySelct = [];
for (var i = 1; i <= 31; i++) {
var obj = {};
obj.value = i;
obj.label = i;
daySelct.push(obj);
}
return daySelct;
},
}
9. v-for 遍历避免同时使用 v-if
v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必要情况下应该替换成 computed 属性。
推荐：
<ul>
<li
v-for="user in activeUsers"
:key="user.id">
{{ user.name }}
</li>
</ul>
computed: {
activeUsers: function () {
return this.users.filter(function (user) {
return user.isActive
})
}
}
不推荐：
<ul>
<li
v-for="user in activeUsers"
v-if="user.isActive"
:key="user.id">
{{ user.name }}
</li>
</ul>
10. 合理使用v-if 和 v-show
v-if 是 真正 的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；
也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
v-show 就简单得多， 不管初始条件是什么，元素总是会被渲染，
并且只是简单地基于 CSS 的 display 属性进行切换。
所以，v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；
v-show 则适用于需要非常频繁切换条件的场景。
11. 组件名为多个单词
我们开发过程中自定义的组件的名称需要为多个单词，这样做可以避免跟现有的以及未来的HTML元素相冲突，因为所有的 HTML 元素名称都是单个单词的。
推荐：
Vue.component('todo-item', {
// ...
})
export default {
name: 'TodoItem',
// ...
}
不推荐：
Vue.component('todo', {
// ...
})
export default {
name: 'Todo',
// ...
}
12. 组件的 data 必须是一个函数
当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个对象的函数。 因为如果直接是一个对象的话，子组件之间的属性值会互相影响。
推荐：
export default {
data () {
return {
foo: 'bar'
}
}
}
不推荐：
export default {
data: {
foo: 'bar'
}
}
13. Prop定义应该尽量详细
prop 的定义应该尽量详细，至少需要指定其类型。
推荐：
props: {
status: String
}
// 更好的做法！
props: {
status: {
type: String,
required: true,
validator: function (value) {
return [
'syncing',
'synced',
'version-conflict',
'error'
].indexOf(value) !== -1
}
}
}
不推荐：
props: ['status']
14. 为 v-for 设置键值
v-for 中总是有设置 key 值。在组件上总是必须用 key 配合 v-for，以便维护内部组件及其子树的状态。
推荐：
<ul>
<li
v-for="todo in todos"
:key="todo.id">
{{ todo.text }}
</li>
</ul>
不推荐：
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
15. 完整单词的组件名
组件名应该倾向于完整单词而不是缩写，编辑器中的自动补全已经让书写长命名的代价非常之低了，而其带来的明确性却是非常宝贵的。不常用的缩写尤其应该避免。
推荐：
components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue
不推荐：
components/
|- SdSettings.vue
|- UProfOpts.vue
16. 多个特性元素的每个特性分行
在 JavaScript 中，用多行分隔对象的多个属性是很常见的最佳实践，因为这样更易读。
推荐：
<MyComponent
foo="a"
bar="b"
baz="c"
/>
不推荐：
<MyComponent foo="a" bar="b" baz="c"/>
17. 模板中简单的表达式
组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。复杂表达式会让你的模板变得不那么声明式。我们应该尽量描述应该出现的是什么，而非如何计算那个值。而且计算属性和方法使得代码可以重用。
推荐：
<!-- 在模板中 -->
{{ normalizedFullName }}
// 复杂表达式已经移入一个计算属性
computed: {
normalizedFullName: function () {
return this.fullName.split(' ').map(function (word) {
return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}
}
不推荐：
{{
fullName.split(' ').map(function (word) {
return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}}
18. 尽量不手动操作 DOM
19. 删除弃用代码
20. 复制页面 name值一定要改 不然页面缓存会有问题
前往低代码交流专区
更多推荐
4
0- 0
已为社区贡献12条内容
所有评论(0)