vue3项目安装element-plus-摩杜云开发者社区

使用vue3+vite官网方法创建的项目，现在安装element-plus

1.安装element-plus

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

vue3项目安装element-plus_vite

package.json文件如下，element-plus^2.4.3版本

{
  "name": "vue-project",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "element-plus": "^2.4.3",
    "vue": "^3.3.4",
    "vue-router": "^4.2.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.4.0",
    "vite": "^4.4.11"
  }
}

2.引入——完整引入

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

// main.js
import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/routes.js'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(router).use(ElementPlus).mount('#app')

在页面中写一个按钮

<div class="greetings">
    <h3>
    You’ve successfully created a project with
    <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
    <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
    </h3>
    <el-button>按钮</el-button>
 </div>

如图，安装成功

vue3项目安装element-plus_vue3_02

3.引入——自动导入（推荐）

也是自动的按需导入，需要借助两个插件来导入要使用的组件，安装unplugin-vue-components 和 unplugin-auto-import这两款插件。

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

vue3项目安装element-plus_vue3_03

在vite.config.js中进行配置

vue3项目安装element-plus_自动引入_04

代码如下：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // ...自动导入
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

这样配置之后，就可以直接用了，非常好