sell-app-day01
- 项目的搭建
- 创建项目
- 仓库(把代码上传上去,切换个人分支)
- 工程化scss
- reset.scss
- main.scss [统一的出口]
- common.scss [公共的样式]
- vant.scss [覆盖vant的样式]
- var.scss 【变量的文件, 新】
- css3 的变量
- 一键切换皮肤 【了解一下】
- css3 的变量
- mixin.scss
- 屏幕适配 【新】
- px 转换成 vw
- axios的配置(token)
- 环境变量
- 路由划分
- vant引入
- 商家信息
- 接口: http://1.15.179.44:3001/ , http://129.211.169.131:5000
- 商品信息
- 接口
项目介绍
-
参考地址
-
用户的群体:给点外卖的用户。
-
功能点:
-
首页
- 商家信息
- 模糊效果
- 商品 【重点】
- 基本的页面的渲染
- 滚动效果的制作
- 左联右 【简单】
- 右联左【需要自己去计算】
- 商品页面与购物车组件联动
- vuex 【重点】
- 商家
- 评价
- 商家信息
-
详情页面
- 页面之间的通信【重点】
-
手机端适配
讲道理设计师只会给一份手机端项目设计稿(375px 750px)。
例子: 假设设计稿的宽度为750, 在设计稿上量出一个div的宽度为375px
真机的宽度 | 实际宽度 | 屏幕(视口)占比 | vw |
---|---|---|---|
375px | 187.5px | 50% | 50vw |
414px | 207px | 50% | 50vw |
912px | 456px | 50% | 50vw |
css3出了一个新的单位: vw。vw:视口(屏幕的宽度)的百分之1。
结论:将px单位转换为vw单位,就能够适配到各个手机端。等比的缩放
px转换为vw不需要开发者自己去算,有第三方插件: postcss-px-to-viewport
postcss-px-to-viewport配置
-
搜索文档: postcss-px-to-viewport npm
-
安装插件: yarn add postcss-px-to-viewport -D
-
在项目的根目录下创建文件: postcss.config.js
-
在postcss.config.js中编写配置
module.exports = { plugins: { // 插件: 将px转换为vw 'postcss-px-to-viewport': { // 设计稿宽度,你在设计稿上量出的宽度,不用自己划算,直接写。 viewportWidth: 750, } } }
-
重启
-
测试
- 给项目中的一个div加一个宽高,然后再浏览器切换机型,看他具体的大小
css3变量【了解!!】
scss/less变量
这个变量设置之后,并不是全局使用。你需要在使用的地方进行导入。
场景: 设置一系列全局变量。 在类名为.box下注入一个变量。
css3的变量
可以设置全局/局部的变量。
- 全局: 给最外层的节点注入一个变量
- 局部: 给某一个节点设置一个局部变量
特点:
- 可以很方便的被覆盖,很多ui组件库都在使用
主题色切换方案
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HQQI73Xd-1686557829956)(…/resource/md/1.主题色切换.png)]
-
创建一个var.scss,定义三套主题色
// scss的变量页没有全局变量 【哪里需要哪里引入】 $main_color: #ff6900; // css3的变量 // 全局的变量 // :root { --base-color: #ff6900; } // 根节点 下面的某一些节点(有一个属性叫做 theme 属性的值为red) :root [theme="red"] { --base-color: red; } :root [theme="gray"] { --base-color: #ccc; }
-
在main.scss中引入变量文件(var.scss)
@import './reset.scss'; @import './common.scss'; @import './vant.scss'; @import './var.scss';
-
在main.js下全局注册main.scss
- import ‘@/assets/style/main.scss’
-
在App.vue 去指明主题
<div id="app" :theme="theme" > <nav> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </nav> <button @click="theme = 'red'">过年</button> <button @click="theme = ''">默认</button> <button @click="theme = 'gray'">灰色</button> <router-view/> </div> data() { return { // 默认的 theme: '' } }
-
在所有的组件中通过var取base-color
<style scoped lang="scss"> .theme-wrapper { color: var(--base-color); } .container { width: 50px; height: 50px; background: var(--base-color); } </style>
vant的引入
vant是一系列: 微信小程序(vant weapp),vue2 (vant2.x), vue3(vant4.x)。官网
-
安装
- yarn add vant@latest-v2
-
在页面中按需引入
import Button from 'vant/lib/button'; import 'vant/lib/button/style';
在页面中引入组件,引入它对应的样式。注册使用
-
全局,把所有组件都变成全局组件(类似于elementui)
import Vant from 'vant'; import 'vant/lib/index.css'; // Vant是一个对象,这个对象一定有一个方法: install Vue.use(Vant);
在main.js中引入样式,引入所有组件, use一下
-
全局,把你需要的组件,注册成全局。样式我们全局引入
import 'vant/lib/index.css'; import { Button, Tabs } from 'vant'; // 只把Button注册成全局组件 Vue.use(Button).use(Tabs)
我们这次采用这个
better-scroll的使用
官方链接
-
满足三个条件
- 滚动容器高度固定
- 滚动容器下只有一个节点(div)
- 滚动的内容 > 滚动容器
-
安装 BS
-
yarn add @better-scroll/core
-
-
导入
import BS from '@better-scroll/core'
-
初始化BS
// 字符串: #box // dom节点 new BS(滚动容器, { 一些配置 })