外卖项目初始化01

sell-app-day01

• 项目的搭建
  • 创建项目
  • 仓库（把代码上传上去，切换个人分支）
  • 工程化scss
    • reset.scss
    • main.scss [统一的出口]
    • common.scss [公共的样式]
    • vant.scss [覆盖vant的样式]
    • var.scss 【变量的文件， 新】
      • 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(滚动容器, {
      一些配置
  })