Vue项目导入Vant

青旅半醒 2024-03-16 12:32 57阅读 0赞

## Vue项目导入Vant ##

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

### 安装 ###

在命令窗口中输入`npm i vant`  
![在这里插入图片描述][22e679e02cc84f50b2136666827f3385.png]  
安装好之后，在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')

![在这里插入图片描述][04174b04241e483b922eca2e92d6af94.png]

### 配置Rem ###

输入`npm i -S amfe-flexible`  
![在这里插入图片描述][8ae2f50c76354acb98a69d9b990b8045.png]  
进行导入  
![在这里插入图片描述][1335c5cf07904245b5834896f9175b68.png]

有这个了之后就代表安装好了  
![在这里插入图片描述][85ff8b4c6dfe43b4ad84bd94bec06041.png]

*  创建配置文件  
    ![在这里插入图片描述][42f8f965a2534cf98c6111e23ca0f0a4.png]

![在这里插入图片描述][f773e8c82dbb48c898c6886183e2c3a5.png]

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

*  再完善一下  
    ![在这里插入图片描述][709940adf92b4bba981c1c33448a9559.png]  
    ![在这里插入图片描述][ec8ff2377b014ae2ad215e2123955983.png]

### 封装请求模块 ###

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

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

![在这里插入图片描述][920d9de3c266468b95339a3c99bb1fc6.png]

### 创建登录路由 ###

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

### 文件编写 ###

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

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

![在这里插入图片描述][f730f7f647724cfbaf2e8017bb8287b7.png]  
![在这里插入图片描述][b0681b4dce224565ba60a6c8ff8d392f.png]

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

eslint --fix src\router\index.js

![在这里插入图片描述][e82a6c61be5d4360a1e3fdbc33859ed7.png]

删除原本的页面和配件。  
![在这里插入图片描述][6839a9e84f2f4f85b00f8d5536816bee.png]

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

<template>
        <div>
          登录
        </div>
      </template>
    
    <script>
    export default {
          
      name: 'LoginView' // change the component name here
    }
    </script>
    
      <style>
      /* your existing style code here... */
      </style>

![在这里插入图片描述][f1f903f47e8a419fbf4e2c1e66f92996.png]

在index.js里面加上对应的路由配置  
![在这里插入图片描述][97cf0744de5a4514b4144af2ad4a8869.png]

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代码  
![在这里插入图片描述][d9fa67207819432ab5f82339ef352bd5.png]

全部配置完之后，就可以访问了  
![在这里插入图片描述][ae8452bee68e4280870bc93be043c68d.png]

[Vant3]: https://vant-contrib.gitee.io/vant/v3/#/zh-CN/advanced-usage
[Vue_]: https://blog.csdn.net/qq_51447496/article/details/131003860
[22e679e02cc84f50b2136666827f3385.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/06297c55c2ff4f1e9ccc2b35815f63b7.png
[04174b04241e483b922eca2e92d6af94.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/a53822546ee949b8a19a361720d256c2.png
[8ae2f50c76354acb98a69d9b990b8045.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/d26ecd2bbb7640f29ab5b6bee05cffd2.png
[1335c5cf07904245b5834896f9175b68.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/707ef097e6b542839e8c9daa40ac5dbf.png
[85ff8b4c6dfe43b4ad84bd94bec06041.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/1853ad7d5fa147feb11f6944e880cb66.png
[42f8f965a2534cf98c6111e23ca0f0a4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/c0fbfd5780164ce3aec355b9fadff6ce.png
[f773e8c82dbb48c898c6886183e2c3a5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/bb3c0b503af9473390763afe740d83f9.png
[709940adf92b4bba981c1c33448a9559.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/ea2efb2618b84c57ab5d4bfa34b93985.png
[ec8ff2377b014ae2ad215e2123955983.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/ca2fd221ce24492e83a5f3b2dd722bb4.png
[d20ae0be8e1f4f41880600b996efdb07.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/8f97cbb2a71a49a8979c0e9324ba9049.png
[920d9de3c266468b95339a3c99bb1fc6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/3215a58e912a46a8adb3f814f6bbb25a.png
[3f0daf669b91473ab0b0edc4514b6d3b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/4966fd7271db4d75860ffc4b1b395a8f.png
[015532be2c1d4c83aa5dff823a35f4a5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/9c805c489b294dfd86c939b2077a0c80.png
[d433f07735fa43c2bc6d60d63300db06.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/fb61815b5cce47799dd6b7043259aba9.png
[f730f7f647724cfbaf2e8017bb8287b7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/6e4c6c955fa7452fbf1c1eb05d494c0b.png
[b0681b4dce224565ba60a6c8ff8d392f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/0fabc2128051460e960ad009c548f013.png
[e82a6c61be5d4360a1e3fdbc33859ed7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/d8efd6ea5c32425295b3f5f4e3324ab6.png
[6839a9e84f2f4f85b00f8d5536816bee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/a01fe603fbd1460c86702915f2ed5b94.png
[f1f903f47e8a419fbf4e2c1e66f92996.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/249b5618e40d4014af5217d8878bf9c5.png
[97cf0744de5a4514b4144af2ad4a8869.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/e6df7d1ea8684a6591cc7df57a28fe96.png
[d9fa67207819432ab5f82339ef352bd5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/f25f40fafb12424c87247b63b15dbbe0.png
[ae8452bee68e4280870bc93be043c68d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/88d181a5a19a44169c81c34b8a8e76fa.png