Vue项目导入Vant-阿里云开发者社区

Vue项目导入Vant

2024-01-17 35

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Vue项目导入Vant

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