Vue项目导入Vant

Vue项目导入Vant

Vue项目导入Vant

​

本文讲解Vue项目如何导入Vant

参考文章：Vant

创建vue参考这篇文章：用命令窗口的方式创建Vue项目

安装

在命令窗口中输入npm i vant

安装好之后，在main.js里面加上如下配置

代码语言：javascript代码运行次数：0运行复制

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

配置Rem

输入npm i -S amfe-flexible

进行导入

有这个了之后就代表安装好了

• 创建配置文件

代码语言：javascript代码运行次数：0运行复制

 = {
    plugins: {
        "postcss-pxtorem": {
            rootValue: 7.5,
            propList: ["*"],
        }
    }
}

• 再完善一下

封装请求模块

首先在命令窗口中，输入npm install axios

创建utils文件夹，然后在下面创建request.js文件，放置配置

代码语言：javascript代码运行次数：0运行复制

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

创建登录路由

如果没有这个router,就输入这个命令npm install vue-router@4

记得修改这个main.js，里面加上router

文件编写

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

首先进入App.vue里面删成这个样子

如果出现了报错

可以使用这个命令自动解决

代码语言：javascript代码运行次数：0运行复制

eslint --fix src\router\index.js

删除原本的页面和配件。

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

代码语言：javascript代码运行次数：0运行复制

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

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

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

在index.js里面加上对应的路由配置

代码语言：javascript代码运行次数：0运行复制

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

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

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

export default router

然后修改App.vue代码

全部配置完之后，就可以访问了

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：202-09-0，如有侵权请联系 cloudcommunity@tencent 删除前往查看登录路由配置routervant