【移动端】商场项目搭建

目录

1：首先通过vue-cli脚手架搭建项目，自定义配置

2：调整前端项目目录

3：引入移动端组件库vant

3.1：组件库概念

 3.2：组件库的按需导入和全部导入的区别

3.2.1：全部导入步骤

3.2.2：按需导入步骤

4：移动端VM适配问题

---

1：首先通过vue-cli脚手架搭建项目，自定义配置

状态管理工具：vuex，路由：hash模式，校验：ESlint

2：调整前端项目目录

创建的项目目录调整成为符合企业规范的目录

1：删除多余的文件（默认的创建好项目自带的页面）

2：修改路由配置和App.vue

3：新增两个目录api/utils

3：引入移动端组件库vant

3.1：组件库概念

第三方封装好的很多组件，整合在一起称之为组件库。
https://vant-contrib.gitee.io/vant/v2/#/zh-CN/
Vue的组件库并不是唯一的，vant-ui也仅仅只是组件库的一种。
一般会按照不同平台进行分类：
PC端：element-ui(vue2)，element-plus（vue3），ant-design-vue（vue2+vue3）
移动端：vant-ui，Mint UI（饿了么出品）， Cube UI（滴滴出品）

 3.2：组件库的按需导入和全部导入的区别

全部导入就是将组件库中的所有组件全部到导入到项目中使用起来很方便。

按需导入就是用到哪个组件导入哪个组件这项目负载最低，性能相对提高。

3.2.1：全部导入步骤

1：安装vant-ui

yarn add vant@latest-v2

2：main.js中注册

 3：进入官网复制组件直接使用

 

3.2.2：按需导入步骤

首先安装vant

yarn add vant@latest-v2

安装插件，配置插件

# 安装插件

npm i babel-plugin-import -D

plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]

 

 引入需要使用的组件（每次在main.js文件中引入需要的组件难以维护）

 将引入的组件提取到工具类文件中便于维护

4：移动端VM适配问题

问题：在移动端中会有的屏幕大有的屏幕小为了解决不同屏幕的页面适配问题

vant组件库提供了一个适配插件来解决适配问题，使用vm为单位