Vue2项目之移动端购物商城(一) 项目介绍,路由配置,vant组件库的下载和使用

一.项目介绍和配置

1.项目介绍和预览

这个vue2项目具有完整的商品购物流程,购物类项目是必须掌握的项目,建议多敲几次

• 项目预览:http://smart-shop.itheima.net/#/
• 项目代码:https://gitee.com/yjh8866/wisdom-shop
• 项目后台接口和静态资源:https://apifox.com/apidoc/shared/dead
• 项目基础地址(baseURL):https://smart-shop.itheima.net/index.php?s=/api
• 视频讲解:https://www.bilibili.com/video/BV1HV4y1a7n4

2.技术栈或知识点

• 完整的电商购物业务流程
• vant组件库的使用
• 适配移动端的VM
• request请求方法的封装
• storage存储模块的封装
• api请求模块的封装
• 请求拦截器和响应拦截器的设置
• 嵌套路由的配置
• 路由导航守卫
• 路由跳转传参
• Vuex分模块管理数据
• 项目打包和项目优化

3.创建项目和项目配置

本项目是基于VueCli自定义创建脚手架

vue create my-shopping

步骤:安装脚手架==>创建项目==>选择自定义

Bable:选择语法降级
Router:vue-router
Vuex:状态管理
CSS:预处理器
Linter:代码规范

vue版本:Vue2.x
VueRouter hash模式
CSS预处理器:less
ESLint:Standard&Lint on Save
配置文件:dedicated config files,而不是堆在package.json里

调整src目录下的子目录变成:api,assets,components,router,utils,view,
其中,api是存放发送ajax请求接口的方法的模块,
utils是工具模块,封装一些工具类方法

二.vant-ui 组件库介绍

1.什么是组件库?

第三方封装好了很多组件,整合到一起就是一个组件库
常见场景:日期选择框,数字输入框,五星评价,用户密码输入框

2.vant的下载版本

vue2项目对应vant2,下载命令:npm i vant@latest-v2 -S
vue3项目对应vant3和vant4

3.其他常见组件库

PC:element-ui(饿了么),ant-design-vue(阿里)
移动端:vant-ui(重点:更新频率高,迭代勤) mintUI(饿了么) cubeUI(滴滴)
*注:跟vant-ui一样,element-ui对应vue2,而element-plus对应vue3

4.vant中的组件的全部导入和局部导入

全部导入(方便但体积大)

步骤:

• 安装组件库npm i vant@latest-v2 -S
• 在main.js中注册:import Vant from "vant";Vue.use(Vant)
• 在页面中使用:<van-button type="primary">主要按钮</van-button>

局部导入(性能高,推荐)

步骤:

• 安装组件库:命令同上
• 安装插件:npm i babel-plugin-import -D
• babel.config.js中进行配置:

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style: true
      },
      'vant' // 插件命名空间标识（Babel7必须添加）
    ]
  ]
}

踩坑:一定要把vue项目从根目录拉到vscode中,添加到工作区,否则babel设置不成功

• main.js中按需导入注册:import{Button} from "Vant";Vue.use(Button)
• 在页面中使用:代码同上

5.下载vant的postcss插件

目的是实现项目中VM的自动适配

安装和配置

安装命令:npm install postcss-px-to-viewport@1.1.1 -D
在根目录下新建postcss.config.js文件并配置

module.export={
    plugins:{
        'postcss-px-to-viewport':{
            viewportWidth:375//标准屏宽度
        }
    }
}

应用示例

//html
    <!-- 使用postcss: -->
    <div class="box"></div>
//css
.box{
  width: 150px;
  height: 150px;
  background:pink;
}

把浏览器尺寸从iphoneSE切换到其他宽度:

box会自动根据原始宽高px占据375px的比例自动缩放:150px/375px=40vm/100vm

三.路由配置

1.创建路由文件

项目分为6个一级路由和4个二级路由

创建views下的一级路由文件

• 首页(架子):Layout/index.vue
• 登录页:Login/index.vue
• 商品详情页:ProductDetail/index.vue
• 结算页:Pay/index.vue
• 搜索页:Search/index.vue,搜索列表页:Search/list.vue
• 我的订单:MyOrder/index.vue

创建嵌套在Layout的二级路由文件

• 首页:/Layout/home.vue
• 分类页:/Layout/category.vue
• 购物车:/Layout/cart.vue
• 我的:/Layout/user.vue

2.配置路由

//router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '../views/Layout/index.vue'
import cartPage from '@/views/Layout/cart.vue'
import categoryPage from '@/views/Layout/category.vue'
import homePage from '@/views/Layout/home.vue'
import userPage from '@/views/Layout/user.vue'
import Search from '@/views/Search/index.vue'
import List from '@/views/Search/list.vue'
import Login from '@/views/Login/index.vue'
import ProductDetail from '@/views/ProductDetail/index.vue'
import Pay from '@/views/Pay/index.vue'
import MyOrder from '@/views/MyOrder/index.vue'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    redirect: '/home',
    component: Layout,
    children: [
      { path: 'cart', component: cartPage },
      { path: 'category', component: categoryPage },
      { path: 'home', component: homePage },
      { path: 'user', component: userPage }
    ]
  },
  { path: '/layout', redirect: '/home' },
  { path: '/search', component: Search },
  { path: '/list', component: List },
  { path: '/login', component: Login },
  { path: '/productdetail', component: ProductDetail },
  { path: '/pay', component: Pay },
  { path: '/myorder', component: MyOrder }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

四.使用vant库的tabbar组件对二级路由进行页面配置

Layout/index.vue

//html
  <div class="wrapper">
    <router-view></router-view>
    <!-- vant组件:tabbar -->
    <van-tabbar route v-model="active" active-color="#ee0a24" inactive-color="#000">
         <van-tabbar-item icon="home-o" to='/home'>首页</van-tabbar-item>
         <van-tabbar-item icon="apps-o" to='/category'>分类页</van-tabbar-item>
         <van-tabbar-item icon="shopping-cart-o" to='/cart'>购物车</van-tabbar-item>
         <van-tabbar-item icon="user-o" to='/user'>我的</van-tabbar-item>
    </van-tabbar>
  </div>
  //js
    data () {
    return {
      active: ''
    }
  }

*注:vant各个组件的用法可在其官网上搜到,特别是各个属性的作用和相应的属性值,都有介绍,后面不再赘述

把按需引入的代码从main.JS中抽离出来

随着项目的进行,在main.js中对vant中的组件按需引入会导致其越来越臃肿,因此
提前将按需引入的代码从中单独分装在单独文件中很有必要

• 新建utils/vant-ui.js

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

• 在main.js中引入

import '@/utils/vant-ui'

五.重置默认样式

新建styles/common.less

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
//文字溢出省略号
.text-allipsis-2{
  overflow:hidden;
  -webkit-line-clamp:2;
  text-overflow:allipsis;
  diaplay:-webkit-box;
  -webkit-box-orient:vertical;
}

在main.js中导入

import '@/styles/common.less'