从零搭建vue3项目（二）安装Element plus组件库

A_Big_Banana

已于 2022-06-06 13:44:14 修改

阅读量1.8k

点赞数 1

分类专栏： vue3项目搭建文章标签： vue.js elementui

于 2021-09-24 20:36:35 首次发布

本文链接：https://blog.csdn.net/qq_43766999/article/details/120462677

版权

vue3项目搭建专栏收录该内容

3 篇文章 0 订阅

订阅专栏

安装element plus组件库

element-plus官网：https://element-plus.org/zh-CN/

一、使用npm包管理器安装

# 安装指令
$ npm install element-plus --save

使用cdn引入

<head>
  <!-- Import style -->
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
  <!-- Import Vue 3 -->
  <script src="//unpkg.com/vue@next"></script>
  <!-- Import component library -->
  <script src="//unpkg.com/element-plus"></script>
</head>

二、全局引用

// main.ts
import { createApp } from 'vue'
import App from './App.vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

三、按需求引用

先安装unplugin-vue-components 和 unplugin-auto-import这两款插件

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

再把下列代码插入到你的 Vite 或 Webpack 的配置文件中

//========== vite.config.js ==========
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()],
    }),
  ],
})

//========== webpack.config.js ==========
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

A_Big_Banana

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从零搭建vue3项目（二）安装Element plus组件库

安装element plus组件库element-plus官网：https://element-plus.org/zh-CN/一、使用npm包管理器安装$ npm install element-plus --save使用cdn引入<head>  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" /> <!--
复制链接

扫一扫

专栏目录