VUE 开发——AJAX学习（一）-CFANZ编程社区

简而言之，在main.js中导出以下库,仅此，搞多了出错难排查

一.安装

使用包管理器：

浏览器直接引入：

unpkg:

jsDelivr:

二.在项目中使用Element Plus

引入：
（volar适用于ts,而对于js，使用vetur)

完整引入（对打包后的文件大小不在乎，使用完整导入更方便）

// main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus' //从element-plus库中导入ElementPlus对象，该对象主要是库的主要功能或组件集合，可在vue应用中使用
import 'element-plus/dist/index.css' //引入样式
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus) //注册库，所有Element Plus组件都可以在应用中使用，在所有组件中都能使用
app.mount('#app')

按需导入：
安装额外插件来导入要使用的组件

将下面代码插入vite配置文件vite.config.js中

// 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: [
    vue(), //添加vue插件，千万不要把它忘记了，报一堆错，浏览器一片红
    
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

全局配置

在引入ElementPlus时，可以传入一个包含size和zIndex属性的全局配置对象。size用于设置表单组建的默认尺寸，zIndex用于设置弹出组件的层级，zIndex的默认值为2000

完整引入（上边注册库仅仅是app.use(ElementPlus))

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 })

按需引入：

<template>
  <el-config-provider :size="size" :z-index="zIndex">
    <app />
  </el-config-provider>
</template>

<script>
import { defineComponent } from 'vue'
import { ElConfigProvider } from 'element-plus'

export default defineComponent({
  components: {
    ElConfigProvider,
  },
  setup() {
    return {
      zIndex: 3000,
      size: 'small',
    }
  },
})
</script>

三.组件

基础组件：
button按钮：

Border边框：

color色彩：Element Plus为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为搭建的产品提供一致的外观视觉感受

Container布局容器

lcon图标
Element Plus提供了一套常用的图标集合（如果想要直接使用，需要全局注册组件）

Layout布局

通过基础的24分栏，迅速简便创建布局

Link链接

scrollbar滚动条

space间距

VUE 开发——AJAX学习（一）