✨ Introducing new features. 组件放在全局中，增加vue3 api 自动导入

auto-imports.d.ts

@@ -0,0 +1,73 @@
+// Generated by 'unplugin-auto-import'
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const createPinia: typeof import('pinia')['createPinia']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const defineStore: typeof import('pinia')['defineStore']
+  const effectScope: typeof import('vue')['effectScope']
+  const getActivePinia: typeof import('pinia')['getActivePinia']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const mapActions: typeof import('pinia')['mapActions']
+  const mapGetters: typeof import('pinia')['mapGetters']
+  const mapState: typeof import('pinia')['mapState']
+  const mapStores: typeof import('pinia')['mapStores']
+  const mapWritableState: typeof import('pinia')['mapWritableState']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const resolveDirective: typeof import('vue')['resolveDirective']
+  const setActivePinia: typeof import('pinia')['setActivePinia']
+  const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const storeToRefs: typeof import('pinia')['storeToRefs']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useLink: typeof import('vue-router')['useLink']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}

package.json

@@ -47,11 +47,12 @@
 		"@typescript-eslint/parser": "^5.46.0",
 		"@vitejs/plugin-vue": "^4.0.0",
 		"@vue/compiler-sfc": "^3.2.45",
-		"eslint": "^8.29.0",
+		"eslint": "8.22.0",
 		"eslint-plugin-vue": "^9.8.0",
 		"prettier": "^2.8.1",
 		"sass": "^1.56.2",
 		"typescript": "^4.9.4",
+		"unplugin-auto-import": "^0.13.0",
 		"vite": "^4.0.0",
 		"vite-plugin-vue-setup-extend": "^0.4.0",
 		"vue-eslint-parser": "^9.1.0"

src/components/RightToolbar/index.vue

