# Luna Vue

**Repository Path**: eotodo/luna-vue

## Basic Information

- **Project Name**: Luna Vue
- **Description**: luna vue开发规范
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-02-22
- **Last Updated**: 2021-11-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# luna

vue luna 开发规范

## 目录

```
|- public
|- src
|-|- assets
|-|- |- css               存放公共css
|-|- |- img               存放图片资源
|-|- |- js                存放三方js
|-|- widget               公共组件（等同vue中的components）
|-|- config               配置文件
|-|- dso                  高业务耦合工具模块，不可跨项目使用
|-|-|- apis              业务网络请求
|-|-|- apis/apiUtil.js     网络请求工具函数出口
|-|-|- router             业务路由模块
|-|-|- router/index.js    业务路由集中出口
|-|- utils                低耦合性，工具函数
|-|-|- utils/index.js       工具函数集中导出出口
|-|- |-utils/tool           工具函数集合
|-|- views                视图层
|-|- APP.vue              入口文件
|-|- main.js              入口文件


```

## 基于模板开发

始终基于模块的方式来构建你的 `app`，我们期望，一个模块是应用程序中独立出去的一个部分，每一个模块只做一件事情。

### 如何做？

- 每一个 `vue` 组件首先必须专注于解决一个单一的问题，独立的，可复用的、微小的和可测试的。
- 一般来说，尽量保证每一个文件的代码行数不要超过 100 行，当然对于复杂的应用，我们要按照实际情况来。
- 尽可能保证组件的可独立运行，以方便我们后边的拿来即用。

## 组件

组件的命名需遵从以下规则：

- 有意义的：不过于具体，也不过于抽象
- 简短：2 到 3 个单词
- 具有可读性：以便于沟通交流
- \*\*必须符合自定义元素规范，使用连字符分隔单词，切勿使用保留字
- \*\*通用性：如果非常通用的话可使用一个单词来命名，这样可以方便于其它项目里复用

### 如何做？

```html
<!-- 推荐 -->
<app-header></app-header>
<user-list></user-list>
<range-slider></range-slider>

<!-- 避免 -->
<btn-group></btn-group>
<!-- 虽然简短但是可读性差. 使用 `button-group` 替代 -->
<ui-slider></ui-slider>
<!-- ui 前缀太过于宽泛，在这里意义不明确 -->
<slider></slider>
<!-- 与自定义元素规范不兼容 -->
```

### 组件命名规则

组件的命名需遵循以下规则：

1. `vue` 文件代表着页面的名字
2. 放在模块文件下
3. 只有一个文件的情况下，我们尽量期望也放在目录下面，因为我们不能保证需求是否会更改，这样会影响我们的文件引入
4. 尽量是名词
5. 大写开头，开头的单词就是所属模块的名字

```js
CarDetail.vue
CarEdit.vue
CarList.vue
```

6. 简短，2-3 个单词
7. 常用结尾单词有：

```js
**Detail.vue
***Edit.vue
***List.vue
***Info.vue
***Report.vue
```

8. 以 item 结尾的代表着组件

```js
CarListItem.vue
CarInfoItem.vue
```

#### 基础组件名

- 基础组件名
  应用特定样式和约定的基础组件（也就是展示类的、无逻辑的、或无状态的组件）应该以一个特定的前缀开头，比如 `base、App`。

```js
[template]

components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

```

#### 单例组件名

- 单例组件名

只应该拥有单个活跃实例的组件应该以 `The` 前缀命名，以表示其唯一性。

这不意味着组件只可用于一个单页面，而是每个页面只使用一次。这些组件永远不接受任何 `prop`,因为他们是为你的应用定制的，而不是它们在你的应用中的上下文。如果你发现有必须要添加 `prop` 这就表明这实际上是一个可复用的组件，只是目前在每个页面里面只使用一次。

```js
[template]

components/
|- TheHeading.vue
|- TheSidebar.vue

```

#### 紧密耦合的组件名

- 紧密耦合的组件名

和父组件紧密耦合的子组件，我们期望能够在当前文件下新建 `module`来进行存放。

#### 组件名中的单词顺序

- 组件名中的单词顺序

组件名应该以高级别的（通常是一般化描述的）单词开头，以描述性的修饰词结尾。

```js
[template]

components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue
```

由于编辑器通常会按照字母顺序组织文件，所以我们期望把相关链的文件排列在一起。

```js
[template]

components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue
components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue
```

## 文件夹及文件命名规则

### 文件夹

1. 文件夹代表着模块的名字
2. 由名词组成

```
car、order、cart
```

