2024年前端最全vue+vant搭建移动端框架，进阶加薪全靠它

于 2024-05-06 16:57:39 发布
阅读量2.1k 收藏 26
点赞数 15
分类专栏： 程序员 文章标签： 前端 vue.js arcgis
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2401_84620231/article/details/138500756
版权
本文详述了如何使用Vue.js和Vant构建移动端框架，包括按需引入Vant组件、配置rem适配、Tabbar与Swipe的使用、多环境变量和alias别名设置，以及如何用Vuex管理状态实现按钮功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

读者福利

========

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）


npm I vant -S

参考vant官网快速上手教程： https://youzan.github.io/vant/#/zh-CN/quickstart

3.引入组件

自动按需引入(推荐)
3.1安装babel-plugin-import插件
babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式
#安装插件

npm i babel-plugin-import -D

3.2添加配置
在babel.config.js 中添加配置

{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

3.3引入vant组件
如在全局引入懒加载组件
src/main.js

//引入组件
import {Lazyload} from 'vant'
Vue.use(Lazyload)

引入组件后发现报错：是因为项目开启了eslint检查
解决办法： 在项目根目录新建vue.config.js文件，去除在保存的时候检查代码的功能, 配置完后记得重新npm run serve启动。
vue.config.js

 module.exports = {
     lintOnSave: false //eslint-loader 是否在保存的时候检查
 }

vue.config.js是vue-cli3之后新增的一个功能，再这个版本里面如果要配置webpack相关的属性，就需要自己在项目根目录新建vue.config.js这个文件，然后在该文件里面去写入你需要的配置。
后面再对vue.config.js进行更详细配置。

4.rem适配

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

postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
lib-flexible 用于设置 rem 基准值

4.1安装

npm install postcss-pxtorem lib-flexible --save-dev

4.2postcss配置
在项目目录下新建文件postcss.config.js
postcss.config.js

//postcss的配置
module.exports = {
  plugins: {
    autoprefixer: {
      browsers: ['Android >= 4.0', 'iOS >= 8'],
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['\*'],
    },
  },
};

4.3引入 lib-flexible
main.js

//引入lib-flexible 用于设置rem基准值
import "lib-flexible/flexible"

rem详解

1rem等于html根元素设定的font-size的px值，vantui设置rootValue： 37.5，则1rem 等于 37.5px 等于 设备的宽度/10
切换不同的机型， 根元素有不同的font-size， 当写css px样式时， 会被程序换算成rem达到适配 使用vant组件，
需要按照rootValue：37.5来写样式

举个例子： 一张750px * 1334px图片， 在iphone6上铺满屏幕， 其他机型适配
当rootValue：75， 样式width：750px；height：1334px；图片会撑满iphone6屏幕，切换其他机型图片同样撑满屏幕
当rootValue：37.5， 样式width：375px；height：667px；图片会撑满iphone6屏幕

配置完如下图所示说明配置成功

<html data-dpr="1" style="font-size: 41.4px;"></html>

在这里插入图片描述

5.Tabbar标签栏的使用

5.1初始化项目
App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

Home.vue

<template>
  <div class="home">
    
  </div>
</template>

<script>

export default {
 name: 'Home',
 
};
</script>

5.2引入
App.vue

<script>
import { Tabbar, TabbarItem } from 'vant';
export default {
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
}
</script>

5.3路由模式
标签栏支持路由模式，用于搭配vue-router使用。路由模式下会匹配页面路径和标签的to属性，并自动选中对应的标签
App.vue

<router-view/>

<van-tabbar route>
  <van-tabbar-item replace to="/" icon="home-o">首页</van-tabbar-item>
  <van-tabbar-item replace to="/about" icon="orders-o">介绍</van-tabbar-item>
</van-tabbar>

实现效果如下图
在这里插入图片描述

6.Swipe轮播的使用

6.1引入
Home.vue

<script>
import { Swipe, SwipeItem} from "vant";
export default {
  name: 'Home',
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem
  },
};
</script>

6.2图片懒加载
当 Swipe 中含有图片时，可以配合 Lazyload 组件实现图片懒加载。
Home.vue

<van-swipe :autoplay="3000">
  <van-swipe-item v-for="(image, index) in images" :key="index">
    <img v-lazy="image" />
  </van-swipe-item>
