进程概括
1.通过vue/cli(脚手架)搭建项目环境
创建项目时不要有中文路径
项目的结构概览
2.安装所需插件 rem,less,vant,svg
- amfe-flexible是在写手机端网页用到的配合rem实现在不同宽度的设备中,网页元素尺寸等比缩放效果。
- less是用于快速写出Css子代选择器的插件 使用方法跟JS类似可以直接嵌套使用选择
- vant是一个高效轻便的Vue组件库 导航栏或者侧边栏按钮都可以直接引入使用 内部还有内置函数 方便使用回调参数
- svg矢量图可以更好的适配多种比例的移动端 防止画面失真
3.路由配置
本项目主要采用Hash路由
1、hash路由再地址栏URL上有“#”,而history路由没有;
2、进行回车刷新操作时,hash路由会加载到地址栏对应的页面,而history路由一般会出现404错误;
3、hash支持一些低版本的浏览器,而history不支持。
4.首页部分搭建
- 模块化思想 主要问题在于首页商家信息的读取
- 底部导航栏主要是处理好跳转问题 绑定配置好的路由地址
每日自问
less是什么
Less 是一门CSS预处理语言,它扩充了CSS语言,增加了诸如变量、混合(mixin)、函数等功能,让CSS更易维护、方便制作主题、扩充。Less可以运行在Node.js或浏览器端。
什么是vant
Vant是一个移动端组件库,开发时可使用其提供的轻量化组件。Vant支持全局引入和按需引入,全局注册后可以在 app 下的任意子组件中使用注册的 Vant 组件。 通过 app.use 注册,注册完成后,在模板中通过 标签来使用组件。
什么是路由以及他的作用 如何配置
路由是用于管理程序在不同页面之间导航和传递状态的机制,它允许用户在不刷新页面的情况下通过点击链接或提交表单等方式实现从一个页面跳转到另一个页面的功能。路由的主要功能有:模块化(每个模块负责一个功能,通过路由将模块组合起来形成一个完整的应用)、组件化(将功能抽象为可复用的组件)、导航(管理和控制应用的导航)、状态管理(可以实现组件之间状态的传递和共享)。