将 datepicker 添加到简单的 vuejs 应用程序答案

【问题标题】：Add datepicker to simple vuejs app将 datepicker 添加到简单的 vuejs 应用程序
【发布时间】：2018-02-22 03:42:19
【问题描述】：

我有这个应用程序正在运行https://github.com/scotch-io/vue-todo

我也尝试为每个待办事项添加一个日期选择器字段。我正在使用https://github.com/charliekassel/vuejs-datepicker。

我使用npm install vuejs-datepicker --save 安装了日期选择器，并在 src/App.vue 中添加了：

import Datepicker from 'vuejs-datepicker';

Vue.component('my-component', {
    components: {
        Datepicker
    }
});

现在我收到错误：

ERROR in ./src/App.vue

  ✘  https://google.com/#q=import%2Ffirst       Absolute imports should come before relative imports  
  /Users/marklocklear/sandbox/vuejs/vue-todo/src/App.vue:17:24
  import Datepicker from 'vuejs-datepicker';
                          ^

  ✘  http://eslint.org/docs/rules/no-undef      'Vue' is not defined                                  
  /Users/marklocklear/sandbox/vuejs/vue-todo/src/App.vue:19:1
  Vue.component('my-component', {
   ^

  ✘  http://eslint.org/docs/rules/indent        Expected indentation of 2 spaces but found 4          
  /Users/marklocklear/sandbox/vuejs/vue-todo/src/App.vue:20:5
      components: {
       ^

  ✘  http://eslint.org/docs/rules/indent        Expected indentation of 6 spaces but found 8          
  /Users/marklocklear/sandbox/vuejs/vue-todo/src/App.vue:21:9
          Datepicker
           ^

  ✘  http://eslint.org/docs/rules/comma-dangle  Missing trailing comma                                
  /Users/marklocklear/sandbox/vuejs/vue-todo/src/App.vue:21:19
          Datepicker
                     ^

  ✘  http://eslint.org/docs/rules/comma-dangle  Missing trailing comma                                
  /Users/marklocklear/sandbox/vuejs/vue-todo/src/App.vue:22:6
      }
        ^


✘ 6 problems (6 errors, 0 warnings)


Errors:
  2  http://eslint.org/docs/rules/comma-dangle
  2  http://eslint.org/docs/rules/indent
  1  http://eslint.org/docs/rules/no-undef
  1  https://google.com/#q=import%2Ffirst
 @ ./src/main.js 3:0-24
 @ multi ./build/dev-client ./src/main.js

【问题讨论】：

所有这些错误似乎都不言自明。您具体遇到了什么问题？
我相信这也是导入 eslint 的问题。在网络上搜索错误消息absolute imports should come before relative imports 和eslint，您可能会找到对您有所帮助的内容。您还在需要组件之前导入 Vue。这也可能是Vue not defined 错误的原因

标签： vue.js

【解决方案1】：

查看 src/App.vue 中的代码，应该在已经存在的导入下添加导入，然后将 Datepicker 添加到组件列表中。

<script>
import sweetalert from 'sweetalert';
import Datepicker from 'vuejs-datepicker'
import TodoList from './components/TodoList';
import CreateTodo from './components/CreateTodo';    

export default {
  name: 'app',
  components: {
    TodoList,
    CreateTodo,
    Datepicker
  },
. 
.
.
</script>

【讨论】：

【解决方案2】：

你的回答很接近蒂姆，我只需要向上移动导入。这对我有用：

<script>
import sweetalert from 'sweetalert';
import Datepicker from 'vuejs-datepicker';
import TodoList from './components/TodoList';
import CreateTodo from './components/CreateTodo';

export default {
  name: 'app',
  components: {
    TodoList,
    CreateTodo,
    Datepicker,
  },

【讨论】：

Lumbee，我更新了我的答案。你能接受作为正确答案吗？
当然。有关如何使该字段正确显示的任何建议？我在 CreateTodo.vue gist.github.com/marklocklear/d762bcf0e6c9129f78fe429b3222f1a8 中尝试这个，我只是得到一个常规的文本字段，但没有选择器。
选择器看起来像一个常规字段，直到您单击它。单击它后，将弹出选择器。