vue.js - vue组件使用常用功能

Question

我正在寻找对 Vue CLI3 项目系统的处理。目前正在将内联 vue 的长单个 html 文件重构为真正的“.vue”组件。一个目标是在我的 vue 组件中使用一些常用功能来处理各种事情。在我的 common-functions.js 文件中，我有这样的内容：

function capitalize(str) {
    return str[0].toUpperCase() + str.substr(1, );
};

在我的 HelloWorld.vue 文件中，我得到了这个，但它并没有通过许多不同的尝试。我发现的所有搜索似乎都在处理其他事情，当然有一种简单的方法可以使用一些常用功能，对吧？

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <ul>
      <li v-for='c in categoryNames'>{{ c }}</li>
    </ul>
  </div>
</template>

<script>

  require('../js/common-functions.js');

  export default {
    name: 'HelloWorld',
    data () {
      return {
        msg: capitalize('welcome to Your Vue.js App!'),
        categoryNames : this.$root.categoryNames
      }
    }
  }

</script>

当然消息是：

[Vue warn]: Error in data(): "ReferenceError: capitalize is not defined"

found in

---> <HelloWorld> at src/components/HelloWorld.vue
       <App> at src/App.vue
         <Root>

标签： vue.jscomponents

Answer 1

最后common-functions.js，导出函数：

export default capitalize;

在 中HelloWorld.vue，使用以下命令导入：

import capitalize from '../js/common-functions.js';
// this should replace the require line