import Vue from 'vue';

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

import App from './App.vue';

Vue.use(ElementUI);

new Vue({

  el: '#app',

  render: h => h(App)

});

npm install babel-plugin-component -D

{

  "presets": [["es2015", { "modules": false }]],

  "plugins": [

    [

      "component",

      {

        "libraryName": "element-ui",

        "styleLibraryName": "theme-chalk"

      }

    ]

  ]

}

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue';

import App from './App';

import 'element-ui/lib/theme-chalk/index.css';

import router from './router';

import ElementUI from 'element-ui';

Vue.config.productionTip = false

Vue.use(ElementUI)

/* eslint-disable no-new */

new Vue({

  el: '#app',

  router,

  components: { App },

  template: '<App/>'

})

<template>

    <el-container>

        <el-header>

            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">

                <el-menu-item index="">项目搜索</el-menu-item>

                <el-menu-item index="">简介</el-menu-item>

                <el-menu-item index="">消息中心</el-menu-item>

                <el-menu-item index=""><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>

            </el-menu>

        </el-header>

        <el-main>Main</el-main>

        <el-footer>Footer</el-footer>

    </el-container>

</template>

<script>

    export default{

        name:'App',

        data(){

            return{

                msg:'vue',

                activeIndex:"",

                // activeIndex2:"1",

            };

        },

        methods:{

            handleSelect(key,keyPath){

                console.log(key,keyPath)

            }

        }

    }

</script>

<style scoped>

      .el-header, .el-footer {

        background-color: #B3C0D1;

        color: #;

        text-align: center;

        line-height: 60px;

      }

    .el-main {

        background-color: #E9EEF3;

        color: #;

        text-align: center;

        line-height: 160px;

      }

</style>

<div id="components-demo">

  <button-counter></button-counter>

  <button-counter></button-counter>

  <button-counter></button-counter>

</div>

data: {

  count:

}

data: function () {

  return {

    count:

  }

}

Vue.component('my-component-name', {

  // ... options ...

})

例如：
好：

Vue.component('todo-item', {

  // ...

})

export default {

  name: 'TodoItem',

  // ...

}
反例：
Vue.component('todo', {
  // ...
})

export default {
  name: 'Todo',
  // ...
}

当 data 的值是一个对象时，它会在这个组件的所有实例之间共享。想象一下，假如一个 TodoList 
组件的数据是这样的：

data: {

  listTitle: '',

  todos: []

}

我们可能希望重用这个组件，允许用户维护多个列表 (比如分为购物、心愿单、日常事务等)。
这时就会产生问题。因为每个组件的实例都引用了相同的数据对象，更改其中一个列表的标题就会改变其它
每一个列表的标题。增删改一个待办事项的时候也是如此。

取而代之的是，我们希望每个组件实例都管理其自己的数据。为了做到这一点，每个实例必须生成一个独立的数据对象。在 JavaScript 中，在一个函数中返回这个对象就可以了：

data: function () {

  return {

    listTitle: '',

    todos: []

  }

}

样本

反例

Vue.component('some-comp', {

  data: {

    foo: 'bar'

  }

})

export default {

  data: {

    foo: 'bar'

  }

}

好例

Vue.component('some-comp', {

  data: function () {

    return {

      foo: 'bar'

    }

  }

})

// In a .vue file

export default {

  data () {

    return {

      foo: 'bar'

    }

  }

}

// 在一个 Vue 的根实例上直接使用对象是可以的，

// 因为只存在一个这样的实例。

new Vue({

  data: {

    foo: 'bar'

  }

})

细致的 prop 定义有两个好处：

    它们写明了组件的 API，所以很容易看懂组件的用法；

    在开发环境下，如果向一个组件提供格式不正确的 prop，Vue 将会告警，以帮助你捕获潜在的错误来源。

样本:

反例：

// 这样做只有开发原型系统时可以接受

props: ['status']

好例子

props: {

  status: String

}

// 更好的做法！

props: {

  status: {

    type: String,

    required: true,

    validator: function (value) {

      return [

        'syncing',

        'synced',

        'version-conflict',

        'error'

      ].indexOf(value) !== -

    }

  }

}

假设你有一个待办事项列表：

data: function () {

  return {

    todos: [

      {

        id: ,

        text: '学习使用 v-for'

      },

      {

        id: ,

        text: '学习使用 key'

      }

    ]

  }

}

