feat: improve vue tempalte

suites/boilerplate/templates/vue/.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  extends: require.resolve('@umijs/lint/dist/config/eslint'),
+  extends: ['plugin:vue/vue3-recommended'],
   parser: 'vue-eslint-parser',
   parserOptions: {
     parser: '@typescript-eslint/parser',
@@ -9,6 +9,5 @@ module.exports = {
       jsx: true,
     },
   },
-  extends: ['plugin:vue/vue3-recommended'],
   rules: {},
 };

suites/boilerplate/templates/vue/.gitignore.tpl

@@ -4,3 +4,4 @@ node_modules
 .dumi/tmp-test
 .dumi/tmp-production
 .DS_Store
+/coverage

suites/boilerplate/templates/vue/README.md.tpl

@@ -7,7 +7,19 @@
 
 ## Usage
 
-TODO
+First, introduce css file:
+
+```ts
+import '{{ name }}/dist/style.css';
+```
+
+Then, introduce components:
+
+```html
+<script setup lang="ts">
+  import { Foo, Bar } from '{{ name }}';
+</script>
+```
 
 ## Options
 
@@ -36,6 +48,15 @@ $ {{ npmClient }} run docs:preview
 
 # check your project for potential problems
 $ {{ npmClient }} run doctor
+
+# Test
+$ {{ npmClient }} test
+
+# Coverage
+$ {{ npmClient }} test:cov
+
+# Lint
+$ {{ npmClient }} lint
 ```
 
 ## LICENSE

suites/boilerplate/templates/vue/package.json.tpl

@@ -2,21 +2,21 @@
   "name": "{{{ name }}}",
   "version": "0.0.1",
   "description": "{{{ description }}}",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
   "scripts": {
-    "start": "npm run dev",
+    "build": "vite build && vue-tsc --project ./tsconfig.build.json",
+    "build:watch": "vite build --watch",
     "dev": "dumi dev",
-    "build": "father build",
-    "build:watch": "father dev",
     "docs:build": "dumi build",
     "docs:preview": "dumi preview",
-    "prepare": "husky install && dumi setup",
-    "doctor": "father doctor",
     "lint": "npm run lint:es && npm run lint:css",
     "lint:css": "stylelint \"{src,test}/**/*.{css,less}\"",
-    "lint:es": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
-    "prepublishOnly": "father doctor && npm run build"
+    "lint:es": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx,vue}\"",
+    "prepare": "husky install && dumi setup",
+    "prepublishOnly": "npm run test && npm run build",
+    "start": "npm run dev",
+    "test": "vitest",
+    "test:cov": "vitest --coverage",
+    "typecheck": "vue-tsc --noEmit"
   },
   "authors": [{{#author}}
     "{{{ author }}}"
@@ -25,6 +25,17 @@
     "type": "git"
   },
   "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/typings/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.umd.js"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/typings/index.d.ts",
   "files": [
     "dist"
   ],
@@ -59,22 +70,34 @@
   "devDependencies": {
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
-    "@dumijs/preset-vue": "^2",
+    "@dumijs/preset-vue": "^2.4.12",
+    "@eslint/js": "^9.11.1",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "@umijs/lint": "^4.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.7.0",
+    "@typescript-eslint/parser": "^8.7.0",
+    "@umijs/lint": "^4.3.24",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@vitejs/plugin-vue-jsx": "^4.0.1",
+    "@vitest/coverage-v8": "^2.1.1",
+    "@vue/test-utils": "^2.4.6",
     "dumi": "{{{ version }}}",
-    "eslint": "^8.23.0",
+    "eslint": "^8.57.1",
     "eslint-plugin-vue": "^9.17.0",
-    "father": "^4.1.0",
+    "happy-dom": "^15.7.4",
     "husky": "^8.0.1",
+    "less": "^4.2.0",
     "lint-staged": "^13.0.3",
     "prettier": "^2.7.1",
     "prettier-plugin-organize-imports": "^3.0.0",
     "prettier-plugin-packagejson": "^2.2.18",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "stylelint": "^14.9.1",
-    "vue": "^3.4.0"
+    "typescript": "~5.5.4",
+    "vite": "^5.4.8",
+    "vitest": "^2.1.1",
+    "vue": "^3.5.10",
+    "vue-tsc": "^2.1.6"
   }
 }

suites/boilerplate/templates/vue/src/Bar/Bar.test.ts

@@ -0,0 +1,15 @@
+import { mount, type VueWrapper } from '@vue/test-utils';
+import { beforeEach, describe, expect, it } from 'vitest';
+import Bar from './RootBar.vue';
+
+describe('Bar', () => {
+  let wrapper: VueWrapper<InstanceType<typeof Bar>>;
+
+  beforeEach(() => {
+    wrapper = mount(Bar, { props: { icon: 'V' } });
+  });
+
+  it('should render', () => {
+    expect(wrapper.html()).contain('V');
+  });
+});

suites/boilerplate/templates/vue/src/Bar/RootBar.vue

@@ -3,20 +3,16 @@
     @click="handleClick"
   >
     <template v-if="icon">
-      {{icon}}
+      {{ icon }}
     </template>
-    <slot v-else name="icon" /> <slot />
+    <slot
+      v-else
+      name="icon"
+    />
+    <slot />
   </span>
 </template>
 
-<style lang="css" scoped>
-span {
-  border: 1px solid red;
-  border-radius: 4px;
-  padding: 4px;
-}
-</style>
-
 <script setup lang="ts">
 import { VNodeChild } from 'vue';
 
@@ -45,3 +41,11 @@ function handleClick(e: MouseEvent) {
 }
 
 </script>
+
+<style lang="less" scoped>
+span {
+  border: 1px solid red;
+  border-radius: 4px;
+  padding: 4px;
+}
+</style>

suites/boilerplate/templates/vue/src/Foo/Foo.less

@@ -0,0 +1,3 @@
+.foo {
+  color: red;
+}

suites/boilerplate/templates/vue/src/Foo/Foo.test.ts

@@ -0,0 +1,10 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { Foo } from './index';
+
+describe('Foo', () => {
+  it('should render', () => {
+    const wrapper = mount(Foo, { props: { title: 'foo' } });
+    expect(wrapper.html()).contain('foo');
+  });
+});

suites/boilerplate/templates/vue/src/Foo/index.md.tpl

@@ -5,5 +5,10 @@ This is an example component of Vue JSX.
 ```jsx
 import { Foo } from '{{{ name }}}';
 
