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

码农世界 2024-05-18 前端 68 次浏览 0个评论

读者福利

========

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

由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的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屏幕

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

5.Tabbar标签栏的使用

5.1初始化项目

App.vue

Home.vue

5.2引入

App.vue

5.3路由模式

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

App.vue



  首页
  介绍

实现效果如下图

6.Swipe轮播的使用

6.1引入

Home.vue

6.2图片懒加载

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

Home.vue

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

最终效果如下图：

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

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.csdn.net/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.csdn.net/topics/618166371)**
> 主要内容包括：**HTML，CSS，JavaScript，浏览器，性能优化等等**
[外链图片转存中...(img-IFUSoYaU-1714985847882)]

转载请注明来自码农世界，本文标题：《2024年前端最全vue+vant搭建移动端框架，进阶加薪全靠它》