然后你把它们按照字母顺序排序。在更新 DOM 的时候，Vue 将会优化渲染把可能的 DOM 变动降到最低。即可能删掉第一个待办事项元素，然后把它重新加回到列表的最末尾。

这里的问题在于，不要删除仍然会留在 DOM 中的元素。比如你想使用 <transition-group> 给列表加过渡动画，或想在被渲染元素是 <input> 时保持聚焦。在这些情况下，为每一个项目添加一个唯一的键值 (比如 :key="todo.id") 将会让 Vue 知道如何使行为更容易预测。

根据我们的经验，最好始终添加一个唯一的键值，以便你和你的团队永远不必担心这些极端情况。也在少数对性能有严格要求的情况下，为了避免对象固化，你可以刻意做一些非常规的处理。

详解

反例

<ul>

  <li v-for="todo in todos">

    {{ todo.text }}

  </li>

</ul>

好例

<ul>

  <li

    v-for="todo in todos"

    :key="todo.id"

  >

    {{ todo.text }}

  </li>

</ul>

当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，所以这个模板：

<ul>

  <li

    v-for="user in users"

    v-if="user.isActive"

    :key="user.id"

  >

    {{ user.name }}

  </li>

</ul>

将会经过如下运算：

this.users.map(function (user) {

  if (user.isActive) {

    return user.name

  }

})

因此哪怕我们只渲染出一小部分用户的元素，也得在每次重渲染的时候遍历整个列表，不论活跃用户是否发生了变化。

通过将其更换为在如下的一个计算属性上遍历：

computed: {

  activeUsers: function () {

    return this.users.filter(function (user) {

      return user.isActive

    })

  }

}

<ul>

  <li

    v-for="user in activeUsers"

    :key="user.id"

  >

    {{ user.name }}

  </li>

</ul>

我们将会获得如下好处：

    过滤后的列表只会在 users 数组发生相关变化时才被重新运算，过滤更高效。

    使用 v-for="user in activeUsers" 之后，我们在渲染的时候只遍历活跃用户，渲染更高效。

    解藕渲染层的逻辑，可维护性 (对逻辑的更改和扩展) 更强。

为了获得同样的好处，我们也可以把：

<ul>

  <li

    v-for="user in users"

    v-if="shouldShowUsers"

    :key="user.id"

  >

    {{ user.name }}

  </li>

</ul>

更新为：

<ul v-if="shouldShowUsers">

  <li

    v-for="user in users"

    :key="user.id"

  >

    {{ user.name }}

  </li>

</ul>

通过将 v-if 移动到容器元素，我们不会再对列表中的每个用户检查 shouldShowUsers。取而代之的是，我们只检查它一次，且不会在 shouldShowUsers 为否的时候运算 v-for。

详解

样例：

反例：

<ul>

  <li

    v-for="user in users"

    v-if="user.isActive"

    :key="user.id"

  >

    {{ user.name }}

  </li>

</ul>

<ul>

  <li

    v-for="user in users"

    v-if="shouldShowUsers"

    :key="user.id"

  >

    {{ user.name }}

  </li>

</ul>

好例：

<ul>

  <li

    v-for="user in activeUsers"

    :key="user.id"

  >

    {{ user.name }}

  </li>

</ul>

<ul v-if="shouldShowUsers">

  <li

    v-for="user in users"

    :key="user.id"

  >

    {{ user.name }}

  </li>

</ul>

详解：

如果你和其他开发者一起开发一个大型工程，或有时引入三方 HTML/CSS (比如来自 Auth0)，
设置一致的作用域会确保你的样式只会运用在它们想要作用的组件上。

不止要使用 scoped 特性，使用唯一的 class 名可以帮你确保那些三方库的 CSS 不会运用在你自己的 HTML 上。
比如许多工程都使用了 button、btn 或 icon class 名，所以即便你不使用类似 BEM 的策略，
添加一个 app 专属或组件专属的前缀 (比如 ButtonClose-icon) 也可以提供很多保护。

样例：

反例：

<template>

  <button class="btn btn-close">X</button>

</template>

<style>

.btn-close {

  background-color: red;

}

</style>

------------------------------------------------------------------------

好例
1

<template>

  <button class="button button-close">X</button>

