8、Vue 核心技术与实战 智慧商城项目 DAY8~10

1、 项目演示

2、 项目收获

3、 创建项目

4、调整初始化目录

• 1、删掉（1）assets中的文件（2）components中的文件（3）views中的文件
• 2、(1)修改路由配置，默认的路由是个空数组即可，把路由规则都删掉

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
   
  routes: []
})

export default router

(2)修改App.vue，直留路由出口即可

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style lang="less">

</style>

• 3.新增两个目录 api和utils

5、vant 组件库

目标：认识第三方 Vue组件库 vant-ui
组件库：第三方 封装 好了很多很多的 组件，整合到一起就是一个组件库。
https://vant-contrib.gitee.io/vant/v2/#/zh-CN/

6、其他 Vue 组件库

目标：了解其他 Vue 组件库
Vue的组件库并不是唯一的，vant-ui 也仅仅只是组件库的一种。
一般会按照不同平台进行分类：
① PC端： 支持vue2:element-ui 支持vue3:(element-plus) 支持vue2\3:ant-design-vue
② 移动端：vant-ui、 Mint UI (饿了么)、 Cube UI (滴滴)

7、vant 全部导入 和 按需导入

目标：明确 全部导入 和 按需导入 的区别

7.1 全部导入：

7.2 按需导入：

单独提取到utils - vant-ui.js导入

// 按需导入
import Vue from 'vue'
import {
    Button, Switch } from 'vant'
Vue.use(Button)
Vue.use(Switch)

main.js

import '@/utils/vant-ui'

8、项目中的 vw 适配

目标：基于 postcss 插件 实现项目 vw 适配
官方配置
① 安装插件

yarn add postcss-px-to-viewport@1.1.1 -D

② 根目录新建 postcss.config.js 文件，填入配置

module.exports = {
   
  plugins: {
   
    'postcss-px-to-viewport': {
   
    // vw适配的标准屏的宽度 iponeX
    //   设计图 750，调成1倍图 => 适配375标准屏幕
    //   设计图 640，调成1倍图 => 适配320标准屏幕
      viewportWidth: 375
    }
  }
}

9、路由设计配置 - 一级路由

目标：分析项目页面，设计路由，配置一级路由
但凡是单个页面，独立展示的，都是一级路由

`router - index.js```

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/login'  //文件夹下是index到文件夹这个名字就可以了
import Layout from '@/views/layout'
import Search from '@/views/search'
import SearchList from '@/views/search/list'
import ProDetail from '@/views/prodetail'
import Pay from '@/views/pay'
import MyOrder from '@/views/myorder'

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

10、路由设计配置 - 二级路由

10.1 目标：阅读vant组件库文档，实现底部导航 tabbar

tabbar标签页：
① vant-ui.js 按需引入

import {
    Tabbar, TabbarItem } from 'vant'
Vue.use(Tabbar)
Vue.use(TabbarItem)

② layout.vue 粘贴官方代码测试

<van-tabbar>
<van-tabbar-item icon="home-o">标签</van-tabbar-item>
<van-tabbar-item icon="search">标签</van-tabbar-item>
<van-tabbar-item icon="friends-o">标签</van-tabbar-item>
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>

③ 修改文字、图标、颜色

<van-tabbar active-color="#ee0a24" inactive-color="#000">
<van-tabbar-item icon="wap-home-o">首页</...>
<van-tabbar-item icon="apps-o">分类页</...>
<van-tabbar-item icon="shopping-cart-o">购物车</...>
<van-tabbar-item icon="user-o">我的</...>
</van-tabbar>

10.2 目标：基于底部导航，完成二级路由配置

router - index,js配规则组件

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/login'
import Layout from '@/views/layout'
import Search from '@/views/search'
import SearchList from '@/views/search/list'
import ProDetail from '@/views/prodetail'
import Pay from '@/views/pay'
import MyOrder from '@/views/myorder'
import Home from '@/views/layout/home'
import Category from '@/views/layout/category'
import Cart from '@/views/layout/cart'
import User from '@/views/layout/user'

Vue.use(VueRouter)

const router = new VueRouter({
   
  routes: [
    {
    path: '/login', component: Login },
    {
   
      path: '/',
      component: Layout,
      children: [
        {
    path: '/home', component: Home },
        {
    path: '/category', component: Category },
        {
    path: '/cart', component: Cart },
        {
    path: '/user', component: User }
      ]
    },
    {
    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

11、登录页静态布局

目标：基于笔记，快速实现登录页静态布局

1. 准备工作
   (1) 新建 styles/common.less 重置默认样式
   (2) main.js 导入 common.less
   (3) 图片素材拷贝到 assets 目录【备用】
2. 登录页静态布局编写
   (1) 头部组件说明 (NavBar)
   (2) 通用样式覆盖
   (3) 其他静态结构编写
   

(1) 准备工作

1. 新建 styles/common.less 重置默认样式

// 重置默认样式
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

// 文字溢出省略号
.text-ellipsis-2 {
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

2. main.js 中导入应用

import '@/styles/common.less'

3. 将准备好的一些图片素材拷贝到 assets 目录【备用】

(2) 登录静态布局

使用组件

• van-nav-bar

vant-ui.js 注册

import { NavBar } from 'vant'
Vue.use(NavBar)

Login.vue 使用

<template>
  <div class="login">
    <van-nav-bar title="会员登录" left-arrow @click-left="$router.go(-1)" />
    <div class="container">
      <div class="title">
        <h3>手机号登录</h3>
        <p>未注册的手机号登录后将自动注册</p>
      </div>

      <div class="form">
        <div class="form-item">
          <input class="inp" maxlength="11" placeholder="请输入手机号码" type="text">
        </div>
        <div class="form-item">
          <input class="inp" maxlength="5" placeholder="请输入图形验证码" type="text">
          <img src="@/assets/code.png" alt="">
        </div>
        <div class="form-item">
          <input class="inp" placeholder="请输入短信验证码" type="text">
          <button>获取验证码</button>
        </div>
      </div>

      <div class="login-btn">登录</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoginPage'
}
</script>

<style lang="less" scoped>
.container {
  padding: 49px 29px;

  .title {
    margin-bottom: 20px;
    h3 {
      font-size: 26px;
      font-weight: normal;
    }
    p {
      line-height: 40px;
      font-size: 14px;
      color: #b8b8b8;
    }
  }

  .form-item {
    border-bottom: 1px solid #f3f1f2;
    padding: 8px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    .inp {
      display: block;
      border: none;
      outline: none;
      height: 32px;
      font-size: 14px;
      flex: 1;
    }
    img {
      width: 94px;
      height: 31px;
    }
    but