[v3] Replace poi to vue cli build tool

Author: iamstevendao

.eslintrc.js

@@ -3,16 +3,15 @@
 module.exports = {
   root: true,
   env: {
-    browser: true,
+    "node": true
   },
   extends: [
-    'airbnb-base',
-    'plugin:vue/recommended',
+    "plugin:vue/essential",
+    "@vue/airbnb"
   ],
   plugins: ['vue'],
   parserOptions: {
     parser: 'babel-eslint',
-    sourceType: 'module',
   },
   // add your custom rules here
   rules: {
@@ -21,7 +20,6 @@ module.exports = {
     'no-param-reassign': ['error', {
       props: true,
       ignorePropertyModificationsFor: [
-        'state', // for vuex state
         'el',
       ]
     }],

.lintstagedrc.json

@@ -0,0 +1,6 @@
+{
+  "*.{js,vue}": [
+    "eslint --quiet --fix",
+    "git add"
+  ]
+}

README.md

@@ -16,29 +16,27 @@ Checkout [Demo](https://educationlink.github.io/vue-tel-input/) or [Playground](
   ```
 - **npm**:
   ```bash
-    npm i --save vue-tel-input
+    npm install vue-tel-input
   ```
 
 ## Usage
-- Import default `CSS` to your project:
+- Install the component:
     ```js
-    import 'vue-tel-input/dist/vue-tel-input.css';
+    import Vue from 'vue'
+    import VueTelInput from 'vue-tel-input'
+
+    Vue.use(VueTelInput)
     ```
 
 - In your component:
      ```html
      <template>
-     ...
-        <vue-tel-input v-model="phone"></vue-tel-input>
-     ...
+      ...
+      <vue-tel-input v-model="phone"></vue-tel-input>
+      ...
      <template>
      <script>
-     import VueTelInput from 'vue-tel-input';
-
      export default {
-       components: {
-         VueTelInput,
-       },
        data() {
          return {
            phone: '',
@@ -50,33 +48,27 @@ Checkout [Demo](https://educationlink.github.io/vue-tel-input/) or [Playground](
 
 ### Use as a custom field of [vue-form-generator](https://github.com/vue-generators/vue-form-generator)
 - Add a component using `vue-form-generator`'s `abstractField` mixin
-  ```js
-  // tel-input.vue
-  <template>
-    <vue-tel-input v-model="value"></vue-tel-input>
-  </template>
-
-  <script>
-  import VueTelInput from 'vue-tel-input'
-  import { abstractField } from 'vue-form-generator';
-
-  export default {
-    name: 'TelephoneInput',
-    mixins: [abstractField],
-    components: {
-      VueTelInput,
-    },
-  };
-  </script>
+  ```html
+    <!-- tel-input.vue -->
+    <template>
+      <vue-tel-input v-model="value"></vue-tel-input>
+    </template>
+
+    <script>
+    import { abstractField } from 'vue-form-generator';
+
+    export default {
+      name: 'TelephoneInput',
+      mixins: [abstractField],
+    };
+    </script>
   ```
 
 - Register the new field as a global component
   ```js
     import Vue from 'vue';
     import TelInput from '<path>/tel-input.vue';
 
-    import 'vue-tel-input/dist/vue-tel-input.css';
-
     Vue.component('field-tel-input', TelInput);
   ```
 

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app',
+  ],
+};

jest.config.js

@@ -0,0 +1,30 @@
+module.exports = {
+  "moduleFileExtensions": [
+    "js",
+    "jsx",
+    "json",
+    "vue"
+  ],
+  "transform": {
+    "^.+\\.vue$": "vue-jest",
+    ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
+    "^.+\\.jsx?$": "babel-jest"
+  },
+  "transformIgnorePatterns": [
+    "/node_modules/"
+  ],
+  "moduleNameMapper": {
+    "^@/(.*)$": "<rootDir>/src/$1"
+  },
+  "snapshotSerializers": [
+    "jest-serializer-vue"
+  ],
+  "testMatch": [
+    "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
+  ],
+  "testURL": "http://localhost/",
+  "watchPlugins": [
+    "jest-watch-typeahead/filename",
+    "jest-watch-typeahead/testname"
+  ]
+}