@@ -22,7 +22,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup name="right-toolbar">
 import {computed, ref} from "vue";
 
 const props = defineProps({

src/components/index.ts

@@ -0,0 +1,10 @@
+import Pagination from '/@/components/Pagination/index.vue'
+import RightToolbar from '/@/components/RightToolbar/index.vue'
+import DictTag from '/@/components/DictTag/index.vue'
+
+
+export {
+    Pagination,
+    RightToolbar,
+    DictTag
+}

src/hooks/table.ts

@@ -1,4 +1,3 @@
-import {defineAsyncComponent, onMounted} from "vue";
 import {ElMessage} from "element-plus";
 
 export interface BasicTableProps{
@@ -85,6 +84,7 @@ export function useTable(options?: BasicTableProps) {
             }).then(res => {
                 state.dataList = state.isPage ? res.data.records : res.data
                 state.pagination!.total = state.isPage ? res.data.total : 0
+                ElMessage.success('删除成功');
             }).catch(err => {
                 ElMessage.error(err.msg)
             }).finally(() => {
@@ -130,17 +130,11 @@ export function useTable(options?: BasicTableProps) {
         query()
     }
 
-    const pagination = defineAsyncComponent(() =>  import('/@/components/Pagination/index.vue'))
-
-    const RightToolBar = defineAsyncComponent(() => import('/@/components/RightToolbar/index.vue'))
-
     return {
-        RightToolBar,
         getDataList,
         sizeChangeHandle,
         currentChangeHandle,
-        sortChangeHandle,
+        sortChangeHandle
-        pagination
     }
 
 }

src/main.ts

@@ -11,9 +11,22 @@ import 'element-plus/dist/index.css';
 import elementIcons from '/@//components/svgIcon/svgicon'
 import '/@/theme/index.scss';
 import VueGridLayout from 'vue-grid-layout';
+import { Pagination,RightToolbar, DictTag } from '/@/components/index'
+
+
 
 const app = createApp(App);
 
+app.component('DictTag', DictTag)
+app.component('Pagination', Pagination)
+app.component('RightToolbar', RightToolbar)
+
 directive(app);
 other.elSvg(app);
-app.use(pinia).use(router).use(ElementPlus, { i18n: i18n.global.t }).use(elementIcons).use(i18n).use(VueGridLayout).mount('#app');
+app.use(pinia) // pinia 存储
+    .use(router) // 路由
+    .use(ElementPlus, { i18n: i18n.global.t }) // ElementPlus 全局引入
+    .use(elementIcons) // elementIcons 图标全局引入
+    .use(i18n) // 国际化
+    .use(VueGridLayout)
+    .mount('#app');

src/views/system/menu/form.vue

@@ -65,8 +65,6 @@
 </template>
 
 <script setup lang="ts" name="systemMenuDialog">
-import {defineAsyncComponent, nextTick, onMounted, reactive, ref} from 'vue';
-import {i18n} from '/@/i18n/index';
 import {info, pageList, update, addObj} from "/@/api/admin/menu";
 import type {menuData} from './menu'
 

src/views/system/menu/index.vue

@@ -98,7 +98,6 @@ const onTabelRowDel = (row: RouteRecordRaw) => {
 		.then(() => {
 			ElMessage.success('删除成功');
 			getTableData();
-			//await setBackEndControlRefreshRoutes() // 刷新菜单，未进行后端接口测试
 		})
 		.catch(() => {});
 };

src/views/system/role/form.vue

@@ -57,12 +57,9 @@
 </template>
 
 <script setup lang="ts" name="systemRoleDialog">
-import {nextTick, reactive, ref} from 'vue';
-
 // 定义子组件向父组件传值/事件
 const emit = defineEmits(['refresh']);
 import { depttree } from '/@/api/admin/dept'
-import { pageList } from '/@/api/admin/menu'
 
 // 定义变量内容
 const roleDialogFormRef = ref();

src/views/system/role/index.vue

@@ -14,7 +14,7 @@
           <el-button size="default" icon="folder-add" type="success" class="ml10" @click="roleDialogRef.openDialog('add')">
             新增用户
           </el-button>
-          <right-tool-bar  v-model:showSearch="showSearch" class="ml10" style="float: right;margin-right: 20px" @queryTable="getDataList"></right-tool-bar>
+          <right-toolbar  v-model:showSearch="showSearch" class="ml10" style="float: right;margin-right: 20px" @queryTable="getDataList"></right-toolbar>
         </div>
       </el-row>
 			<el-table :data="state.dataList" v-loading="state.loading" style="width: 100%">
@@ -46,14 +46,12 @@
 </template>
 
 <script setup lang="ts" name="systemRole">
-import {defineAsyncComponent, reactive, ref, Ref} from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import {BasicTableProps, useTable} from "/@/hooks/table";
 import { pageList } from "/@/api/admin/role";
 
 // 引入组件
 const RoleDialog = defineAsyncComponent(() => import('./form.vue'));
-const DictTag  = defineAsyncComponent(() => import("/@/components/DictTag/index.vue"))
 // 定义变量内容
 const roleDialogRef = ref();
 
@@ -82,8 +80,6 @@ const dictType = ref([{
 
 //  table hook
 const {
-  RightToolBar,
-  pagination,
   getDataList,
   currentChangeHandle,
   sizeChangeHandle

src/views/system/user/form.vue

@@ -92,7 +92,6 @@
 </template>
 
 <script setup lang="ts" name="systemUserDialog">
-import {nextTick, reactive, ref, toRefs, watchEffect} from 'vue';
 import {  addObj, putObj } from '/@/api/admin/user'
 import { list as roleList } from '/@/api/admin/role'
 import { list as postList } from '/@/api/admin/post'
@@ -104,7 +103,7 @@ const emit = defineEmits(['refresh']);
 
 
 // @ts-ignore
-const { lock_flag } = toRefs(useDict('lock_flag'))
+const { lock_flag } = useDict('lock_flag')
 // 定义变量内容
 const userDialogFormRef = ref();
 const state = reactive({

src/views/system/user/index.vue

@@ -25,7 +25,7 @@
               <el-button size="default" icon="folder-add" type="success" class="ml10" @click="userDialogRef.openDialog('add')">
                 新增用户
               </el-button>
-              <right-tool-bar  v-model:showSearch="showSearch" class="ml10" style="float: right;margin-right: 20px" @queryTable="getDataList"></right-tool-bar>
+              <right-toolbar  v-model:showSearch="showSearch" class="ml10" style="float: right;margin-right: 20px" @queryTable="getDataList"></right-toolbar>
             </div>
           </el-row>
           <el-table :data="state.dataList" v-loading="state.loading" style="width: 100%">
@@ -35,12 +35,12 @@
             <el-table-column prop="phone" label="手机号" show-overflow-tooltip></el-table-column>
             <el-table-column label="岗位" show-overflow-tooltip>
               <template #default="scope">
-                <el-tag v-for="(item,index) in scope.row.postList" type="success">{{item.postName}}</el-tag>
+                <el-tag v-for="(item,index) in scope.row.postList" type="success" :key="index">{{item.postName}}</el-tag>
               </template>
             </el-table-column>
             <el-table-column label="角色" show-overflow-tooltip>
               <template #default="scope">
-                <el-tag v-for="(item,index) in scope.row.roleList" type="success">{{item.roleName}}</el-tag>
+                <el-tag v-for="(item,index) in scope.row.roleList" type="success" :key="index">{{item.roleName}}</el-tag>
               </template>
             </el-table-column>
             <el-table-column label="状态" show-overflow-tooltip>
@@ -74,24 +74,22 @@
 </template>
 
 <script setup lang="ts" name="systemUser">
-import {defineAsyncComponent, reactive, onMounted, ref, Ref, toRefs} from 'vue';
-import { ElMessageBox, ElMessage } from 'element-plus';
 import { pageList, delObj } from '/@/api/admin/user'
 import { depttree } from '/@/api/admin/dept'
 import {BasicTableProps, useTable} from '/@/hooks/table'
 import { useDict } from '/@/hooks/dict'
+import {ElMessage, ElMessageBox} from "element-plus";
 
 // 引入组件
 const UserDialog = defineAsyncComponent(() => import('./form.vue'));
 const QueryTree = defineAsyncComponent(() => import('/@/components/QueryTree/index.vue'))
-const DictTag  = defineAsyncComponent(() => import("/@/components/DictTag/index.vue"))
 // @ts-ignore
-const { lock_flag } = toRefs(useDict('lock_flag'))
+const { lock_flag } = useDict('lock_flag')
 
 // 定义变量内容
 const userDialogRef = ref();
 
-const showSearch : Ref<Boolean> = ref(true)
+const showSearch = ref(true)
 
 // 定义表格查询、后台调用的API
 const state: BasicTableProps = reactive<BasicTableProps>({
@@ -114,8 +112,6 @@ const deptData = reactive({
 
 //  table hook
 const {
-  RightToolBar,
-  pagination,
   getDataList,
   currentChangeHandle,
   sizeChangeHandle
@@ -137,7 +133,7 @@ const onRowDel = (row: any) => {
 	})
 		.then(() => {
       // 删除用户的接口
-      delObj(row.userId).then(res => {
+      delObj(row.userId).then(() => {
         getDataList();
         ElMessage.success('删除成功');
       }).catch(err => {

tsconfig.json

@@ -70,6 +70,6 @@
 		"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
 		"suppressImplicitAnyIndexErrors": true
 	},
-	"include": ["src/**/*.ts", "src/**/*.vue", "src/**/*.tsx", "src/**/*.d.ts"], // **Represents any directory, and * represents any file. Indicates that all files in the src directory will be compiled
+	"include": ["src/**/*.ts", "src/**/*.vue", "src/**/*.tsx", "src/**/*.d.ts","./auto-imports.d.ts"], // **Represents any directory, and * represents any file. Indicates that all files in the src directory will be compiled
 	"exclude": ["node_modules", "dist"] // Indicates the file directory that does not need to be compiled
 }

vite.config.ts

@@ -2,6 +2,9 @@ import vue from '@vitejs/plugin-vue';
 import { resolve } from 'path';
 import { defineConfig, loadEnv, ConfigEnv } from 'vite';
 import vueSetupExtend from 'vite-plugin-vue-setup-extend';
+// vue3 自动引入
+import AutoImport from 'unplugin-auto-import/vite'
+
 
 const pathResolve = (dir: string) => {
 	return resolve(__dirname, '.', dir);
@@ -15,7 +18,14 @@ const alias: Record<string, string> = {
 const viteConfig = defineConfig((mode: ConfigEnv) => {
 	const env = loadEnv(mode.mode, process.cwd());
 	return {
-		plugins: [vue(), vueSetupExtend()],
+		plugins: [vue(), vueSetupExtend(),AutoImport({
+			imports: [
+				'vue',
+				'vue-router',
+				'pinia'
+			],
+			dts: './auto-imports.d.ts',
+		})],
 		root: process.cwd(),
 		resolve: { alias },
 		base: mode.command === 'serve' ? './' : env.VITE_PUBLIC_PATH,