3. 尽量是名词

```
good：car
bad：greet、good
```

4. 以小写开头

```
good：car
bad：Car
```

## method 方法

### methods 方法命名规则

1. 动宾短语

```
good：  jumpPage、openCarInfoDialog
bad:    go、nextPage、show、open、login
```

2. 尽量使用常用单词开头

```
set、get、open、close、jump
```

3. 小驼峰命名

```
good:   getListData
bad:    get_list_data、getlistData
```

### 组件结构化

按照一定的结构组织，使得组件便于理解。

#### 为什么？

- 导出一个清晰，组织有序的组件，使得代码易于阅读和理解，同时也便于标准化
- 合理组织，使得组件易于阅读。（name; extends; props, data 和 computed; components; watch 和 methods; lifecycle methods 等）

#### 怎么做？

组件结构化

```vue
<template lang="html">
  <div class="Ranger__Wrapper">
    <!-- ... -->
  </div>
</template>

<script type="text/javascript">
export default {
  // 不要忘记了 name 属性
  name: 'RangeSlider',
  // 使用组件 mixins 共享通用功能
  mixins: [],
  // 使用其它组件
  components: {},
  // 组成新的组件
  extends: {},
  // 组件属性、变量
  props: {
    bar: {}, // 按字母顺序
    foo: {},
    fooBar: {},
  },
  // 变量
  data() {
    return {}
  },
  creted() {},
  mounted() {},
  computed: {},
  // 使用其它组件
  components: {},
  // 方法
  watch: {},
  methods: {},
  // 生命周期函数
  beforeCreate() {},
  mounted() {},
}
</script>

<style scoped>
.Ranger__Wrapper {
 <!-- ... -->
}
</style>
```

## v-for 与 v-if

- 总是用 `key` 配合 `v-for`，我们强制要求为 for 循环添加 key
- 避免 `v-if` 与 `v-for` 使用在一起，我们强制要求避免 v-for 和 v-if 用在一起，如果有需要，请嵌套一层进行使用。

## Prop

### prop 命名规则

在生命 prop 的时候，其命名应该始终使用小驼峰

```js
[template]

props: {
 greetingText: String
}

WelcomeMessage greeting-text="hi"/>

```

### prop 定义

prop 定义应该尽量详细，在你提交的代码中，prop 的定义应该尽量详细，至少需要指定其类型

- 指明组件的 api，所以很容易看懂组件的用法
- 在开发环境下，如果一个组件提供格式不正确的 prop，vue 将会警告，以帮助捕获潜在的错误来源。

```js
[template]

props: {
  status: String
}

// 更好的做法！
props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}

```

## 元素

### 元素特性的顺序

1. is
2. v-for
3. v-if
4. v-else-if
5. v-else
6. v-show
7. v-cloak
8. v-pre
9. v-once
10. id
11. ref
12. key
13. slot
14. v-model
15. v-on
16. v-html
17. v-text

#### 详解

1. 定义（提供组件的选项）

- is

2. 列表渲染

- v-for

3. 条件渲染

- v-if
- v-else-id
- v-else
- v-show
- v-cloak

4. 渲染方式

- v-pre
- v-once

5. 全局感知（需要超越组件的知识）

- id

6. 唯一的特性(需要唯一值的特性)

- ref
- key
- slot

7. 双向绑定

- v-model

8. 其它特性
9. 事件

- v-on

10. 内容

- v-html
- v-text

### 多个特性的元素摆放规则

多个特性的元素应该分行撰写，每个特性一行。
在 js 中，用多行分割对象的多个属性是常见的最佳实践，因为这样更易读。

```js
[good]

<img
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo"
>
<MyComponent
  foo="a"
  bar="b"
  baz="c"
/>


[bad]

<img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
<MyComponent foo="a" bar="b" baz="c"/>


```

## 文件引入路径

资源引入，用“@/”来指向 src 的根路径

```html
<img :src="@/" />
```

css 的文件引用路径如下，用“~@”替换之前的"../../"：

```css
<style lang="less">
@import '~@/styles/common.less';
@import '~@/styles/table.less';
</style>

```

vue 组件引用路径如下，用“@”直接引用 src 目录下的文件

```js
import ajaxTree from '@/components/tree/ajaxTree'
import VmTable from '@/components/table/vm-table'
```

## Project setup

```
npm install
```

### Compiles and hot-reloads for development

```
npm run serve   启动项目，直接打开浏览器
npm run dev     启动项目，默认不打开浏览器
```

### Compiles and minifies for production

```
npm run build
```

### Lints and fixes files

```
npm run lint
```

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).