vue3+elementui使用方式(完整,包括创建项目)

  1. npm init vite@latest(vue3+ts)
    第一次创建项目第一个默认选择y,我这里面截图因为是第二次创建,所以就没出现。
    vue3+elementui使用方式(完整,包括创建项目)_第1张图片

  2. NPM方式下载element-plus(官方教程地址:https://element-plus.gitee.io/zh-CN/guide/installation.html)

    $ npm install element-plus --save

  3. 完整引入ElementUi

    // main.ts
    import { createApp } from 'vue'
    import ElementPlus from 'element-plus'
    import 'element-plus/dist/index.css'
    import App from './App.vue'
    
    createApp(App).use(ElementPlus).mount('#app')
    
  4. tsconfig.json指定全局组件类型

    // tsconfig.json
     "compilerOptions": {
        "types": ["element-plus/global"]
      },
    
  5. 然后就可以把官网示例代码拿出来放在HelloWorld.vue里面
    官方示例代码: https://element-plus.gitee.io/zh-CN/component/input.html