一.安装

1.安装最新版本的 @vue/cli：

yarn global add @vue/cli
# 或
npm install -g @vue/cli

2.脚手架搭建项目

使用 npm：

# npm 6.x
$ npm init vite@latest <project-name> --template vue

# 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

【参考：v3.cn.vuejs.org/guide/insta… 】

二.引入路由vue-router

1.安装

yarn add vue-router

2.创建一个文件配置路由 src/router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'
 
import login from '../views/login/index.vue' // 登录页
 
const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        { pash: '/login', component: login }
    ]
})
 
export default router;

3.路由挂载

import { createApp } from 'vue';
import App from './App.vue';

import router from './router/index';

const app = createApp(App);

app.use(router);
app.mount('#app');

三.按需引入组件 vant

1.安装插件

通过 yarn 安装

yarn add vant
yarn add vite-plugin-style-import@1.4.1 -D

2. 配置插件

安装完成后，在 vite.config.js 文件中配置插件：

import vue from '@vitejs/plugin-vue';
import styleImport, { VantResolve } from 'vite-plugin-style-import';

export default {
  plugins: [
    vue(),
    styleImport({
      resolves: [VantResolve()],
    }),
  ],
};

3. 引入组件

import { createApp } from 'vue';
import { Button } from 'vant';

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

四.引入axios

1.安装

yarn add axios

【参考：github.com/axios/axios…