Vue3 + TypeScript + Element 简单创建项目

655 阅读1分钟

首先使用vue create test创建项目

因为我是准备使用vue3.0重构一下项目试试 所以选了router vuex css

创建项目配置

创建完项目之后开始安装ElementPlus

npm i element-plus -S

src目录下创建plugins文件夹 将插件统一存放进这个文件夹

为了方便,直接采取全部引入的方式

/src/plugins/element.ts

import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

export default (app:any) => {
  app.use(ElementPlus)
}

接下来在main.ts里引入 /src/main.ts

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import Element from './plugins/element'

const app = createApp(App)
Element(app)
app.use(store).use(router).mount("#app")

页面添加按钮

<el-button type="primary">测试按钮</el-button>

成品

需求补充

elementPlus按需引入

/src/plugins/elements.ts

import { Button } from 'element-plus'

export default (app) => {
  app.use(Button)
}

ElementPlus官方文档