目录
解释各个模块
- api接口模块:发送ajax请求的接口模块
- utils工具模块:自己封装的一些工具方法模块
- components组件模块:全局通用的组件
- router路由模块:封装要所有路由
- views:各个页面
- assets:各种资源
vant组件库
组件库:适用vue2版本的vant2
一般会按照不同平台进行分类:
- PC端:element-ui、ant-design-vue
- 移动端:vant-ui、Mint UI、Cube UI
vant导入操作
全部导入
1.安装vant-ui
bash
npm i vant@latest-v2 -S
2.main.js注册
bash
import Vant from 'vant'
import 'vant/lib/index.css'
//把vant组件都导入了
Vue.use(vant)
3.组件使用
按需导入
1.安装插件
npm i babel-plugin-import -D
2.babel.config.js配置
typescript
`module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};`
3.main.js按需导入注册
官网查询用法
封装vant组件导入
在utils中新建一个vant-ui.js文件,将刚才main.js写入的导入代码写进去,并在main.js中导入该文件
postcss插件
实现项目中vw适配
1.安装插件
typescript
npm install postcss-px-to-viewport --save-dev
2.根目录新建postcss.config.js文件,填入配置
typescript
// postcss.config.js
module.exports = {
plugins: {
'postcss-px-to-viewport': {
viewportWidth: 375,
},
},
};
路由设计配置
路由页面建立
但凡单个页面独立展示,就是一级路由。
新建文件内容填入:
css
<template>
</template>
<script >
export default {
name: 'LayoutIndex'
}
</script>
<style lang="less" scoped>
</style>
路由引入
在router的文件引入路由
javascript
import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/views/layout'
import Login from '@/views/login'
import MyOrder from '@/views/myorder'
import Pay from '@/views/pay'
import Prodetail from '@/views/prodetail'
import Search from '@/views/search'
import SearchList from '@/views/search/list.vue'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{ path: '/login', component: Login },
{ path: '/', component: Layout },
{ path: '/search', component: Search },
{ path: '/searchlist', component: SearchList },
//动态路由传参,确认是哪一些商品,路由传参中携带id
{ path: '/prodetail/:id', component: Prodetail },
{ path: '/pay', component: Pay },
{ path: '/myorder', component: MyOrder },
]
})
export default router
二级路由
1.vant-ui.js按需引入
javascript
import Vue from 'vue';
import { Tabbar, TabbarItem } from 'vant';
Vue.use(Tabbar);
Vue.use(TabbarItem);
2.layout.vue粘贴官方代码测试
3.修改文字、图标、颜色
二级路由配置
router中配置
javascript
{ path: '/',
component: Layout,
children: [
{ path: '/home', component: Home},
{ path: '/category', component: Category},
{ path: '/cart', component: Cart},
{ path: '/user', component: User}
]
}
tabbar里添加路由属性
javascript
<!-- 二级路由出口,二级组件展示的位置 -->
<router-view></router-view>
<van-tabbar route active-color="#ee0a24" inactive-color="#000">
<van-tabbar-item to="/home" icon="wap-home-o">我的</van-tabbar-item>
<van-tabbar-item to="/category" icon="apps-o">分类页</van-tabbar-item>
<van-tabbar-item to="/cart" icon="shopping-cart-o">购物车</van-tabbar-item>
<van-tabbar-item to="/user" icon="user-o">我的</van-tabbar-item>
</van-tabbar>
登录页静态布局
async的作用详解
async
是 JavaScript 中的一个关键字,用于声明异步函数。异步函数通常用于处理异步操作,如网络请求、文件读写等,这些操作不会立即完成,而是会在将来某个时刻完成。
什么是 async
函数?
async
函数允许你在函数内部使用 await
关键字,等待一个 Promise 结果。当一个函数被声明为 async
时,它会返回一个 Promise 对象,即使你没有显式地返回它。
async
函数的特点
- 自动返回 Promise :
async
函数会自动返回一个 Promise 对象。 - 使用
await
关键字 :在async
函数内部,可以使用await
关键字来等待一个异步操作的结果。 - 更简洁的错误处理 :可以使用
try...catch
语句来捕获异步操作中的错误。
示例
下面是一个简单的示例,展示如何使用 async
和 await
来处理异步操作:
javascript
// 异步函数模拟获取数据
function getData() {
return new Promise((resolve) => {
setTimeout(() => resolve('Data loaded'), 2000);
});
}
// 使用 async 和 await 处理异步操作
async function fetchData() {
try {
const result = await getData();
console.log(result); // 输出 "Data loaded"
} catch (error) {
console.error('Error fetching data:', error);
}
}
// 调用异步函数
fetchData();
async
和 await
的优势
- 提高可读性 :使用
async
和await
可以让你的代码更加接近同步代码的风格,使代码更容易理解和维护。 - 简化错误处理 :使用
try...catch
可以更方便地处理异步操作中的错误。 - 链式调用:可以方便地链式调用多个异步操作,使得异步流程更加自然和直观。
使用场景
async
和 await
常用于以下场景:
- 网络请求:发送 HTTP 请求并处理响应。
- 文件操作:读取或写入文件。
- 数据库操作:执行数据库查询或事务。
- 定时任务:处理定时触发的操作。
注意事项
- 只能在
async
函数内部使用await
:await
只能在async
函数内部使用。 - 错误处理 :需要适当处理异步操作中的错误,通常使用
try...catch
。 - 性能考虑 :虽然
async
和await
可以简化异步代码编写,但在大量并发请求时仍需注意性能优化。
示例:Vue 中的使用
在 Vue 中,你可以使用 async
函数来处理组件生命周期钩子中的异步操作,例如:
javascript
export default {
async created() {
try {
const data = await getData();
this.data = data;
} catch (error) {
console.error('Error fetching data:', error);
}
}
};
通过这种方式,你可以更清晰地管理组件中的异步逻辑。
总之,async
和 await
提供了一种更加优雅的方式来编写和处理异步代码,使得代码更加简洁易懂。
request模板------axios封装
使用axios来请求后端接口,一般都会对axios进行一些配置(例如:配置基础地址,请求响应拦截器等)
所以项目开发中,都会对axios进行基本的二次封装,单独封装到一个request模块中,便于维护。
步骤
1.安装axios
bash
npm install axios --save
2.新建request模块 utils/request.js
3.创建实例,配置导出实例
javascript
import axios from "axios";
const instance = axios.create({
baseURL: 'http://cba.itlike.com/public/index.php?s=/api/',
timeout: 5000
});
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response.data;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});
export default instance
4.图形验证码功能实现
javascript
export default {
name: 'LoginPage',
data () {
return {
picKey: '', // 将来请求传递的图形验证码唯一标识
picUrl: '', // 存储请求渲染的图片地址
totalSecond: 60, // 总秒数
second: 60, // 当前秒数,开定时器对 second--
timer: null, // 定时器 id
mobile: '', // 手机号
picCode: '', // 用户输入的图形验证码
msgCode: '' // 短信验证码
}
},
async created () {
this.getPicCode()
},
methods: {
//获取图形验证码
async getPicCode () {
const { data: { base64, key } } = await request.get('/captcha/image')
this.picUrl = base64 //存储地址
this.picKey = key //存储唯一标识
}
}
}