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代码
全部配置完之后，就可以访问了