</template>

<!-- 使用 `scoped` 特性 -->

<style scoped>

.button {

  border: none;

  border-radius: 2px;

}

.button-close {

  background-color: red;

}

</style>

2

<template>

  <button :class="[$style.button, $style.buttonClose]">X</button>

</template>

<!-- 使用 CSS Modules -->

<style module>

.button {

  border: none;

  border-radius: 2px;

}

.buttonClose {

  background-color: red;

}

</style>

3

<template>

  <button class="c-Button c-Button--close">X</button>

</template>

<!-- 使用 BEM 约定 -->

<style>

.c-Button {

  border: none;

  border-radius: 2px;

}

.c-Button--close {

  background-color: red;

}

</style>

详解：

Vue 使用 _ 前缀来定义其自身的私有属性，所以使用相同的前缀 (比如 _update) 有覆写实例属性的风险。
即便你检查确认 Vue 当前版本没有用到这个属性名，也不能保证和将来的版本没有冲突。

对于 $ 前缀来说，其在 Vue 生态系统中的目的是暴露给用户的一个特殊的实例属性，所以把它用于私有属性并不合适。

不过，我们推荐把这两个前缀结合为 $_，作为一个用户定义的私有属性的约定，以确保不会和 Vue 自身相冲突。

样例

反例

var myGreatMixin = {

  // ...

  methods: {

    update: function () {

      // ...

    }

  }

}

var myGreatMixin = {

  // ...

  methods: {

    _update: function () {

      // ...

    }

  }

}

var myGreatMixin = {

  // ...

  methods: {

    $update: function () {

      // ...

    }

  }

}

var myGreatMixin = {

  // ...

  methods: {

    $_update: function () {

      // ...

    }

  }

}

好例子

var myGreatMixin = {

  // ...

  methods: {

    $_myGreatMixin_update: function () {

      // ...

    }

  }

}

反例

Vue.component('TodoList', {

  // ...

})

Vue.component('TodoItem', {

  // ...

})

好例子

components/

|- TodoList.js

|- TodoItem.js

components/

|- TodoList.vue

|- TodoItem.vue

反例

components/

|- mycomponent.vue

components/

|- myComponent.vue

好例子

components/

|- MyComponent.vue

components/

|- my-component.vue

详解：

这些组件为你的应用奠定了一致的基础样式和行为。它们可能只包括：

    HTML 元素

    其它基础组件

    第三方 UI 组件库

但是它们绝不会包括全局状态 (比如来自 Vuex store)。

它们的名字通常包含所包裹元素的名字 (比如 BaseButton、BaseTable)，除非没有现成的对应功能的元素 (比如 BaseIcon)。
如果你为特定的上下文构建类似的组件，那它们几乎总会消费这些组件 (比如 BaseButton 可能会用在 ButtonSubmit 上)。

