看了老外的一篇关于 (强烈建议阅读英文原版),感觉不错翻译一下加深理解。
这篇文章制定一个统一的规则来开发你的 vue 程序,以至于达到一下目的。
1. 让开发者和开发团队更容易发现一些事情。
2. 让你更好的利用你的 IDE.
3. 让你更加容易的使用打包工具
4. 让你的代码更容易碎片化以达到复用的目的。
用一些功能单一的小模块来组织你的应用
对于你自己和你团队的人来说较小的模块更容易看懂 维护 复用和调试。
每个组件应该保持单一 独立 可复用 可测试
把你很大的组件拆分成功能单一的小组件,尽量不让一个组件的代码超过 100 行,保持组件独立。最好是写个组件应用的小 demo
组件命名应该遵从以下几点原则
vue 组件也应该遵循以下原则
- <!-- 建议这样 -->
- <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>
- <!--不是我们适应的风格 -->
vue 的行内式表达式都是 js。当着这些 js 很有效,但是也很复杂。因此你应该保持行内表达式简洁
把复杂的语法移动到 methods 或者计算属性中
- <!-- recommended -->
- <template>
- <h1>
- {{ `${year}-${month}` }}
- </h1>
- </template>
- <script type="text/javascript">
- export
- default {
- computed:
- {
- month() {
- return this.twoDigits((new Date()).getUTCMonth() + 1);
- },
- year() {
- return (new Date()).getUTCFullYear();
- }
- },
- methods: {
- twoDigits(num) {
- return ('0' + num).slice( - 2);
- }
- },
- };
- </script>
- <!-- avoid -->
- <template>
- <h1>
- {{ `${(new Date()).getUTCFullYear()}-${('0' + ((new Date()).getUTCMonth()+1)).slice(-2)}`
- }}
- </h1>
- </template>
尽管 vue 支持通过 props 传递复杂的 object,但是你要尽量保持 props 传递的数据简单, 尽量只传递基本数据类型 (strings, numbers, booleans)
vue component 只传递简单数据类型或者函数如下
- <!-- recommended -->
- <range-slider
- :values="[10, 20]"
- min="0"
- max="100"
- step="5"
- :on-slide="updateInputs"
- :on-end="updateResults">
- </range-slider>
- <!-- avoid -->
- <range-slider :config="complexConfigObject"></range-slider>
vue 组件中 props 就是 api, 健壮且可预测的 api 让别人更容易使用你的组件
组件的 props 通过 html 属性来编写,这些值可以是 vue 的简答字符串(:attr="value" or v-bind:attr="value")也可以不写。你应该对 props 做一些限制
对 props 做一些限制保证你的组件正常工作,即使别人没有按照你预想的方式调用你的组件。
- <template>
- <input type="range" v-model="value" :max="max" :min="min">
- </template>
- <script type="text/javascript">
- export
- default {
- props:
- {
- max:
- {
- type:
- Number,
- // [1*] This will validate the 'max' prop to be a Number.
- default() {
- return 10;
- },
- },
- min: {
- type: Number,
- default() {
- return 0;
- },
- },
- value: {
- type: Number,
- default() {
- return 4;
- },
- },
- },
- };
- </script>
在组件内部上下文中, this 指的是 vue 组件实例,因此在其他上下文中使用它的时候保证'this'在组件中可以使用
换句话说, 不要这样写
- const self = this;
分配给会改变名字的组件,告诉开发者 this 是一个组件实例。
- this
让你的组件代码按照一定的顺序编写
属性,这样再使用 vue devtools 时便于开发测试。
- name
- <template lang="html">
- <div class="Ranger__Wrapper">
- <!-- ... -->
- </div>
- </template>
- <script type="text/javascript">
- export
- default {
- // Do not forget this little guy
- name:
- 'RangeSlider',
- // compose new components
- extends: {},
- // component properties/variables
- props: {
- bar: {},
- // Alphabetized
- foo: {},
- fooBar: {},
- },
- // variables
- data() {},
- computed: {},
- // when component uses other components
- components: {},
- // methods
- watch: {},
- methods: {},
- // component Lifecycle hooks
- beforeCreate() {},
- mounted() {},
- };
- </script>
- <style scoped>
- .Ranger__Wrapper { /* ... */ }
- </style>
vue 提供的 vue 处理函数和表达式是严格绑定在 vm 上的。每个组件事件应该遵循一个良好的命名规范从而避免开发中出现的问题。
vue 支持组件嵌套,子组件获得父组件上下文,但是获得外部上下文违反了组件独立的规定,所有不要使用 this.$patent
- this.$refs
vue 支持组件通过
来获得组件或者 dom 元素的上下文,大部分情况下这中用法应该被禁止。当你用他的时候也应该谨慎防止错误的组件 api。
- this.$refs
- this.$refs
是比 jquery 和
- this.$refs
好一些的选择
- document.getElement*
- <!-- good, no need for ref -->
- <range :max="max"
- :min="min"
- @current-value="currentValue"
- :step="1"></range>
- <!-- good example of when to use this.$refs -->
- <modal ref="basicModal">
- <h4>
- Basic Modal
- </h4>
- <button class="primary" @click="$refs.basicModal.close()">
- Close
- </button>
- </modal>
- <button @click="$refs.basicModal.open()">
- Open modal
- </button>
- <!-- Modal component -->
- <template>
- <div v-show="active">
- <!-- ... -->
- </div>
- </template>
- <script>
- export
- default {
- // ...
- data() {
- return {
- active:
- false,
- };
- },
- methods: {
- open() {
- this.active = true;
- },
- hide() {
- this.active = false;
- },
- },
- // ...
- };
- </script>
- <!-- avoid accessing something that could be emitted -->
- <template>
- <range :max="max"
- :min="min"
- ref="range"
- :step="1"></range>
- </template>
- <script>
- export default {
- // ...
- methods: {
- getRangeCurrentValue() {
- return this.$refs.range.currentValue;
- },
- },
- // ...
- };
- </script>
vue 组件的名字作为 css 根作用域类名是极好的。
把组件名作为 css 命名空间依赖 BEM 和 OOCSS(面向对象 css)。在 style 标签上加 scoped。加了 scoped 告诉 vue 在编译时给每个类名都加一个后缀,从而避免污染其余组件或者全局样式。
- <style scoped>
- /* recommended */
- .MyExample { }
- .MyExample li { }
- .MyExample__item { }
- /* avoid */
- .My-Example { } /* not scoped to component or module name, not BEM compliant */
- </style>
一个 vue 实例通过实例化应用中的组件而来。这个实例通过组件属性配置而来。如果组件要提供给其他开发者使用,这些定制的属性也就是组件的 api 应该写在 readme.md 中。
是一个文档应该先被阅读的。github 等代码仓库通过 README.md 来展示代码内容
- README.md
给一个组件增加
- README.md
- range-slider/
- ├── range-slider.vue
- ├── range-slider.less
- └── README.md
其余还包括给你的组件写小 demo,对组件做 eslint 代码审查。。
来源: http://www.cnblogs.com/ytu2010dt/p/6523586.html