-export default () => <Foo title="Hello vue!" />
+export default () => <Foo title="Hello Vue!" />
 ```
+## Foo API
+
+### Props
+
+<API id="Bar" type="props"></API>

suites/boilerplate/templates/vue/src/Foo/index.tsx

@@ -1,4 +1,5 @@
 import { defineComponent } from 'vue';
+import './Foo.less';
 
 export const Foo = defineComponent({
   props: {
@@ -11,6 +12,6 @@ export const Foo = defineComponent({
     },
   },
   setup({ title }) {
-    return () => <div>{title}</div>;
+    return () => <div className="foo">{title}</div>;
   },
 });

suites/boilerplate/templates/vue/tsconfig.build.json.tpl

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "emitDeclarationOnly": true,
+    "declarationDir": "./dist/typings",
+    "lib": ["esnext", "dom"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["src/**/*.test.*"]
+}

suites/boilerplate/templates/vue/vite.config.mts

@@ -0,0 +1,36 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'node:path';
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+
+
+const externals = ['vue'];
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueJsx(),
+  ],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'index',
+      fileName: 'index',
+    },
+    rollupOptions: {
+      external: [...externals],
+      output: {
+        globals: {
+          'vue': 'Vue',
+        },
+      },
+    },
+    outDir: 'dist',
+  },
+  resolve: {
+    dedupe: ['vue'],
+  },
+  optimizeDeps: {
+    include: [...externals],
+  },
+});

suites/boilerplate/templates/vue/vitest.config.mts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'vitest/config';
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueJsx(),
+  ],
+  test: {
+    environment: 'happy-dom',
+    include: ['./**/*.test.{ts,js,tsx}'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['html', 'text', 'json'],
+    },
+  },
+});