vue3通用模板使用unocss代替tailwindcss及增加pinia和vite-plugin-pages插件

Author: jry

front-end/uiadmin-vue/package.json

@@ -1,7 +1,8 @@
 {
   "name": "uiadmin-vue",
   "private": true,
-  "version": "1.2.0",
+  "version": "1.2.1",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -12,23 +13,28 @@
     "@codemirror/lang-javascript": "^0.20.0",
     "@codemirror/theme-one-dark": "^0.20.0",
     "axios": "^0.27.2",
-    "element-plus": "^2.3.7",
-    "vue": "^3.3.4",
+    "element-plus": "^2.7.0",
+    "vue": "^3.4.0",
     "vue-codemirror": "^5.0.1",
-    "vue-router": "^4.0.16"
+    "vue-router": "^4.3.2",
+    "pinia": "^2.1.7",
+    "qs": "^6.11.2"
   },
   "devDependencies": {
     "@headlessui/vue": "^1.6.3",
     "@heroicons/vue": "^1.0.6",
-    "@vitejs/plugin-vue": "^2.3.3",
+    "@unocss/preset-rem-to-px": "^0.59.4",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
     "autoprefixer": "^10.4.7",
-    "path": "^0.12.7",
     "less": "^4.1.2",
     "less-loader": "^10.2.0",
-    "postcss": "^8.4.14",
-    "tailwindcss": "^3.0.24",
+    "path": "^0.12.7",
+    "postcss": "^8.4.21",
     "typescript": "^4.5.4",
-    "vite": "^2.9.9",
+    "unocss": "^0.59.4",
+    "vite": "^5.0.0",
+    "vite-plugin-pages": "^0.33.0",
     "vue-tsc": "^0.34.7"
   }
 }

front-end/uiadmin-vue/postcss.config.js renamed to front-end/uiadmin-vue/postcss.config.cjs

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
     autoprefixer: {},
   },
 }

front-end/uiadmin-vue/src/index.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

front-end/uiadmin-vue/src/main.ts

@@ -10,10 +10,13 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import './index.css'
-import { router } from './router'
+import 'virtual:uno.css'
+import router from './plugins/router';
 import ElementPlus from 'element-plus'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 import 'element-plus/dist/index.css'  //引入element-plus样式
+import { createPinia } from 'pinia'
+const pinia = createPinia()
 
 const app = createApp(App)
 
@@ -22,6 +25,8 @@ app.config.globalProperties.$util = util;
 
 app.use(router)
 
+app.use(pinia)
+
 app.use(ElementPlus, {
   locale: zhCn,
 })

front-end/uiadmin-vue/src/pages/home.vue renamed to front-end/uiadmin-vue/src/pages/index.vue

@@ -0,0 +1,9 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import routes from '~pages';
+ 
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+ 
+export default router;

front-end/uiadmin-vue/src/plugins/router.ts

@@ -0,0 +1,45 @@
+// uno.config.ts
+import { defineConfig, presetAttributify, presetUno, presetWind } from 'unocss'
+import presetRemToPx from '@unocss/preset-rem-to-px'
+
+export default defineConfig({
+    presets: [
+      presetUno(),
+      presetWind(),
+      presetAttributify(),
+      presetRemToPx({
+        baseFontSize: 16,
+      }),
+    ],
+    // 设置shortcuts,只能使用预设的和自定义的规则
+    shortcuts: {
+        'wh-full': 'w-full h-full',
+        'flex-row-center': 'flex justify-center items-center',
+        'flex-row-between': 'flex justify-between items-center',
+        'flex-row-evenly': 'flex justify-evenly items-center',
+        'flex-row-warp': 'flex flex-wrap',
+        'flex-row-end': 'flex justify-end items-center',
+        'flex-col-center': 'flex flex-col justify-center items-center',
+        'flex-x-center': 'flex justify-center',
+        'flex-y-center': 'flex items-center',
+        'i-flex-center': 'inline-flex justify-center items-center',
+        'i-flex-x-center': 'inline-flex justify-center',
+        'i-flex-y-center': 'inline-flex items-center'
+    },
+    // 主题配置
+    theme: {
+      // 继承boxShadow
+      boxShadow: {
+          box: '0 1px 8px 0 rgba(255, 0, 0, 0.1)',
+          item: '0 1px 8px 0 rgba(0, 0, 0, 0.1)'
+      },
+      colors: {
+          primary: 'var(--el-color-primary)',
+          info: 'var(--el-color-info)',
+          success: 'var(--el-color-success)',
+          warning: 'var(--el-color-warning)',
+          error: 'var(--el-color-error)',
+          danger: 'var(--el-color-error)',
+      }
+  }
+})

front-end/uiadmin-vue/tailwind.config.js

@@ -10,11 +10,17 @@
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import UnoCSS from 'unocss/vite'
+import Pages from 'vite-plugin-pages';
 import path from 'path'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    UnoCSS(),
+    Pages()
+  ],
   base:'./', // 添加这个属性
   build: {
   },