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

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 (
      <div>
        <div>demo-{{ sidebarCollapse }}</div>
      </div>
    );
  }
}

启动

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配置
<el-config-provider size={"small"} z-index={3000}>
  <router-view />
</el-config-provider>

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

注册 element-plus 所有图标

1. 全局注册

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-
}

2. 使用

<el-button type="primary" icon="i-Search">
  Search
</el-button>
<el-icon size={"20"}>
  <i-Edit />
</el-icon>

tsx 插槽使用

<el-sub-menu index="2" v-slots={{ title: () => "Workspace" }}></el-sub-menu>

文档

vue3 配置

tailwindcss

vite

element-plus