build(deps): 添加多种插件：element-plus、iconify、windicss

src/components/HelloWorld.vue

@@ -1,6 +1,5 @@
 <template>
-  <h1>{{ msg }}</h1>
-
+  <h1 class="text-red-400 font-medium">{{ msg }}</h1>
   <p>
     Recommended IDE setup:
     <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
@@ -12,19 +11,16 @@
     <code>&lt;script setup&gt;</code>
     )
   </p>
-
-  <p>
+  <p class="mx-auto">
     See
     <code>README.md</code>
     for more information.
   </p>
-
   <p>
     <a href="https://vitejs.dev/guide/features.html" target="_blank">Vite Docs</a>
     |
     <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
   </p>
-
   <button @click="count++">count is: {{ count }}</button>
   <p>
     Edit

src/main.ts

@@ -1,4 +1,8 @@
 import { createApp } from 'vue';
 import App from './App.vue';
+import { setupElementPlus } from './plugins';
+import 'virtual:windi.css';
 
-createApp(App).mount('#app');
+const app = createApp(App);
+setupElementPlus(app);
+app.mount('#app');

src/plugins/element-plus.ts

@@ -0,0 +1,188 @@
+import type { App } from 'vue';
+import 'element-plus/lib/theme-chalk/base.css';
+import {
+  // ElAlert,
+  // ElAside,
+  // ElAutocomplete,
+  // ElAvatar,
+  // ElBacktop,
+  // ElBadge,
+  // ElBreadcrumb,
+  // ElBreadcrumbItem,
+  ElButton,
+  // ElButtonGroup,
+  // ElCalendar,
+  ElCard,
+  ElCarousel,
+  ElCarouselItem,
+  // ElCascader,
+  // ElCascaderPanel,
+  // ElCheckbox,
+  // ElCheckboxButton,
+  // ElCheckboxGroup,
+  // ElCol,
+  // ElCollapse,
+  // ElCollapseItem,
+  ElCollapseTransition,
+  // ElColorPicker,
+  // ElContainer,
+  // ElDatePicker,
+  // ElDialog,
+  // ElDivider,
+  // ElDrawer,
+  // ElDropdown,
+  // ElDropdownItem,
+  // ElDropdownMenu,
+  ElEmpty,
+  // ElFooter,
+  // ElForm,
+  // ElFormItem,
+  // ElHeader,
+  ElIcon,
+  // ElImage,
+  ElInput,
+  // ElInputNumber,
+  // ElLink,
+  // ElMain,
+  // ElMenu,
+  // ElMenuItem,
+  // ElMenuItemGroup,
+  // ElOption,
+  // ElOptionGroup,
+  // ElPageHeader,
+  // ElPagination,
+  // ElPopconfirm,
+  // ElPopover,
+  // ElPopper,
+  // ElProgress,
+  // ElRadio,
+  // ElRadioButton,
+  // ElRadioGroup,
+  // ElRate,
+  // ElRow,
+  // ElScrollbar,
+  // ElSelect,
+  // ElSlider,
+  // ElStep,
+  // ElSteps,
+  // ElSubmenu,
+  // ElSwitch,
+  // ElTabPane,
+  // ElTable,
+  // ElTableColumn,
+  // ElTabs,
+  // ElTag,
+  // ElTimePicker,
+  // ElTimeSelect,
+  // ElTimeline,
+  // ElTimelineItem,
+  // ElTooltip,
+  // ElTransfer,
+  // ElTree,
+  // ElUpload,
+  // ElInfiniteScroll,
+  ElLoading
+  // ElMessage
+  // ElMessageBox,
+  // ElNotification
+} from 'element-plus';
+
+const components = [
+  // ElAlert,
+  // ElAside,
+  // ElAutocomplete,
+  // ElAvatar,
+  // ElBacktop,
+  // ElBadge,
+  // ElBreadcrumb,
+  // ElBreadcrumbItem,
+  ElButton,
+  // ElButtonGroup,
+  // ElCalendar,
+  ElCard,
+  ElCarousel,
+  ElCarouselItem,
+  // ElCascader,
+  // ElCascaderPanel,
+  // ElCheckbox,
+  // ElCheckboxButton,
+  // ElCheckboxGroup,
+  // ElCol,
+  // ElCollapse,
+  // ElCollapseItem,
+  ElCollapseTransition,
+  // ElColorPicker,
+  // ElContainer,
+  // ElDatePicker,
+  // ElDialog,
+  // ElDivider,
+  // ElDrawer,
+  // ElDropdown,
+  // ElDropdownItem,
+  // ElDropdownMenu,
+  ElEmpty,
+  // ElFooter,
+  // ElForm,
+  // ElFormItem,
+  // ElHeader,
+  ElIcon,
+  // ElImage,
+  ElInput
+  // ElInputNumber,
+  // ElLink,
+  // ElMain,
+  // ElMenu,
+  // ElMenuItem,
+  // ElMenuItemGroup
+  // ElOption,
+  // ElOptionGroup,
+  // ElPageHeader,
+  // ElPagination,
+  // ElPopconfirm,
+  // ElPopover,
+  // ElPopper,
+  // ElProgress,
+  // ElRadio,
+  // ElRadioButton,
+  // ElRadioGroup,
+  // ElRate,
+  // ElRow,
+  // ElScrollbar,
+  // ElSelect,
+  // ElSlider,
+  // ElStep,
+  // ElSteps,
+  // ElSubmenu,
+  // ElSwitch,
+  // ElTabPane,
+  // ElTable,
+  // ElTableColumn,
+  // ElTabs,
+  // ElTag,
+  // ElTimePicker,
+  // ElTimeSelect,
+  // ElTimeline,
+  // ElTimelineItem,
+  // ElTooltip,
+  // ElTransfer,
+  // ElTree,
+  // ElUpload
+];
+
+const plugins = [
+  // ElInfiniteScroll,
+  ElLoading
+  // ElMessage
+  // ElMessageBox,
+  // ElNotification
+];
+
+/** 引入element-plus UI组件 */
+export default function setupElementPlus(app: App<Element>) {
+  components.forEach(component => {
+    app.component(component.name, component);
+  });
+  plugins.forEach(plugin => {
+    app.use(plugin);
+  });
+}

src/plugins/index.ts

@@ -0,0 +1,4 @@
+import setupElementPlus from './element-plus';
+import NProgress from './nprogress';
+
+export { setupElementPlus, NProgress };

src/plugins/nprogress.ts

@@ -0,0 +1,10 @@
+import NProgress from 'nprogress'; // 顶部进度条
+import '../styles/css/nprogress.css';
+
+NProgress.configure({
+  easing: 'ease',
+  speed: 500,
+  trickleSpeed: 200,
+  showSpinner: false
+});
+export default NProgress;

src/styles/css/nprogress.css

@@ -0,0 +1,60 @@
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+#nprogress .bar {
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+	background: #29d;
+}
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
+  opacity: 1;
+  transform: rotate(3deg) translate(0px, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+  position: fixed;
+	top: 15px;
+  right: 15px;
+	display: block;
+  z-index: 1031;
+}
+
+#nprogress .spinner-icon {
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+  border: solid 2px transparent;
+  border-top-color: #29d;
+  border-left-color: #29d;
+  border-radius: 50%;
+  animation: nprogress-spinner 400ms linear infinite;
+}
+.nprogress-custom-parent {
+  position: relative;
+	overflow: hidden;
+}
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+@keyframes nprogress-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}