Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本（搭建开发环境）(vue做项目的流程)

Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本（搭建开发环境） 基于 Vue3.x + Vant UI 的多功能记账本（二）文章目录基于 Vue3.x + Vant UI 的多功能记账本（二）搭建开发环境项目演示1、创建项目2、配置路由3、添加 Vant UI 组件库4、移动端 rem 配置5、添加 iconfont 文字图标库6、二次封装 Axios 请求库7、添加 Less 预处理器写到最后（附源码）搭建开发环境

推荐整理分享Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本（搭建开发环境）(vue做项目的流程)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue项目实例,vue 实战,vue项目实例,vue做项目的流程,vue项目实战教程,vue项目实例,vue做项目的流程,vue做项目的流程,内容如对您有帮助，希望把文章链接给更多的朋友！

Vue3 + Vant UI_多功能记账本

项目演示1、创建项目

终端键入以下指令，每一行命令跟一个回车（也可以使用 npm，方法类似）

// 创建 vite-app 项目yarn create vite-app daily-cost// 定位到 daily-cost 目录cd daily-cost// 添加依赖yarn// 启动项目npm dev

安装路由插件

yarn add vue-router@next2、配置路由

在 src 目录下创建 router 文件夹，router 文件夹里面创建 index.js 文件，用于路由的配置

./src/router/index.js

// 用的是 hash 路由，不需要后端支持import { createRouter, createWebHashHistory } from "vue-router";import Home from '../views/Home.vue'// 创建路由实例const router = createRouter({ history: createWebHashHistory(), // hash 模式 routes: [ { path: "/", component: Home } ]})// 抛出路由实例export default router

在 src 目录下创建 views 文件夹，views 文件夹里面创建 Hello.vue 组件，让路径能渲染出内容

./src/views/Hello.vue

<template> <div>前端杂货铺</div></template><script>export default {};</script>

在 main.js 文件中 导入并使用路由，记得拆分一下源代码，好让 router 被使用

main.js

import { createApp } from 'vue'import App from './App.vue'import router from './router'import './index.css'const app = createApp(App)app.use(router)app.mount('#app')

在 App.vue 组件中导入 Hello.vue 组件，并做出呈现

App.vue

<template> <router-view /></template><script>import Home from './views/Home.vue'export default { name: 'App', components: { Home }}</script>

此时，yarn dev，打开浏览器可以看到…

3、添加 Vant UI 组件库

安装 Vant UI 组件库（ Vant UI 国内地址）

yarn add vant@3.0.0-beta.8 -S

添加按需引入的插件（减少代码量，加快项目的启动）

yarn add babel-plugin-import -D

在根目录添加 babel.config.js，代码如下

module.exports = { plugins: [ [ "import", { libraryName: "vant", libraryDirectory: "es", style: true, }, "vant", ], ],};

在 main.js 文件中导入样式并按需注册组件

import { createApp } from 'vue'import {Button} from 'vant'import App from './App.vue'import router from './router'import "vant/lib/index.css"; // 全局引入样式import './index.css'// 创建实例const app = createApp(App)// 注册组件 => 按需注册app.use(Button)app.use(router)app.mount('#app')

在 Hello.vue 组件中，随便添加一个组件做测试（中号的警告按钮）

<template> <div>前端杂货铺</div> <van-button type="warning" size="middle">中号按钮</van-button></template><script>export default {};</script>

此时，yarn dev，打开浏览器可以看到…

4、移动端 rem 配置

本项目是一个移动端的项目，需要使用 rem 做不同手机型号的适配

Vant 中的样式默认使用 px 作为单位，如果要使用 rem 单位，可使用以下两个工具

postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem（在编译的时候对 px 单位转换为 rem 单位时使用）lib-flexible 用于设置 rem 基准值（网页做 html 的 font-size 适配用的）

接下来，安装它们

yarn add lib-flexible -Syarn add postcss-pxtorem -D

在 main.js 引入 lib-flexible

main.js

import { createApp } from 'vue'import {Button} from 'vant'import "lib-flexible/flexible";import App from './App.vue'import router from './router'import "vant/lib/index.css"; // 全局引入样式import './index.css'// 创建实例const app = createApp(App)// 注册组件 => 按需注册app.use(Button)app.use(router)app.mount('#app')

在根目录