这样做的几个好处：

    当你在编辑器中以字母顺序排序时，你的应用的基础组件会全部列在一起，这样更容易识别。

    因为组件名应该始终是多个单词，所以这样做可以避免你在包裹简单组件时随意选择前缀 (比如 MyButton、VueButton)。

    因为这些组件会被频繁使用，所以你可能想把它们放到全局而不是在各处分别导入它们。使用相同的前缀可以让 webpack 这样工作：

    var requireComponent = require.context("./src", true, /^Base[A-Z]/)

    requireComponent.keys().forEach(function (fileName) {

      var baseComponentConfig = requireComponent(fileName)

      baseComponentConfig = baseComponentConfig.default || baseComponentConfig

      var baseComponentName = baseComponentConfig.name || (

        fileName

          .replace(/^.+\//, '')

          .replace(/\.\w+$/, '')

      )

      Vue.component(baseComponentName, baseComponentConfig)

    })

样例

反例

components/

|- MyButton.vue

|- VueTable.vue

|- Icon.vue

好例子

components/

|- BaseButton.vue

|- BaseTable.vue

|- BaseIcon.vue

components/

|- AppButton.vue

|- AppTable.vue

|- AppIcon.vue

components/

|- VButton.vue

|- VTable.vue

|- VIcon.vue

反例

components/

|- Heading.vue

|- MySidebar.vue

好例子

components/

|- TheHeading.vue

|- TheSidebar.vue

详解

你可以试着通过在其父组件命名的目录中嵌套子组件以解决这个问题。比如：

components/

|- TodoList/

   |- Item/

      |- index.vue

      |- Button.vue

   |- index.vue

或：

components/

|- TodoList/

   |- Item/

      |- Button.vue

   |- Item.vue

|- TodoList.vue

但是这种方式并不推荐，因为这会导致：

    许多文件的名字相同，使得在编辑器中快速切换文件变得困难。

    过多嵌套的子目录增加了在编辑器侧边栏中浏览组件所花的时间。

样例
反例

components/

|- TodoList.vue

|- TodoItem.vue

|- TodoButton.vue

components/

|- SearchSidebar.vue

|- NavigationForSearchSidebar.vue

好例子

components/

|- TodoList.vue

|- TodoListItem.vue

|- TodoListItemButton.vue

components/

|- SearchSidebar.vue

|- SearchSidebarNavigation.vue

    “为什么我们给组件命名时不多遵从自然语言呢？”

在自然的英文里，形容词和其它描述语通常都出现在名词之前，否则需要使用连接词。比如：

    Coffee with milk

    Soup of the day

    Visitor to the museum

如果你愿意，你完全可以在组件名里包含这些连接词，但是单词的顺序很重要。

同样要注意在你的应用中所谓的“高级别”是跟语境有关的。比如对于一个带搜索表单的应用来说，它可能包含这样的组件：

components/

|- ClearSearchButton.vue

|- ExcludeFromSearchInput.vue

|- LaunchOnStartupCheckbox.vue

|- RunSearchButton.vue

|- SearchInput.vue

|- TermsCheckbox.vue

你可能注意到了，我们很难看出来哪些组件是针对搜索的。现在我们来根据规则给组件重新命名：

components/

|- SearchButtonClear.vue

|- SearchButtonRun.vue

|- SearchInputExcludeGlob.vue

|- SearchInputQuery.vue

|- SettingsCheckboxLaunchOnStartup.vue

|- SettingsCheckboxTerms.vue

因为编辑器通常会按字母顺序组织文件，所以现在组件之间的重要关系一目了然。

你可能想换成多级目录的方式，把所有的搜索组件放到“search”目录，
把所有的设置组件放到“settings”目录。我们只推荐在非常大型 (如有 + 个组件) 的应用下才考虑这么做，因为：

    在多级目录间找来找去，要比在单个 components 目录下滚动查找要花费更多的精力。

    存在组件重名 (比如存在多个 ButtonDelete 组件) 的时候在编辑器里更难快速定位。

    让重构变得更难，因为为一个移动了的组件更新相关引用时，查找/替换通常并不高效。

反例

<!-- 在单文件组件、字符串模板和 JSX 中 -->

<MyComponent></MyComponent>

<!-- 在 DOM 模板中 -->

<my-component/>

好例子

<!-- 在单文件组件、字符串模板和 JSX 中 -->

<MyComponent/>

<!-- 在 DOM 模板中 -->

<my-component></my-component>

反例

<!-- 在单文件组件和字符串模板中 -->

<mycomponent/>

<!-- 在单文件组件和字符串模板中 -->

<myComponent/>

<!-- 在 DOM 模板中 -->

<MyComponent></MyComponent>

好例子

<!-- 在单文件组件和字符串模板中 -->

<MyComponent/>

<!-- 在 DOM 模板中 -->

<my-component></my-component>

或者

<!-- 在所有地方 -->

<my-component></my-component>

详解

在 JavaScript 中，PascalCase 是类和构造函数 (本质上任何可以产生多份不同实例的东西) 
的命名约定。Vue 组件也有多份实例，所以同样使用 PascalCase 是有意义的。额外的好处是，
在 JSX (和模板) 里使用 PascalCase 使得代码的读者更容易分辨 Vue 组件和 HTML 元素。

然而，对于只通过 Vue.component 定义全局组件的应用来说，我们推荐 kebab-case 作为替代。
原因是：

    全局组件很少被 JavaScript 引用，所以遵守 JavaScript 的命名约定意义不大。

    这些应用往往包含许多 DOM 内的模板，这种情况下是必须使用 kebab-case 的。

样例

反例

Vue.component('myComponent', {

  // ...

})

import myComponent from './MyComponent.vue'

export default {

  name: 'myComponent',

  // ...

}

export default {

  name: 'my-component',

  // ...

}

好例子

Vue.component('MyComponent', {

  // ...

})

Vue.component('my-component', {

  // ...

})

import MyComponent from './MyComponent.vue'

export default {

  name: 'MyComponent',

  // ...

}

反例

components/

|- SdSettings.vue

|- UProfOpts.vue

好例子

components/

|- StudentDashboardSettings.vue

|- UserProfileOptions.vue

反例

js

props: {

  'greeting-text': String

}

html

<WelcomeMessage greetingText="hi"/>

好例子

js

props: {

  greetingText: String

}

html

<WelcomeMessage greeting-text="hi"/>

***html对大小写不敏感

反例

<img src="https://vuejs.org/images/logo.png" alt="Vue Logo">

<MyComponent foo="a" bar="b" baz="c"/>

好例子

<img

  src="https://vuejs.org/images/logo.png"

  alt="Vue Logo"

>

<MyComponent

  foo="a"

  bar="b"

  baz="c"

/>

反例

html

{{

  fullName.split(' ').map(function (word) {

    return word[].toUpperCase() + word.slice()

  }).join(' ')

}}

好例子

html

<!-- 在模板中 -->

{{ normalizedFullName }}

js

// 复杂表达式已经移入一个计算属性

computed: {

  normalizedFullName: function () {

    return this.fullName.split(' ').map(function (word) {

      return word[].toUpperCase() + word.slice()

    }).join(' ')

  }

}

详解

更简单、命名得当的计算属性是这样的：

    易于测试

    当每个计算属性都包含一个非常简单且很少依赖的表达式时，撰写测试以确保其正确工作就会更加容易。

    易于阅读

    简化计算属性要求你为每一个值都起一个描述性的名称，即便它不可复用。这使得其他开发者 
(以及未来的你) 更容易专注在他们关心的代码上并搞清楚发生了什么。

    更好的“拥抱变化”

    任何能够命名的值都可能用在视图上。举个例子，我们可能打算展示一个信息，
告诉用户他们存了多少钱；也可能打算计算税费，但是可能会分开展现，而不是作为总价的一部分。

    小的、专注的计算属性减少了信息使用时的假设性限制，所以需求变更时也用不着那么多重构了。

样例

反例

js

computed: {

  price: function () {

    var basePrice = this.manufactureCost / ( - this.profitMargin)

    return (

      basePrice -

      basePrice * (this.discountPercent || )

    )

  }

}

好例子

js

computed: {

  basePrice: function () {

    return this.manufactureCost / ( - this.profitMargin)

  },

  discount: function () {

    return this.basePrice * (this.discountPercent || )

  },

  finalPrice: function () {

    return this.basePrice - this.discount

  }

}

反例html

<input type=text>

<AppSidebar :style={width:sidebarWidth+'px'}>

好例子 html

<input type="text">

<AppSidebar :style="{ width: sidebarWidth + 'px' }">

反例

<input

  v-bind:value="newTodoText"

  :placeholder="newTodoInstructions"

>

<input

  v-on:input="onInput"

  @focus="onFocus"

>

好例子

<input

  :value="newTodoText"

  :placeholder="newTodoInstructions"

>

<input

  v-bind:value="newTodoText"

  v-bind:placeholder="newTodoInstructions"

>

<input

  @input="onInput"

  @focus="onFocus"

>

<input

  v-on:input="onInput"

  v-on:focus="onFocus"

>

props: {

  value: {

    type: String,

    required: true

  },

  focused: {

    type: Boolean,

    default: false

  },

  label: String,

  icon: String

},

computed: {

  formattedValue: function () {

    // ...

  },

  inputClasses: function () {

    // ...

  }

}

反例

<template>

  <button>X</button>

</template>

<style scoped>

button {

  background-color: red;

}

</style>

好例子

<template>

  <button class="btn btn-close">X</button>

</template>

<style scoped>

.btn-close {

  background-color: red;

}

</style>

<body>

<div id="app">

  <my-component></my-component>

</div>

<div id="app1">

  <my-component></my-component>

</div>

<script>

  new Vue({

    el: "#app"

  });

  Vue.component("my-component", {

    template: "<h1>我是全局组件</h1>"

  });

  new Vue({

    el: "#app1"

  })

</script>

</body>