前端代码规范 -- vue篇

组件命名规范

PascalCase (单词首字母大写命名)是最通用的声明约定

kebab-case (短横线分隔命名) 是最通用的使用约定

Prop定义

prop定义应该尽量详细，至少需要指定其类型。

反例：

props: ['status']

好例子：

props: {
  status: String,
  default: '',
}

Prop 名大小写

在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。

反例：

props: {
  'greeting-text': String
}

<welcome-message greetingText="hi"></welcome-message>

好例子：

props: {
  greetingText: String
}

<welcome-message greeting-text="hi"></welcome-message>

使用 ES6 风格编码

1. 定义变量使用 let ,定义常量使用 const
2. 模板字符串

 // bad
  const a = 'foobar'
  const b = 'foo' + a + 'bar'

  // good
  const a = 'foobar'
  const b = `foo${a}bar`

3. 解构赋值

 // 对象解构赋值
  // bad
  function getFullName(user) {
    const firstName = user.firstName
    const lastName = user.lastName
  }

  // good
  function getFullName(user) {
    const { firstName, lastName } = user 
  }

4. 扩展运算符

  const items = [1, 2, 3, 4, 5]

  // bad
  const itemsCopy = items

  // good
  const itemsCopy = [...items]

组件/实例的选项顺序(将选择和认知成本最小化)

  <script>
    export default {
      components : {
      },
      
      props: {
	  },
	  
      data () {
        return {
        }
      },
      
      computed: {
      },
      
      watch: {
      },
      
      mounted() {
      },
      
      methods: {
      }
   }
  </script>

目录文件（store）

src
|-- store 
|    |-- index.js
|    |-- page1
|    |-- |-- index1.js
|    |-- page2
|    |-- |-- index2.js

index1.js, index1.js文件

const state = {}

const getters = {}

const mutations = {}

const actions = {}

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

index.js文件

import page1 from './page1'
import page2 from './page2'

export default new Vuex.Store({
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {
  	page1,
  	page2,
  },
})