首页vite ts 使用elementplus

vite ts 使用elementplus

时间: 2023-07-22 08:04:47 浏览: 256

好的，使用 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` 查看效果。注意：以上代码只是一个简单的示例，实际开发中需要根据具体需求进行相应的修改和扩展。

阅读全文