vue2.x vant2.x H5 移动端脚手架

文章目录

一、前置准备
- 1. 技术选型
- 2. 创建vue项目
二、Rem 布局适配
- 2.1. px转rem
- 2.2. 设置 rem 基准值
- 2.3. 配置vue.config.js
- 2.4. 重置样式表
- 2.5. 配置样式表
- 2.6. 安装less
- 2.7. 注册less
- 2.8. 代码中使用
三、vant安装/配置/测试
- 3.1. 安装vant-ui
- 3.2. 引入与注册
- 3.3. vant测试
四、axios 工具封装
- 4.1. 下载安装axios
- 4.2. 创建axios实例
- 4.3. 配置拦截器
- 4.4. api管理
- 4.5. 跨域代理配置
五、动态路由
- 5.1. 下载vue-router
- 5.2. 组件注册
- 5.3. 主页路由
- 5.4. 实例挂载
- 5.5. 创建home页面
- 5.6. 引入 AppTabBar
六、优化
- 6.1. 路由守卫
- 6.2. 异常修复
- 6.3. 路由懒加载

一、前置准备

1. 技术选型

技术选型

组件	版本	说明
vue	^2.6.11	数据处理框架
vue-router	^3.5.3	动态路由
vant	^2.12.37	移动端UI
axios	^0.24.0	前后端交互
amfe-flexible	^2.2.1	Rem 布局适配
postcss-pxtorem	^5.1.1	Rem 布局适配
less	^4.1.2	css编译
less-loader	^5.0.0	css编译
vue/cli	~4.5.0	项目脚手架

vue-cli + vant+ less +axios 开发

2. 创建vue项目

使用vue-cli脚手架，采用vue2.x默认安装即可

vue ui

二、Rem 布局适配

2.1. px转rem

安装 amfe-flexible

在main.js 主入口文件引入 amfe-flexible, 它会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem

npm i amfe-flexible -S

在public/index.html中替换标签

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

在main.js 引入amfe-flexible

import 'amfe-flexible';

2.2. 设置 rem 基准值

安装第三方插件 postcss-pxtorem
注意需要安装5.11 版本，否则报错

npm i postcss-pxtorem@5.1.1 -S

会自动将css代码中的px单位根据规则转换成rem 单位

注意: 如果css样式中有不需要转成rem 的单位，只需将单位写成大写PX 即可。

2.3. 配置vue.config.js

在项目根目录创建vue.config.js文件，设置如下配置：

注意：修改完项目根目录下的配置文件后，一定要重启项目，这样配置文件才生效

module.exports = {lintOnSave: false, // eslint-loader 是否在保存的时候检查css: {loaderOptions: {postcss: {plugins: [// 把px单位换算成rem单位require("postcss-pxtorem")({// 换算的基数 375的设计稿，换算基数就是37.5rootValue: 37.5,selectorBlackList: [".van"], // 要忽略的选择器并保留为px。propList: ["*"], //可以从px更改为rem的属性。minPixelValue: 1 // 设置要替换的最小像素值。})]}}}
}

2.4. 重置样式表

在src/assets下创建css文件夹，新建reset.css文件
reset.css 重置样式表代码:

@charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}
body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}
body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}
h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%}
h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"Hiragino Sans GB","微软雅黑",simsun,sans-serif}
h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal}
address,cite,dfn,em,i,optgroup,var{font-style:normal}
table{border-collapse:collapse;border-spacing:0;text-align:left}
caption,th{text-align:inherit}
ul,ol,menu{list-style:none}
fieldset,img{border:0}
img,object,input,textarea,button,select{vertical-align:middle}
article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
blockquote:before,blockquote:after,q:before,q:after{content:"\0020"}
textarea{overflow:auto;resize:vertical}
input,textarea,button,select,a{outline:0 none;border: none;}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
mark{background-color:transparent}
a,ins,s,u,del{text-decoration:none}
sup,sub{vertical-align:baseline}
html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;}
body {font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;}
hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;}
a {color: #25a4bb;text-decoration: none;}

2.5. 配置样式表

在main.js 文件中, 引入重置样式表reset.css,去掉标签的默认样式

// 引入重置样式表
import '@/assets/css/reset.css'

2.6. 安装less

预编译语言，编译成css, 在main.js 引入使用
依次执行：

npm install less -S

npm install less-loader@5.0.0  -S

注意：此处安装less-loader 版本需是5.x版本,否则报错,默认安装的是最新版本,所以安装需指定版本号

2.7. 注册less

//在main.js中,引入less并使用

import less from 'less'
Vue.use(less)

2.8. 代码中使用

<style lang='less' scoped></style>

三、vant安装/配置/测试

3.1. 安装vant-ui

官网地址： https://vant-contrib.gitee.io/vant/#/zh-CN/

npm i vant -S

或者

yarn add vant

在package.json文件中看到上面效果即安装成功

3.2. 引入与注册

- 在main.js 文件中引入vant 对应的js和css 文件

//导入所有组件
import Vant from 'vant';
import 'vant/lib/index.css';Vue.use(Vant)

3.3. vant测试

在src下的App.vue组件中的内容，替换成以下内容进行测试

<template><div id="app"><H1>Home组件测试vant组件</H1><van-button type="primary">主要按钮</van-button><van-button type="info">信息按钮</van-button><van-button type="default">默认按钮</van-button><van-button type="warning">警告按钮</van-button><van-button type="danger">危险按钮</van-button></div>
</template><script>export default {name: 'App',components: {}
}
</script><style lang='less' scoped>
h1{color: #25a4bb;margin-bottom: 15px;
}
</style>

效果图

四、axios 工具封装

4.1. 下载安装axios

npm install axios

4.2. 创建axios实例

在src目录下创建utils目录, 创建request.js 文件.

// 导入axios
import axios from 'axios';
// 使用自定义配置新建一个axios 实例，对axios 做一些基础配置
const instance = axios.create({baseURL: 'http://kumanxuan1.f3322.net:8001/',timeout: 5000,headers: { 'X-Custom-Header': 'foobar' }
});export default instance

4.3. 配置拦截器

// 添加请求拦截器
instance.interceptors.request.use(function (config) {//请求之前执行该函数， 一般在该处设置tokenlet token = localStorage.getItem("token");if (token) {config.headers["token"] = token}// 在发送请求之前做些什么return config;
}, function (error) {// 对请求错误做些什么return Promise.reject(error);
});//响应拦截器
instance.interceptors.response.use(response => {//1.非200响应//2.token过期//3.异地登陆//4.非对象加密的解密return response.data
})

4.4. api管理

在src目录下创建https 目录, 目录下创建http.js 文件,该文件主要用来管理所有的http请求的,如下:

// 所有的请求都放在该目录
import instance from "../utils/request";//1. 获取首页数据列表
export function getIndexList() {return instance.get('/index/index')
}//2. 分类页 Category
// 全部分类数据接口
export function GetChannelDataApi(params) {return instance({url: '/api/catalog/index',method: 'get',params})
}// 3.根据关键字搜索接口
export function GetSearchData(params) {return instance.get('/goods/list', {params})
}//4.登陆
export function GoLogin(params) {return instance({url: '/auth/loginByWeb',method: 'post',data: params})
}//5.根据id查询对应数据接口
export function getDetailData(params) {return instance.get('/goods/detail', {params})
}

4.5. 跨域代理配置

devServer: {port: 8080,proxy: {'/api': {target: "http://kumanxuan1.f3322.net:8001/",pathRewrite: {'^/api': ''}}}}

由于配置文件修改了，这里一定要记得重新 npm run serve ！！

五、动态路由

5.1. 下载vue-router

npm install vue-router

5.2. 组件注册

在src下创建router文件夹，并添加index.js，再次文件中安装使用vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)

5.3. 主页路由

