https://github.com/klover2/vue3-vite-tsx-element-plus-admin
– 长期维护
当前项目采用 vue3 + vite + element-plus + tsx + decorators + tailwindcss 构建 admin 管理员后台页面
// 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 (
<div>
<div>demo-{{ sidebarCollapse }}</div>
</div>
);
}
}
yarn run serve
yarn run build
yarn run preview
安装
yarn add @vitejs/plugin-vue-jsx @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties --dev
在 vite.config.ts 配置
vueJsx({
babelPlugins: [
["@babel/plugin-proposal-decorators", { legacy: true }],
["@babel/plugin-proposal-class-properties", { loose: true }],
],
}),
安装 tailwindcss
yarn add tailwindcss@latest postcss@latest autoprefixer@latest --dev
创建配置文件
yarn tailwindcss init
引入样式
// main.ts
import "tailwindcss/tailwind.css";
content: ["./src/**/*.{vue,js,ts,jsx,tsx}"],
css: {
postcss: {
plugins: [require('tailwindcss'), require('autoprefixer')],
},
},
安装 element-plus
yarn add element-plus
按需导入配置
yarn add unplugin-vue-components unplugin-auto-import --dev
在 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,
}),
],
}),
// main.ts
import "element-plus/dist/index.css";
// 在app.tsx配置
<el-config-provider size={"small"} z-index={3000}>
<router-view />
</el-config-provider>
启动会在components.d.ts
文件中导入所需要的组件
import * as ElIcons from "@element-plus/icons-vue";
const ElIconsData = ElIcons as unknown as Array<
() => Promise<typeof import("*.vue")>
>;
for (const iconName in ElIconsData) {
app.component(`i-${iconName}`, ElIconsData[iconName]); // 注意自己别名 i-
}
<el-button type="primary" icon="i-Search">
Search
</el-button>
<el-icon size={"20"}>
<i-Edit />
</el-icon>
"Workspace" }}>el-sub-menu>
vue3 配置
tailwindcss
vite
element-plus