vue3+element plus初使用

创建前端项目

win+r打开cmd命令窗口，输入npm init vue@latest，按需选择需要的插件

下载配置element plus

1.用vscode打开项目文件夹，打开终端，npm install下载依赖，npm run dev运行项目
2. npm install element-plus --save安装 element-plus包
3. 引入element-plus包
（1）完整引入，在main.ts/js中完成如下配置

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

（2）按需引入
输入命令npm install -D unplugin-vue-components unplugin-auto-import安装两款插件，接着在vite.config.ts中完成如下配置

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

初次使用

点击链接element-plus组件官网，进入后随便选择一个组件，点击右下角查看源码，如下图

复制对应的组件，直接粘贴至app.vue的template下或对应的组件中，保存，并打开浏览器刷新，即可看到对应的组件。