// 配置项目路由
const router = new VueRouter({routes: [{path: '/',redirect: '/home' // 重定向},{path: '/home', //首页name: 'Home',component: () => import('@/views/home/Home'),meta: {isShowTabbar: true}// children: [ // 二级路由 不能加'/' 加'/'表示一级路由//   {//     path: 'searchPopup',//     component: () => import('@/views/home/search/searchPopup.vue'),//     name: 'searchpopup',//     meta: {//       isshowtabbar: false//     },//   }// ],}]
})

5.4. 实例挂载

main.js： router 挂载到根实例对象上
在main.js 文件中引入router 文件下的index.js 路由配置文件，并在根实例中注册。

// 在 入口文件mian.js 引入路由文件
import router from '@/router/index.js';
new Vue({render: h => h(App),router  // router 挂载到根实例对象上
}).$mount('#app')

根据路由配置，在src目录下的views 文件中，分别创建tabbar 对应的组件文件。
components /AppTabBar.vue

<template><div class="app-tab-bar"><!-- 下方导航 --><van-tabbarv-model="active"active-color="#ee0a24"inactive-color="#000"@change="onChange"shape="round"route><van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item><van-tabbar-item icon="label-o" to="/topic">专题</van-tabbar-item><van-tabbar-item icon="apps-o" to="/category">分类</van-tabbar-item><van-tabbar-item icon="shopping-cart-o" to="/cart">购物车</van-tabbar-item><van-tabbar-item icon="user-o" to="/user">我的</van-tabbar-item></van-tabbar></div>
</template><script>
export default {name: "app-tab-bar",data () {return {active:0}},methods: {onChange(m) {this.active = m},},
};
</script><style></style>

5.5. 创建home页面

在src/views下创建home文件夹，并创建Home.vue页面
内容如下：

<template><div><H1>Home组件测试vant组件</H1><van-button type="primary">主要按钮</van-button><van-button type="info">信息按钮</van-button><van-button type="default">默认按钮</van-button><van-button type="warning">警告按钮</van-button><van-button type="danger">危险按钮</van-button></div>
</template><script>
export default {name: "Home"
}
</script><style lang='less' scoped>
h1{color: #25a4bb;margin-bottom: 15px;
}
</style>

5.6. 引入 AppTabBar

将AppTabBar.vue导入app.vue 跟组件，将App.vue内容覆盖即可

<template><div id="app"><!-- 路由匹配到的组件将显示在这里 --><router-view> </router-view><!-- 底部tabbar 组件 --><AppTabBar v-show="$route.meta.isShowTabbar"></AppTabBar></div>
</template><script>
import AppTabBar from "@/components/AppTabBar";export default {name: 'App',components: {AppTabBar,},}
</script>
<style lang='less' scoped></style>

启动项目

npm run serve

六、优化

6.1. 路由守卫

在router 目录下的index.js 文件中，设置路由前置守卫，代码案例如下，用来判断购物车页面只能在用户登录的情况下才能查看。

// 路由前置守卫
router.beforeEach((to, from, next) => {// 有token就表示已经登录// 想要进入购物车页面，必须有登录标识token// console.log('to:', to)// console.log('from:', from)let token = localStorage.getItem('token')if (to.path == '/cart') {// 此时必须要有tokenif (token) {next(); // next()去到to所对应的路由界面} else {Vue.prototype.$toast('请先登录');// 定时器setTimeout(() => {next("/user"); // 强制去到"/user"所对应的路由界面}, 1000);}} else {// 如果不是去往购物车的路由，则直接通过守卫，去到to所对应的路由界面next()}
})

6.2. 异常修复

编程式导航在跳转到与当前地址一致的URL时会报错，但这个报错不影响功能：
在src/router/index.js中新增以下内容

// 该段代码不需要记，理解即可
// 在vue-router在3.1.0版本之后，push和replace方法会返回一个promise对象，如果跳转到相同的路由，就报promise uncaught异常
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {return originalPush.call(this, location).catch((err) => err);
};

6.3. 路由懒加载

在src/main.js中新增

// 引入vant 提供过的懒加载
import { Lazyload } from 'vant';Vue.use(Lazyload);