vite ts 使用elementplus
时间: 2023-07-22 16:04:47 浏览: 233
Vite创建的项目使用elementplus框架
好的,使用 Vite 和 TypeScript 结合 Element Plus 库可以按照以下步骤进行:
1. 安装 Vite:
```bash
npm install -g vite
```
2. 创建项目并进入项目目录:
```bash
mkdir my-project
cd my-project
```
3. 初始化项目并安装 Element Plus 库:
```bash
npm init -y
npm install --save element-plus
```
4. 创建 `index.html` 文件并引入 Element Plus 的样式文件和 JavaScript 文件:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My Project</title>
<link
rel="stylesheet"
href="https://unpkg.com/element-plus/lib/theme-chalk/index.css"
/>
</head>
<body>
<div id="app"></div>
<script src="/src/main.ts"></script>
</body>
</html>
```
5. 创建 `src/main.ts` 文件,导入 Element Plus 库的组件并创建 Vue 实例:
```typescript
import { createApp } from 'vue';
import { ElButton, ElInput } from 'element-plus';
import App from './App.vue';
const app = createApp(App);
app.component('el-button', ElButton);
app.component('el-input', ElInput);
app.mount('#app');
```
6. 创建 `src/App.vue` 文件,编写 Vue 模板:
```html
<template>
<div>
<el-input v-model="inputValue" placeholder="请输入内容"></el-input>
<el-button @click="handleClick">点击</el-button>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
data() {
return {
inputValue: '',
};
},
methods: {
handleClick() {
console.log(`输入的内容是:${this.inputValue}`);
},
},
});
</script>
```
7. 运行项目:
```bash
vite
```
8. 在浏览器中打开 `localhost:3000` 查看效果。
注意:以上代码只是一个简单的示例,实际开发中需要根据具体需求进行相应的修改和扩展。
阅读全文