Ant Design pro 脚手架初始话和vite初始化并整合vant

Ant Design Pro

初始化

# 使用 npm
npm i @ant-design/pro-cli -g

打开将要存放项目的文件夹 打开黑窗口 输入代码

pro create  项目名称

选择umi版本

选择4版的

安装依赖

打开项目的终端

输入

yarn 或者  npm install

启动

在package.json里面 点击start

删除不必要的

1.移除国际化

2.删掉e2e测试，删除依赖

3.删除tests测试

4.删除playwright.config.ts自动测试框架，删除用到他的地方，再删除依赖

使用vite脚手架

npm create vite@latest

安装依赖

yarn 或者 npm install

启动查看

点击网址查看

整合组件库vant

安装

# 通过 npm 安装
npm i vant

# 通过 yarn 安装
yarn add vant

# 通过 pnpm 安装
pnpm add vant

2. 配置插件

基于 vite 的项目，在 vite.config.js 文件中配置插件：


3. 使用组件

完成以上两步，就可以直接在模板中使用 Vant 组件了，unplugin-vue-components 会解析模板并自动注册对应的组件。

找到main.ts主文件入口

从vue中引用createApp创建一个App，然后用.mount，将咱们这个view的页面文件和咱们的这个dom元素关联起来

.mount把一个组件页面挂在到某一个页面上

如果vant爆红，下载vant即可

npm -i vant

import { createApp } from 'vue';
import {Button} from "vant";
import './style.css';
import 'vant/lib/index.css';
import App from './App.vue';

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

测试效果

引入按钮