【 vant的完整引入和按需引入，elementui的完整引入和按需引入】

vant的使用

npm安装

# Vue 3 项目，安装最新版 Vant
npm i vant

# Vue 2 项目，安装 Vant 2
npm i vant@latest-v2

yarn安装

yarn add vant

全局引入

import { createApp } from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

const app = createApp();
app.use(Vant);

按需引入

安装插件
npm i babel-plugin-import -D

配置插件
在.babelrc 或 babel.config.js 中添加配置：
{
  "plugins": [
    [
      "import",
      {
        "libraryName": "vant",
        "libraryDirectory": "es",
        "style": true
      }
    ]
  ]
}

然后再magin.js中引入

import { Button } from 'vant'; 

use挂载就可以使用了

• 但是如果引入的组件有很多的话就不是很方便
  可以创建一个js文件进行封装

// 在src下面新建一个 vant.js
import { Button,Icon } from 'vant';
let components = [Button,Icon];

const apply = (app) => {
    components.forEach(item => {
        app.use(item)
    })
}

export default apply

• 然后导出

mport apply from './vant';
let app = createApp(App);
apply(app); // vant 组件按需引入注册的方法调用

V3 element-ui的使用

• 安装

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

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

• 如果您的网络环境不好，建议使用相关镜像服务 cnpm

完整引入

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

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')

element-ui按需引入

npm install unplugin-element-plus -D

然后把下列代码插入到你的 Webpack 的配置文件中，在src下面新建一个vue.config.js写入如下的代码：

module.exports = {
    configureWebpack: {
        plugins: [
            require('unplugin-element-plus/webpack')({
                // options
            }),
        ],
    },
}

vite搭建项目

Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。

通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。

使用 npm：

# npm 6.x
$ npm init vite@latest <project-name> --template vue
<project-name> 是你要创建的项目名称
vue 是你要创建的vue的项目 你也可以创建 react 或者 preact 等

# npm 7+，需要加上额外的双短横线
$ npm init vite@latest <project-name> -- --template vue

$ cd <project-name>
$ npm install
$ npm run dev
或者 yarn：

$ yarn create vite <project-name> --template vue
$ cd <project-name>
$ yarn
$ yarn dev
或者 pnpm:

$ pnpm create vite <project-name> -- --template vue
$ cd <project-name>
$ pnpm install
$ pnpm dev