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

简介: Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本(搭建开发环境)

搭建开发环境

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@next
• 1

2、配置路由

在 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
• 1

在根目录添加 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 -S
yarn 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')

在根目录声明 postcss.config.js 文件,为 px 单位转 rem 单位做配置

module.exports = {
  plugins: {
    "postcss-pxtorem": {
        rootValue: 37.5, // Vant 官方根字体的大小
        propList: ['*'],
        selectorBlackList: [".norem"] // 过滤掉.norem-开头的 class,不进行 rem 转换
    }
  }
}

在 Hello.vue 组件设置一个 div 样式,测试 rem 适配是否成功

Hello.vue

<template>
  <div class="demo">前端杂货铺</div>
  <van-button type="warning" size="middle">中号按钮</van-button>
</template>
<script>
export default {};
</script>
<style scoped>
.demo {
  width: 100px;
  height: 100px;
  background: aquamarine;
}
</style>

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

5、添加 iconfont 文字图标库

阿里巴巴字体图标库

首先,注册个人账户

之后,新建自己的项目


2b527d9c357142ec94766aa275cf2ee1.png

117989aaad114bb09d381d3dfeda6f43.png

随便添加一个图标到库

选择项目,添加购物车的图标到项目中

生成 hash 码

生成的 hash码 添加至 index.html 文件(注意:每次新增图标后,都要重新生成新的 css 静态资源,需要在这里替换最新的路径)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3639381_k7hsr2nrb2j.css">
  <title>Vite App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

在 Hello.vue 中添加图标,测试是否可以使用

Hello.vue

<template>
  <div class="demo">前端杂货铺</div>
  <i class="iconfont icon-bianji"></i>
  <van-button type="warning" size="middle">中号按钮</van-button>
</template>
<script>
export default {};
</script>
<style scoped>
.demo {
  width: 100px;
  height: 100px;
  background: aquamarine;
}
</style>

此时,yarn dev,打开浏览器可以看到图标显示出来…


6、二次封装 Axios 请求库

在 src 目录下创建 utils 文件夹,该文件夹下创建 axios.js 文件

import axios from "axios";
import { Toast } from "vant";
import { useRouter } from "vue-router";
axios.defaults.baseURL =
  process.env.NODE_ENV == "development"
    ? "//localhost:3000"
    : "//192.168.1.6:3000/"; // 根据环境变量切换本地和线上的请求地址
axios.defaults.withCredentials = true; // 允许跨域
axios.defaults.headers["X-Requested-With"] = "XMLHttpRequest";
axios.defaults.headers["token"] = localStorage.getItem("token") || ""; // 本项目采用 token 的用户鉴权方式,在请求头的 headers 内添加 token,每次请求都会验证用户信息
axios.defaults.headers.post["Content-Type"] = "application/json";
axios.interceptors.response.use((res) => {
  const router = useRouter(); // vue-router 4.x 的实例
  if (typeof res.data !== "object") {
    Toast.fail("服务端异常!");
    return Promise.reject(res);
  }
  // code 非 200 的情况下为异常情况
  if (res.data.code != 200) {
    if (res.data.msg) Toast.fail(res.data.msg);
    if (res.data.code == 401) {
      router.push({ path: "/login" });
    }
    return Promise.reject(res.data);
  }
  // 其他情况直接返回 data 数据
  return res.data;
});
export default axios;

7、添加 Less 预处理器

安装 Less 插件

npm i less less-loader -D

在 src 目录下新建 config 文件夹,在里面新建 custom.less 文件

custom.less

  • 先添加一些样式,后续还会更新
@primary: #18b7d3; // 主题色
@danger: #fc3c0c;
@primary-bg: #f5f5f5;

写到最后(附源码)

看到这么好的项目,是不是有种想自己做出来的冲动?

如果有,那么说明你非常的想提升自己,想检验自己这段时间的学习成果,这个项目绝对是你的 不二选择

心动不如行动

那么接下来,一起从0搭建,开始我们基于 Vue3.x + Vant UI 的项目之旅吧~

相关文章
|
2月前
|
JavaScript
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
这篇文章介绍了如何使用Ant Design Vue UI框架创建一个简单的后台管理模板,包括创建Vue项目、安装和使用ant-design-vue、以及编写后台管理通用页面的代码和样式。
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
|
27天前
|
前端开发 开发者 UED
UI 框架:nav-ui&uni-ui&vant
本文档介绍了`nav-ui`、`uni-ui`和`vant`三个UI库的基本使用方法,包括图标、表格和树的使用示例,以及如何在项目中安装和配置这些UI组件。对于`nav-ui`,详细说明了图标组件的安装与使用,包括本地图标和第三方图标库的集成方式。`uni-ui`部分则重点讲解了CSS的使用方法。最后,`vant`部分提供了从项目创建到组件安装的具体步骤,以及如何将下载的组件正确地集成到项目中。
|
3月前
|
JavaScript
vue element-ui 中el-message重复弹出问题解决 el-message重复弹出解决办法
vue element-ui 中el-message重复弹出问题解决 el-message重复弹出解决办法
223 49
|
21天前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
82 0
|
3月前
|
JavaScript 前端开发 安全
[译] 在 Vue 组件中分离 UI 和业务逻辑。
[译] 在 Vue 组件中分离 UI 和业务逻辑。
|
3月前
|
JavaScript
在vue使用vant在<stylus>中修改样式
在vue使用vant在<stylus>中修改样式
28 0
|
3月前
|
JavaScript 前端开发
Vue实现Element UI框架的自定义输入框或下拉框在输入时对列表选项进行过滤,以及右键列表选项弹出菜单进行删除
本文介绍了如何在Vue框架结合Element UI库实现自定义输入框或下拉框,在输入时对列表选项进行过滤,并支持右键点击列表选项弹出菜单进行删除的功能。
65 0
|
3月前
|
JavaScript 容器
Vue+Element UI
该博客文章介绍了如何在Vue中集成Element UI来构建后台管理系统的左侧菜单,包括使用`el-menu`、`el-submenu`和`el-menu-item`等组件,并通过Vue router动态构建菜单项及其路由设置。
|
10天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
3天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发