integrated unocss func

.eslintrc.js

@@ -16,6 +16,7 @@ module.exports = {
     window: true,
     defineProps: true,
     defineExpose: true,
+    defineOptions: true,
     $ref: true
   },
   plugins: ['@typescript-eslint', 'prettier', 'import'],

.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

components.d.ts

@@ -5,7 +5,29 @@ import '@vue/runtime-core'
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
+    ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSvgIcon: typeof import('./src/components/ElSvgIcon.vue')['default']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTag: typeof import('element-plus/es')['ElTag']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     TestUnit: typeof import('./src/components/TestUnit.vue')['default']

optimize-include.ts

@@ -6,6 +6,8 @@
 // console.log(console.dir(files))
 // console.log(console.dir(files.slice(20)))
 
+import { resolve } from 'path'
+
 const elementPlusComponentNameArr = [
   'affix',
   'alert',
@@ -110,13 +112,22 @@ const elementPlusComponentNameArr = [
   'upload',
   'virtual-list'
 ]
-export const optimizeDepsArr = () => {
+
+export const pkgPath = resolve(__dirname, './package.json')
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+let { dependencies } = require(pkgPath)
+dependencies = Object.keys(dependencies).filter((dep) => !dep.startsWith('@types/'))
+
+const EPDepsArr = () => {
   const depsArr = [] as string[]
   elementPlusComponentNameArr.forEach((feItem) => {
     depsArr.push(`element-plus/es/components/${feItem}/style/index`)
   })
-
   return depsArr
 }
 
+export const optimizeElementPlus = EPDepsArr()
+export const optimizeDependencies = dependencies
+
 export default []

package.json

@@ -6,8 +6,8 @@
   "packageManager": "[email protected]",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "dev": "vite --mode serve-dev --host",
-    "test": "vite --mode serve-test --host",
+    "dev": "vite --mode serve-dev",
+    "test": "vite --mode serve-test",
     "build:test": "vite build --mode  build-test",
     "build": "vite build --mode build",
     "preview": "npm run build && vite preview ",
@@ -72,8 +72,8 @@
     "jest-serializer-vue": "^2.0.2",
     "jest-transform-stub": "^2.0.0",
     "@babel/preset-typescript": "7.16.7",
-    "ts-node": "10.7.0",
-    "majestic": "1.8.1",
+    "ts-node": "^10.7.0",
+    "majestic": "^1.8.1",
     "@vue/cli-plugin-unit-jest": "4.5.17",
     "@vue/cli-service": "4.5.17",
     "@types/node": "^17.0.35",
@@ -82,16 +82,29 @@
     "typescript": "^4.7.2",
     "unplugin-auto-import": "^0.5.11",
     "unplugin-vue-components": "^0.19.5",
-    "vite": "^3.0.0",
+    "vite": "^3.0.7",
     "@vueuse/core": "^8.7.5",
-    "vue-tsc": "^0.34.16"
+    "vue-tsc": "^0.34.16",
+    "vite-plugin-mkcert": "^1.7.2",
+    "unplugin-vue-define-options": "^0.6.1",
+    "unplugin-icons": "^0.14.6",
+    "unocss": "0.33.5"
+  },
+  "pnpm": {
+    "peerDependencyRules": {
+      "ignoreMissing": [
+        "vite",
+        "*"
+      ]
+    }
   },
   "browserslist": [
     "> 1%",
     "not ie 11",
     "not op_mini all"
   ],
   "engines": {
-    "node": ">= 14"
+    "node": ">= 16 <18",
+    "pnpm": ">= 6 <8"
   }
 }

src/main.ts

@@ -36,6 +36,12 @@ directive(app)
 //import router intercept
 import './permission'
 
+//import theme
+import "./theme/index.scss"
+
+//import unocss
+import "uno.css"
+
 //element svg icon(unplugin-vue-components auto scan)
 // import ElSvgIcon from '@/components/ElSvgIcon.vue'
 // app.component('ElSvgIcon', ElSvgIcon)

src/router/index.ts

