Vue3怎么使用element-plus和vant3_vant element plus

element-plus

安装配置

全局引入

npm install element-plus --save
1

在main.ts引入

import { createApp, Vue } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import App from './App.vue';
const app = createApp(App)
//引入element-plus的icon 没反应
// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

app.use(ElementPlus)
app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

//如果要多次引入 这样来写
import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
const app = createApp(App)
//如果要多次引入 这样来写
app.use(router).use(createPinia()).use(ElementPlus).mount('#app')

1
2
3
4
5
6
7
8
9
10
11

使用

这里使用的是按钮

<el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
  <el-button type="primary" icon="edit" circle />//使用带icon的不要写动态的:icon
  <!-- <el-icon :size="20" color="#409efc">
    <Edit />
  </el-icon> -->
/el-row>
1
2
3
4
5
6
7
8
9
10
11
12

局部引入

按需导入
自动导入组件以及样式[推荐】
1
2

1. 安装插件

npm install element-plus --save
1

2. 安装自动导入插件

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

3. 配置vue.config.js（其他配置方式看官网）webpack

const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        components: '@/components'
      }
    },
    //配置webpack自动按需引入element-plus，
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      })
    ]
  }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3.1 vite.config.js

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))
    },

  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

main.js里面添加

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}
1
2
3
4
5
6

4. 直接使用

<template>
    <div id="app">
      <el-row class="mb-4">
        <el-button disabled>Default</el-button>
        <el-button type="primary" disabled>Primary</el-button>
        <el-button type="success" disabled>Success</el-button>
        <el-button type="info" disabled>Info</el-button>
        <el-button type="warning" disabled>Warning</el-button>
        <el-button type="danger" disabled>Danger</el-button>
      </el-row>
    </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12

<script lang='ts'>
import { Edit } from '@element-plus/icons-vue';
  components: {
    a1,
    Edit
  },
</acript>
1
2
3
4
5
6
7

vant3

安装配置

全局引入

第一步

npm i vant@next -S
1

第2步(可写可不写)

babel.comfig.js根目录有就直接添加,
没有就去创建 然后写入以下代码

 plugins:[
    ['import',{
      libaryName:'vant',
      libaryDirectory:'es',
      style:true
    },'vant']
  ]
1
2
3
4
5
6
7

第3步

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'vant/lib/index.css'

import Vant from 'vant'

import './styles/index.less'

createApp(App).use(store).use(router).use(Vant).mount('#app')
1
2
3
4
5
6
7
8
9
10
11

最后

在对于页面进行使用

<template>
  <div id='app'>
    <van-button size="small" type="primary">Primary</van-button>
    <van-button type="info">Info</van-button>
    <van-button type="default">Default</van-button>
    <van-button type="danger">Danger</van-button>
    <van-button type="warning">Warning</van-button>
    <router-view/>
  </div>
</template>

<style lang="less"></style>
1
2
3
4
5
6
7
8
9
10
11
12

局部引入

npm i vant@next -S
1

在main.ts里面这样写入 记得不要忘记引入css

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './style/reset.css'//vue3的resets必须在style里引入
//3的话引入reset.css需要在src里创建style 写入引入
// 不要在assets里创建css 写入引入 会报错 
// 需是在style的里面

// 局部引入vant
import 'vant/lib/index.css'
import { Swipe, SwipeItem, Toast, Field, Button, Cell, CellGroup, Tabbar, TabbarItem, Lazyload } from 'vant';
export const app = createApp(App)
app.use(Swipe).use(Lazyload).use(SwipeItem).use(Field).use(Toast).use(Button).use(Cell).use(CellGroup).use(Tabbar).use(TabbarItem)
app.use(store).use(router).mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

然后后期需要添加哪个就引用哪个 直接在需要的页面使用就可
1