vue3-vite-tsx-element-plus-admin

项目地址

https://github.com/klover2/vue3-vite-tsx-element-plus-admin – 长期维护

开发环境

• node 14.21.0+

简介

当前项目采用 vue3 + vite + element-plus + tsx + decorators + tailwindcss 构建 admin 管理员后台页面

demo

// demo.tsx
import { Options, Vue } from "vue-class-component";
import { Prop } from "vue-property-decorator";@Options({name: "Demo",
})
export default class Demo extends Vue {// 父组件传参@Prop({ default: false, type: Boolean })private sidebarCollapse!: boolean;/*** render*/public render(): JSX.Element {const { sidebarCollapse } = this;return (
demo-{{ sidebarCollapse }}
);}
}

启动

yarn run serve

编译

yarn run build

预览编译文件

yarn run preview

使用 tsx 配置 允许启用装饰器(decorators)

1. 安装
   yarn add @vitejs/plugin-vue-jsx @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties --dev

2. 在 vite.config.ts 配置

vueJsx({babelPlugins: [["@babel/plugin-proposal-decorators", { legacy: true }],["@babel/plugin-proposal-class-properties", { loose: true }],],
}),

使用 tailwindcss(vscode 推荐安装 Tailwind CSS IntelliSense 提示插件)

1. 安装 tailwindcss
   yarn add tailwindcss@latest postcss@latest autoprefixer@latest --dev

2. 创建配置文件
   yarn tailwindcss init

3. 引入样式

// main.ts
import "tailwindcss/tailwind.css";

4. 修改配置 tailwind.config.js 文件

content: ["./src/**/*.{vue,js,ts,jsx,tsx}"],

5. vite.config.ts 增加配置

css: {postcss: {plugins: [require('tailwindcss'), require('autoprefixer')],},
},

按需引入 element-plus

1. 安装 element-plus
   yarn add element-plus

2. 按需导入配置
   yarn add unplugin-vue-components unplugin-auto-import --dev

3. 在 vite.config.ts 中配置

import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";AutoImport({resolvers: [ElementPlusResolver({importStyle: false,}),],
}),
Components({include: ["./src/**/*.{js,jsx,ts,tsx,vue,html}"],resolvers: [ElementPlusResolver({importStyle: false,}),],
}),

4. 引入样式

// main.ts
import "element-plus/dist/index.css";

5. 全局配置

// 在app.tsx配置
"small"} z-index={3000}>

启动会在components.d.ts文件中导入所需要的组件

注册 element-plus 所有图标

1. 全局注册

import * as ElIcons from "@element-plus/icons-vue";const ElIconsData = ElIcons as unknown as Array<() => Promise
>;
for (const iconName in ElIconsData) {app.component(`i-${iconName}`, ElIconsData[iconName]); // 注意自己别名 i-
}

2. 使用

Search

"20"}>

tsx 插槽使用

{ title: () => "Workspace" }}>

文档

vue3 配置

tailwindcss

vite

element-plus