Vue项目导入Vant

本文讲解Vue项目如何导入Vant
参考文章：Vant3
创建vue参考这篇文章：用命令窗口的方式创建Vue项目

安装

在命令窗口中输入npm i vant
在这里插入图片描述
安装好之后，在main.js里面加上如下配置

import {
    
     createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Vant from 'vant'
import 'vant/lib/index.css'
createApp(App).use(store).use(router).use(Vant).mount('#app')

在这里插入图片描述

配置Rem

输入npm i -S amfe-flexible
在这里插入图片描述
进行导入

有这个了之后就代表安装好了
在这里插入图片描述

创建配置文件

在这里插入图片描述

module.exports = {
    plugins: {
        "postcss-pxtorem": {
            rootValue: 37.5,
            propList: ["*"],
        }
    }
}

再完善一下

封装请求模块

首先在命令窗口中，输入npm install axios
在这里插入图片描述
创建utils文件夹，然后在下面创建request.js文件，放置配置

import axios from "axios";
const request = axios.create({
    
    
    baseURL: "http://localhost:8081/",
});
export default request;

在这里插入图片描述

创建登录路由

如果没有这个router,就输入这个命令npm install vue-router@4
在这里插入图片描述
记得修改这个main.js，里面加上router

文件编写

首先删除掉Vue本身的不需要的文件

首先进入App.vue里面删成这个样子
在这里插入图片描述

在这里插入图片描述

如果出现了报错
可以使用这个命令自动解决

eslint --fix src\router\index.js

在这里插入图片描述

删除原本的页面和配件。
在这里插入图片描述

编写一个页面叫做login.vue，进行演示

<template>
    <div>
      登录
    </div>
  </template>

<script>
export default {
      
      
  name: 'LoginView' // change the component name here
}
</script>

  <style>
  /* your existing style code here... */
  </style>

在这里插入图片描述

在index.js里面加上对应的路由配置
在这里插入图片描述

import {
    
     createRouter, createWebHashHistory } from 'vue-router'

const routes = [
  {
    
    
    path: '/login',
    name: 'LoginView',
    component: () => import('../views/login/index.vue')
  }
]

const router = createRouter({
    
    
  history: createWebHashHistory(),
  routes
})

export default router

然后修改App.vue代码
在这里插入图片描述

全部配置完之后，就可以访问了
在这里插入图片描述