Vue3 + ts + element Plus 从零开始配置

最新推荐文章于 2025-04-03 17:29:21 发布

m0_63135113

最新推荐文章于 2025-04-03 17:29:21 发布

阅读量276

点赞数

文章标签： vue.js elementui webpack

本文链接：https://blog.youkuaiyun.com/m0_63135113/article/details/130555973

版权

本文档详细介绍了如何从零开始配置一个Vue3项目，结合TypeScript和Element Plus进行开发。首先通过`vue ui`创建项目并启动，接着按需引入Element Plus，遵循官网指导安装相关插件并在main.ts中导入样式，最后实现组件的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

打开cmd 输入`vue ui`

按步骤操作

项目创建完成后启动项目

引入element Plus(按需引入)

按照官网提示快速开始 | Element Plus

安装插件

npm install -D unplugin-vue-components unplugin-auto-import

安装按需引入插件

npm i unplugin-element-plus -D

安装完成后在main.ts文件中引入样式

// 引入element样式
import 'element-plus/dist/index.css'

使用

<template>
  <div class="hello">
    <el-button type="primary">Success</el-button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { ElButton } from 'element-plus'

export default defineComponent({
  name: 'HelloWorld',
  components: {ElButton},
  props: {
    msg: String,
  },
});
</script>

现在效果