</van-swipe>


import Vue from 'vue';
import { Lazyload } from 'vant';

Vue.use(Lazyload);

export default {
  data() {
    return {
      images: [
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-2.jpg',
      ],
    };
  },
};

6.3 设置图片样式
Home.vue

<template>
  <div class="home">
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
  </van-swipe>
  </div>
</template>

<script>
import { Swipe, SwipeItem} from "vant";
export default {
  name: 'Home',
  data() {
    return {
      images: [
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-2.jpg',
      ],
    };
  },
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem
  },
};
</script>

<style scoped>
  img{
    width: 100%;
  }
</style>

最终效果如下图：
在这里插入图片描述

7.配置多环境变量

7.1配置介绍

以 VUE_APP_ 开头的变量，在代码中可以通过 process.env.VUE_APP_ 访问。
比如,VUE_APP_BASE_API = ‘development’ 通过process.env.VUE_APP_BASE_API访问。   
除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量NODE_ENV 和BASE_URL。

7.2在项目根目录中新建.env， .env.development 和 .env.production， 在文件中定义变量
.env.development 本地开发环境配置

NODE\_ENV = "development";
BASE\_URL = "/";
VUE\_APP\_BASE\_API ="/dev-api";

.env.production 正式环境配置

NODE\_ENV = "production";
BASE\_URL = "/";
VUE\_APP\_BASE\_API ="/prod-api";

.env 公共环境配置

NODE\_ENV = "development";
BASE\_URL = "/";
VUE\_APP\_BASE\_API ="/dev-api";
VUE\_APP\_AA="aa"

7.3 vue.config.js配置
vue.config.js的具体配置参数可以参照vue-cli文档地址：https://cli.vuejs.org/zh/config/#crossorigin
vue.config.js

// module.exports = {
// lintOnSave: false //eslint-loader 是否在保存的时候检查
// }

console.log(process.env.NODE\_ENV);
const port  = process.env.port || 9999;

module.exports = {
    // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码 
    // (在生产构建时禁用 eslint-loader) 应该是!==,这里设置为===是为了不进行检查
    lintOnSave: process.env.NODE\_ENV === 'production',
    devServer:{
        port,
        open:true,
        // 前端应用和后端 API 服务器没有运行在同一个主机上，
        // 你需要在开发环境下将 API 请求代理到 API 服务器
        proxy:{
            [process.env.VUE\_APP\_BASE\_API]:{
                target:"http://localhost:8000/mock",// 接口的域名
                changeOrigin:true,// 开启代理，在本地创建一个虚拟服务端
                pathRewrite:{
                    [process.env.VUE\_APP\_BASE\_API]:""
                }
            }
        }
    }
}

8.配置alias别名

vue.config.js

const path = require('path');
function resolve(dir){
    return path.join(__dirname,dir);
}
module.exports = {
    
    configureWebpack:{
        resolve:{
            alias:{
                "@":resolve("src"),
                "components":resolve("src/components"),
                "utils":resolve("src/utils")
            }
        }
    }
}

9.使用vuex实现按钮功能

9.1添加按钮
Home.vue

<template>
  <div class="home">
    <van-button type="primary" @click="addOne">按钮</van-button>
  </div>
</template>


<script>
import { Button } from "vant";
export default {
  name: 'Home',
  components: {
    [Button.name]: Button
  },
  methods: {
  	//添加按钮触发事件
    addOne(){
      console.log("点击了按钮")
    }
  }
};
</script>

9.2使用Vuex 实现点击按钮两秒钟后数字加1
store/index.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  },
});

main.js引入

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

使用
store/index.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  //初始状态, 存储基本数据
  state: {
    number: 1
  },


### 基础面试题

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/topics/618166371)**

> 主要内容包括：**HTML，CSS，JavaScript，浏览器，性能优化等等**

![](https://img-blog.csdnimg.cn/img_convert/a398fb25a76a29d80cf3fc0da7eeeeca.webp?x-oss-process=image/format,png)

 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

使用
store/index.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  //初始状态, 存储基本数据
  state: {
    number: 1
  },


### 基础面试题

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/topics/618166371)**

> 主要内容包括：**HTML，CSS，JavaScript，浏览器，性能优化等等**

[外链图片转存中...(img-IFUSoYaU-1714985847882)]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值