perf(projects): 加naiveUI本地化、自动导入组件

.eslintrc.js

@@ -30,6 +30,7 @@ module.exports = {
   rules: {
     // TSESLint docs https://typescript-eslint.io/rules/
     'no-var': 'error', // 禁止使用var
+    'no-unused-vars': 'off', // 允许声明不使用的值
     'no-console': 'warn', // 禁止出现console
     'no-debugger': 'off', // 关闭debugger警告
     'vue/multi-word-component-names': 0, // 关闭文件名多单词

.gitignore

@@ -28,4 +28,4 @@ stats.html
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
-
+/src/types/components.d.ts

build/plugins/index.ts

@@ -3,6 +3,7 @@ import compress from './compress';
 import html from './html';
 import unocss from './unocss';
 import visualizer from './visualizer';
+import unplugin from './unplugin';
 
 /**
  * @description: 设置vite插件配置
@@ -10,7 +11,7 @@ import visualizer from './visualizer';
  * @return {*}
  */
 export function setVitePlugins(env) {
-  const plugins = [...vue, html(env), unocss];
+  const plugins = [...vue, html(env), unocss, ...unplugin];
   // 是否压缩
   if (env.VITE_COMPRESS_OPEN === 'Y') {
     plugins.push(compress(env));

build/plugins/unplugin.ts

@@ -0,0 +1,9 @@
+import Components from 'unplugin-vue-components/vite';
+import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
+
+export default [
+  Components({
+    dts: 'src/types/components.d.ts',
+    resolvers: [NaiveUiResolver()],
+  }),
+];

package.json

@@ -53,6 +53,7 @@
     "rollup-plugin-visualizer": "^5.7.1",
     "typescript": "^4.6.4",
     "unocss": "^0.45.5",
+    "unplugin-vue-components": "^0.22.0",
     "vite": "^3.0.0",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-html": "^3.2.0",

src/App.vue

@@ -1,7 +1,24 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+// import { darkTheme } from 'naive-ui';
+import { zhCN, dateZhCN, GlobalThemeOverrides } from 'naive-ui';
+
+const locale = zhCN;
+const dateLocale = dateZhCN;
+
+const themeOverrides: GlobalThemeOverrides = {
+  common: {
+    primaryColor: '#316C72FF',
+    primaryColorHover: '#316C72E3',
+    primaryColorPressed: '#2B4C59FF',
+    primaryColorSuppl: '#316C7263',
+  },
+};
+</script>
 
 <template>
-  <router-view />
+  <n-config-provider :theme="null" :locale="locale" :date-locale="dateLocale" :theme-overrides="themeOverrides">
+    <router-view />
+  </n-config-provider>
 </template>
 
 <style scoped></style>

src/router/guard/index.ts

@@ -1,14 +1,8 @@
 import type { Router } from 'vue-router';
 
 export function setupRouterGuard(router: Router) {
-  router.beforeEach((to, from, next) => {
-    // console.log('%c [to]-24', 'font-size:13px; background:pink; color:#bf2c9f;', to);
+  router.beforeEach((_to, _from, next) => {
     next();
   });
-  router.afterEach((to) => {
-    // 设置document title
-    // useTitle(to.meta.title);
-    // 结束 loadingBar
-    // window.$loadingBar?.finish();
-  });
+  // router.afterEach((_to) => {});
 }

src/views/test/test1.vue

@@ -1,10 +1,16 @@
 <template>
   <div text-center c-blue>I prove that you have made the jump test1.</div>
+  <n-space m-50>
+    <n-button>Default</n-button>
+    <n-button type="tertiary">Tertiary</n-button>
+    <n-button type="primary">Primary</n-button>
+    <n-button type="info">Info</n-button>
+    <n-button type="success">Success</n-button>
+    <n-button type="warning">Warning</n-button>
+    <n-button type="error">Error</n-button>
+  </n-space>
 </template>
 
-<script setup lang="ts">
-import { useRouter } from 'vue-router';
-const router = useRouter();
-</script>
+<script setup lang="ts"></script>
 
 <style scoped></style>

vite.config.ts

@@ -4,7 +4,7 @@ import { resolve } from 'path';
 
 // 当前执行node命令时文件夹的地址（工作目录）
 const rootPath: string = resolve(process.cwd());
-const srcPath: string = `${rootPath}/src`;
+const srcPath = `${rootPath}/src`;
 
 // https://vitejs.dev/config/
 export default defineConfig(({ command, mode }: ConfigEnv) => {