Vue编码风格(1)

最新推荐文章于 2021-08-13 14:47:24 发布

kunyao8536

最新推荐文章于 2021-08-13 14:47:24 发布

阅读量178

点赞数

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/kunyao8536/article/details/100895065

版权

Vue 专栏收录该内容

3 篇文章

订阅专栏

1.前端使用的技术栈

Vue（2.0+）
vue三大插件axios,vuex,router
新增语法:es6,es7,es8
管理工具:webpack(4.0+)
常用插件:json-server
预编译语言:less,scss
第三方库:PC:elementui,iview,ant design;移动端:有赞vant,京东nut,滴滴cube,uni-app
服务端渲染SSR:nuxt,next,node:express,koa
脚手架:vue-cli(3.0+)

2.项目结构（基于脚手架）

├── build// 项目构建(webpack)相关代码
│ ├── build.js// 生产环境构建代码
│ ├── check-versions.js// 检查node、npm等版本
│ ├── utils.js// 构建工具相关
│ ├── vue-loader.conf.js// webpack loader配置
│ ├── webpack.base.conf.js// webpack基础配置
│ ├── webpack.dev.conf.js// webpack开发环境配置,构建开发本地服务器
│ └── webpack.prod.conf.js// webpack生产环境配置
├── config// 项目开发环境配置
│ ├── dev.env.js// 开发环境变量
│ ├── index.js// 项目一些配置变量
│ └── prod.env.js/ 生产环境变量
├── dist//项目打包后的文件
├── node_modules//依赖
├── src// 源码目录
│ ├── assets//资源目录
│ │ │── img//图片目录
│ │ │── js//js目录
│ │ │── font//字体和字体图标目录
│ │ └── css//css目录
│ ├── less//less目录
│ │ │── reset.less//重置css样式
│ │ │── public.less//定义一些公关的颜色、字体大小等变量，方便以后统一改风格
│ │ └── commonElement.less//重置elementUI样式
│ ├── components//组件目录
│ │ │── public//公共组件
│ │ └── Module//单个页面，或者单独模块的组件
│ ├── page//页面目录
│ │ └── Module//单个页面
│ ├── request
│ │ └── api.js//ajax请求全局封装位置(统一用axios)
│ ├── config//配置页面
│ │ └── config.js//ajax请求路径以及环境的配置（统一管理）
│ ├── router//路由文件
│ │ └── index.js//路由管理
│ ├── store//vueX目录(如果使用vuex)
│ │ │── state.js//状态管理
│ │ │── mutation.js//更改 Vuex 的 store 中的状态的唯一方法
│ │ │── action.js//Action 提交的是 mutation，而不是直接变更状态（异步操作）
│ │ └── module//也可以根据页面或者组件分模块
│ ├── util//工具函数文件
│ │ └── util.js//工具函数
│ ├── APP.vue // 页面入口文件
│ └── main.js // 程序入口文件，加载各种公共组件
├── static// 静态文件
├── .babelrc// ES6语法编译配置
├── .editorconfig// 定义代码格式
├── .postcsssrc// postcss配置文件
├── index.html// 入口页面
├── package.json// 项目基本信息,包依赖信息等
├── README.md// 项目说明

3.组件命名规范

**单文件组件文件名称:**单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。

// bad
mycomponent.vue
myComponent.vue
// good
my-component.vue
MyComponent.vue
**紧密耦合的组件名:**和父组件紧密耦合的子组件应该以父组件名作为前缀命名。

// bad

components/

|- TodoList.vue

|- TodoItem.vue

└─ TodoButton.vue

// good

components/

|- TodoList.vue

|- TodoListItem.vue

└─ TodoListItemButton.vue

**自闭合组件:**在单文件组件中没有内容的组件应该是自闭合的。

Prop

**Props名大小写:**在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板中应该始终使用 kebab-case。

// bad
exportdefault{props: {‘greeting-text’:String}};
// good
exportdefault{props: {greetingText:String}}
**Props 换行:**多个 Props 的元素应该分多行撰写，每个 Props 一行，闭合标签单起一行。

三.指令缩写

指令缩写，用 : 表示 v-bind: ，用 @ 表示 v-on:
Props 顺序:标签的 Props 应该有统一的顺序，依次为指令、属性和事件。

组件选项的顺序:组件选项应该有统一的顺序。
export default {
name: ‘’,
mixins: [],
components: {},
props: {},
data() {},
computed: {},
watch: {},
created() {},
mounted() {},
destroyed() {},
methods: {}
};
**组件选项中的空行:**组件选项较多时，建议在属性之间添加空行。
**单文件组件顶级标签的顺序:**单文件组件应该总是让顶级标签的顺序保持一致，且标签之间留有空行。