Vue项目导入Vant

GeekLiHua

发布于 2025-01-21 21:54:17

6700

代码可运行

文章被收录于专栏：JavaJava

运行总次数：0

代码可运行

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代码