@@ -131,14 +131,14 @@ export const constantRoutes: RouterTy = [
         name: 'routerDemoF',
         hidden: true,
         component: () => import('@/views/example/keep-alive/RouterDemoF.vue'),
-        meta: { title: 'RouterDemo-F', activeMenu: '/writing-demo/keep-alive' }
+        meta: { title: 'RouterDemo-F', cachePage: true, activeMenu: '/writing-demo/keep-alive' }
       },
       {
         path: 'router-demo-s',
         name: 'routerDemoS',
         hidden: true,
         component: () => import('@/views/example/keep-alive/RouterDemoS.vue'),
-        meta: { title: 'RouterDemo-S', activeMenu: '/writing-demo/keep-alive' }
+        meta: { title: 'RouterDemo-S',cachePage: true, activeMenu: '/writing-demo/keep-alive' }
       },
       {
         path: 'deep-router-keep-alive',

src/theme/index.scss

@@ -2,7 +2,7 @@
 //@forward "element-plus/theme-chalk/src/mixins/config.scss" with (
 //  $namespace: "el"
 //);
-
+//注意主题色过多会影响，开发时首次加载的速度,请不要过多的配置,或者按需配置
 //base-theme
 @use "./base";
 //theme style such as dark-theme lighting

src/theme/lighting/index.scss

@@ -25,7 +25,7 @@ $--colors: (
 );
 
 /*import theme 起作用*/
-@use "./css-vars.scss" as *;
+//@use "./css-vars.scss" as *;
 html.lighting-theme {
   /*element-plus section */
   //--el-menu-active-color: #409eff;
@@ -34,9 +34,7 @@ html.lighting-theme {
   //--el-menu-bg-color: #304156;
   //--el-menu-hover-bg-color: #263445;
   //--el-menu-item-height: 56px;
-
   --el-menu-border-color: none;
-
   /*layout section*/
   //layout
   --layout-border-left-color: #ddd;

src/views/dashboard/index.vue

@@ -36,12 +36,16 @@
     <!--    <div>update element-plus to 1.2.+, add svg icon, icon-font is abandoned</div>-->
     <!--    <i class="el-icon-add-location">abandoned</i>-->
     <!--    <div>update element-plus version to 2.0.1 release version the size options change to "large default small"</div>-->
-
     <!--    <div class="mt-2">global element svg icon</div>-->
     <!--    <ElSvgIcon name="Edit" :size="30" color="red" />-->
-
     <!--    <div class="mt-2">this is var from vite.config.js define</div>-->
     <!--    <div>{{ showObj }},{{ showObjString }}</div>-->
+    <div class="mt5 mb5 text-size-[20px]" color-red>
+      import unocss demo
+    </div>
+
+
+    <el-icon><User /></el-icon>
 
     <div class="mt-3 mb-1">
       <div class="mb-1">### How to migrate</div>

src/views/example/keep-alive/DeepRouterKeepAlive.vue

@@ -11,7 +11,11 @@
   </div>
 </template>
 
-<script setup name="DeepRouterKeepAlive" lang="ts">
+<script setup  lang="ts">
+defineOptions({
+  name: 'DeepRouterKeepAlive',
+})
+
 import { useAppStore } from '@/store/app'
 
 let testInput = ref('')

src/views/example/keep-alive/KeepAlive.vue

@@ -18,7 +18,10 @@
 1.设置name（必须）
 2.在路由配置处设置cachePage：即可缓存
 -->
-<script setup name="KeepAlive" lang="ts">
+<script setup  lang="ts">
+
+defineOptions({name: 'KeepAlive'})
+
 import { useAppStore } from '@/store/app'
 
 let { searchForm } = useCommon()

src/views/example/keep-alive/RouterDemoF.vue

@@ -13,7 +13,9 @@
     <el-button type="primary" @click="routerBack">返回</el-button>
   </div>
 </template>
+
 <script setup lang="ts">
+defineOptions({name: 'routerDemoF'})
 let { searchForm } = useCommon()
 onMounted(() => {
   //get page pass url data

src/views/example/keep-alive/RouterDemoS.vue

@@ -14,6 +14,9 @@
 </template>
 
 <script setup lang="ts">
+defineOptions({
+  name: 'RouterDemoS',
+})
 let searchForm = useCommon().searchForm
 let { routerBack, routerPush, getQueryParam } = useVueRouter()
 onMounted(() => {

src/views/example/keep-alive/TabKeepAlive.vue

@@ -10,7 +10,11 @@
 1.设置name（必须）
 2.在路由配置处设置cachePage：即可缓存
 -->
-<script setup lang="ts" name="TabKeepAlive">
+<script setup lang="ts">
+defineOptions({
+  name: 'TabKeepAlive',
+})
+
 let { searchForm } = useCommon()
 //$ref(experimental)
 //let testRef = $ref(1)

src/views/example/keep-alive/deep-children/DeepChildren.vue

@@ -3,7 +3,8 @@
   <el-input v-model="testInput" placeholder="input test keepAlive(DeepChildren)" class="widthPx-300" />
 </template>
 
-<script setup name="DeepChildren" lang="ts">
+<script setup lang="ts">
+defineOptions({name: 'DeepChildren'})
 import { useAppStore } from '@/store/app'
 
 let testInput = ref('')

src/views/example/keep-alive/deep-children/DeepChildrenSd.vue

@@ -3,7 +3,11 @@
   <el-input v-model="testInput" placeholder="input test keepAlive(DeepChildren)" class="widthPx-300" />
 </template>
 
-<script setup name="DeepChildrenSd" lang="ts">
+<script setup  lang="ts">
+defineOptions({
+  name: 'DeepChildrenSd',
+})
+
 let testInput = ref('')
 </script>
 

typings/global.d.ts

@@ -4,6 +4,7 @@ declare let GLOBAL_let: Array<any>
 declare let GLOBAL_STRING: string
 declare let onlyOneChild: any
 declare let GLOBAL_VAR: any
+declare let defineOptions: any
 declare let $ref: any
 
 //declare import module