feat: support typescipt

Author: Yingkaixiang

.eslintrc.js

@@ -7,5 +7,8 @@ module.exports = {
     'eslint-config-team-spec',
     'eslint-config-team-spec/prettier',
     'eslint-config-team-spec/vue',
-  ]
+  ],
+  rules: {
+    'vue/require-direct-export': 'off',
+  }
 }

bin/generate.sh

@@ -93,7 +93,7 @@ echo "进入 `pwd` 目录"
 
 vue="$1.vue";
 if [ ! -f $vue ]; then
-  echo "<template><div class="$1">$vue</div></template>" >> $vue;
+  echo "<template><div class=\"$1\">$vue</div></template>" >> $vue;
 else
   echo "$vue 已存在"
 fi

build/webpack.base.js

@@ -25,11 +25,6 @@ module.exports = merge(webpackCSSConfig, {
         test: /\.vue$/,
         loader: 'vue-loader',
       },
-      {
-        test: /\.ts$/,
-        loader: 'ts-loader',
-        options: { appendTsSuffixTo: [/\.vue$/] },
-      },
       {
         test: /\.js$/,
         loader: 'babel-loader',

build/webpack.css.js

@@ -4,28 +4,36 @@ const TARGET = process.env.npm_lifecycle_event;
 
 module.exports = {
   module: {
-    rules: [{
-      test: /\.scss$/,
-      use: [
-        {
-          loader: TARGET.indexOf('storybook') !== -1
-              ? 'vue-style-loader'
-              : MiniCssExtractPlugin.loader,
-          options: {
-            esModule: true,
-          }
-        },
-        {
-          loader: 'css-loader',
-        },
-        "postcss-loader",
-        {
-          loader: 'sass-loader',
-          options: {
-            prependData: `$color: green;`
-          }
-        }
-      ],
-    }],
+    rules: [
+      {
+        test: /\.ts$/,
+        loader: 'ts-loader',
+        options: { appendTsSuffixTo: [/\.vue$/] },
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          {
+            loader:
+              TARGET.indexOf('storybook') !== -1
+                ? 'vue-style-loader'
+                : MiniCssExtractPlugin.loader,
+            options: {
+              esModule: true,
+            },
+          },
+          {
+            loader: 'css-loader',
+          },
+          'postcss-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              prependData: `$color: green;`,
+            },
+          },
+        ],
+      },
+    ],
   },
 };

components/shims-vue.d.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  import Vue from 'vue';
+  export default Vue;
+}

components/text/README.md

@@ -0,0 +1 @@
+# text

components/text/__tests__/index.ts

@@ -0,0 +1,9 @@
+import { mount } from '@vue/test-utils';
+import Component from '../src/text.vue';
+
+describe('文字', () => {
+  test('是一个正确的 Vue 实例', () => {
+    const wrapper = mount(Component);
+    expect(wrapper.isVueInstance()).toBeTruthy();
+  });
+});

components/text/index.js

@@ -0,0 +1,7 @@
+import Text from './src/text.vue';
+
+Text.install = function(Vue) {
+  Vue.component(Text.name, Text);
+};
+
+export default Text;

components/text/src/style.scss

@@ -0,0 +1 @@
+.text { color: red }

components/text/src/text.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="text">{{ count }}</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+  name: 'demoText',
+  data() {
+    return {
+      count: 1,
+    };
+  },
+});
+</script>