@sys-designer/create-vue 1.0.0

package/template/src/utils/request.ts

@@ -0,0 +1,51 @@
+import { useGlobal, useUser } from '@/store';
+import axios, { AxiosError, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
+import { createDiscreteApi } from 'naive-ui'
+const { message } = createDiscreteApi(['message']);
+
+const service = axios.create({
+  baseURL: import.meta.env.VITE_APP_BASE_URL,
+  timeout: 10000
+})
+
+// 请求拦截器
+service.interceptors.request.use(
+  (config: InternalAxiosRequestConfig) => {
+    const token = useUser().getToken()
+    if (token) {
+      config.headers['Authorization'] = ('Bearer ' + token) as any;
+    }
+    const global =  useGlobal();
+    const projectId = global.getProjectId()
+    if(projectId){
+      config.headers['x-project-id'] = projectId
+    }
+    return config
+  },
+  err => Promise.reject(err)
+)
+
+// 响应拦截器
+service.interceptors.response.use(
+  (res: AxiosResponse<any>) => {
+    return res
+  },
+  err => {
+    const data = err.response?.data;
+    // const code = data?.code;
+    const msg = data?.message;
+    if(msg){
+      message.error(msg)
+    }
+    return Promise.reject(err)
+  }
+)
+
+export default service
+
+export const request = {
+  service: service,
+  onErrorResponse: (error: AxiosError, _resolve: any, reject: any)=>{
+    reject(error)
+  }
+}

package/template/src/views/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <n-space vertical>
+    <n-button type="primary" @click="showMsg">弹出消息</n-button>
+    <n-input v-model:value="inputVal"/>
+    <n-select v-model:value="selectVal" :options="options" placeholder="下拉选择" />
+  </n-space>
+</template>
+
+<script setup lang="ts">
+
+const inputVal = ref('')
+const selectVal = ref('')
+const options = [
+  { label: '选项1', value: '1' },
+  { label: '选项2', value: '2' }
+]
+const message = useMessage();
+
+const showMsg = () => {
+  message.success('NaiveUI + Vue3 + TS + Vite 搭建成功！')
+}
+
+</script>

package/template/src/vite-env.d.ts

@@ -0,0 +1,31 @@
+// src/env.d.ts
+/// <reference types="vite/client" />
+declare const __IS_ELECTRON__: boolean;
+import type {
+  MessageApi,
+  DialogApi,
+  NotificationApi,
+  LoadingBarApi
+} from 'naive-ui'
+
+declare global {
+  interface Window {
+    $message: MessageApi
+    $dialog: DialogApi
+    $notification: NotificationApi
+    $loadingBar: LoadingBarApi
+    electronAPI: {
+      sendLoginSuccess: (loginInfo?: Record<string, any>) => void
+      setGlobal: (info?: Record<string, any>) => void
+      closeWindow: () => void
+      minimizeWindow: () => void
+    }
+  }
+}
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+

package/template/tsconfig.json

@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* 路径别名 */
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* 类型检查 */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "@common/*": ["./common/*"]
+    }
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "src/auto-imports.d.ts",
+    "src/components.d.ts",
+    "src/types/*.d.ts",
+    "common/*.vue",
+    "common/*.ts",
+  ],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/template/tsconfig.node.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "target": "ES2022",
+    "lib": ["ES2022"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

package/template/vite.config.ts

@@ -0,0 +1,99 @@
+import { defineConfig, loadEnv } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import { wrapperEnv } from './build/utils';
+import { createProxy } from './build/proxy';
+import AutoImport from 'unplugin-auto-import/vite';
+import Components from 'unplugin-vue-components/vite';
+import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
+import { resolve } from 'path';
+import { createHtmlPlugin } from 'vite-plugin-html';
+import { viteMockServe } from 'vite-plugin-mock';
+import viteCompression from 'vite-plugin-compression';
+import { libResolves, libModules } from './common/lib.config';
+
+const pathResolve = (dir: string) => resolve(__dirname, dir);
+
+export default defineConfig(({ command, mode }) => {
+  const env = loadEnv(mode, process.cwd(), '');
+  const isDev = command === 'serve';
+  const viteEnv = wrapperEnv(env);
+  const { VITE_PUBLIC_PATH, VITE_PORT, VITE_PROXY } = viteEnv;
+
+  return {
+    base: VITE_PUBLIC_PATH,
+    plugins: [
+      vue(),
+      AutoImport({
+        imports: [
+          'vue',
+          'vue-router',
+          'pinia',
+          { 'naive-ui': ['useDialog', 'useMessage', 'useNotification', 'useLoadingBar', 'useModal'] }
+        ],
+        dts: 'src/types/auto-imports.d.ts',
+        eslintrc: { enabled: true }
+      }),
+      Components({
+        resolvers: [NaiveUiResolver()],
+        dts: 'src/types/components.d.ts',
+      }),
+      createHtmlPlugin({ inject: { data: { title: env.VITE_APP_TITLE } } }),
+      viteMockServe({ mockPath: 'mock', localEnabled: isDev, prodEnabled: false, watchFiles: true }),
+      viteCompression({
+        algorithm: 'gzip',
+        threshold: 10240,
+        deleteOriginFile: false,
+        filter: /\.(js|css|json|html|svg|ttf)$/i
+      })
+    ],
+    resolve: {
+      alias: {
+        '@': pathResolve('src'),
+        '@common': pathResolve('common'),
+        ...libResolves,
+        '@common-impl': pathResolve('src'),
+      },
+      dedupe: ['vue', 'naive-ui', 'vue-router', 'pinia']
+    },
+    optimizeDeps: {
+      include: [
+        ...libModules.filter(it=> it.custom).map(it => it.name), 
+        'naive-ui'
+      ]
+    },
+    css: {
+      preprocessorOptions: {
+        scss: { additionalData: `@use "@/assets/styles/vars.scss";` }
+      }
+    },
+    server: {
+      host: true,
+      port: VITE_PORT,
+      proxy: createProxy(VITE_PROXY),
+      strictPort: false,
+    },
+    build: {
+      outDir: 'dist',
+      chunkSizeWarningLimit: 1500,
+      rollupOptions: {
+        output: {
+          manualChunks: {
+            vue: ['vue', 'vue-router'],
+            naive: ['naive-ui'],
+            vendor: ['pinia', 'axios', 'dayjs', 'lodash']
+          },
+          entryFileNames: 'js/[name]-[hash].js',
+          chunkFileNames: 'js/[name]-[hash].js',
+          assetFileNames: (info) => {
+            const ext = info.name.split('.').pop()
+            if (/css/.test(ext)) return 'css/[name]-[hash].css'
+            if (/png|jpe?g|svg|gif/.test(ext)) return 'img/[name]-[hash].[ext]'
+            return 'assets/[name]-[hash].[ext]'
+          }
+        }
+      },
+      minify: 'terser',
+      terserOptions: { compress: { drop_console: !isDev } }
+    }
+  };
+});