移动端商城项目分析（一）-CSDN博客

本文链接：https://blog.csdn.net/m0_74416054/article/details/146315044

项目模块

编辑项目初始化

调整目录结构

组件库的应用

vw适配

项目模块

了解个项目功能，明确各个模块之间的逻辑关系

项目初始化

安装脚手架，此处需要注意的是需要提前安装node.js

npm i @vue/cli -g

安装脚手架之后创建项目，由于需要的功能比较全面，所以在创建项目是需要手动创建选择所需文件

vue create 项目名

自定义选择

版本选择vue2

是否选择用history，选择n,如果选择y需要后台设置，目前状态，不需要，选择hash模式

选择css预处理模式

后续选择按照下面图片出现的ESLint，eslint 代码规范的检验工具，检验代码是否符合规范

同时下方选择In dedicated config files ,将配置文件生成到单独的文件中，package.json文件存放的依赖的配置文件比较多，单独存放便于分辨

启动项目

npm run serve

调整目录结构

为了更好的实现后面的操作，我们把整体的目录结构做一些调整。

目标:

删除初始化的一些默认文件
修改没删除的文件
新增我们需要的目录结构

修改文件

main.js 不需要修改

router/index.js文件：删除默认的路由配置

新增目录

src/api 目录：存储接口模块 (发送ajax请求接口的模块)

src/utils 目录：存储一些工具模块 (自己封装的方法)

组件库的应用

vant-ui中的组件就是按照375的视口宽度设计的

组件库有很多中，提供vant组件Vant 2 - Mobile UI Components built on Vue

组件库应用时，分为两种方式

方式一：全部导入

全部导入后，对于一些用不到的组件，属于浪费，会影响用户访问网站的性能

无论是方式一还是方式二都需要安装vant-ui

yarn add vant@latest-v2

使用npm 方式安装，会出现版本冲突问题，可以进行更改版本，或者按照下面命令安装忽略版本冲突

npm install vant@latest-v2 --legacy-peer-deps -S

npm install echarts --save

npm install vuex@3 --save --legacy-peer-deps

npm install axios --legacy-peer-deps

npm install postcss-px-to-viewport@1.1.1 -D --force

在main.js中，将所有组件导入

import Vant from 'vant';
import 'vant/lib/index.css';
// 把vant中所有的组件都导入了
Vue.use(Vant)

后续可以在所用模块进行引入使用

<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>

方式二：按需导入

选择所需组件进行导入，节约了空间资源，提高用户使用体验

按需导入需要在安装vant-ui，之后安装一个插件

yarn add babel-plugin-import -D

使用npm 方式安装，会出现版本冲突问题，可以进行更改版本，或者按照下面命令安装忽略版本冲突

npm i babel-plugin-import -D --legacy-peer-deps

在babel.config.js文件中配置

module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
}

按需加载，在main.js，要注意在引入部分可以在{ }中添加多个组件，但是不能出现Vue.use(Button，Icon)

import { Button, Icon } from 'vant'

Vue.use(Button)
Vue.use(Icon)

后续会出现很多组件引用的情况，可以把引入组件的步骤抽离到单独的js文件中比如 utils/vant-ui.js

import { Button, Icon } from 'vant'

Vue.use(Button)
Vue.use(Icon)

main.js中进行导入

// 导入按需导入的配置文件
import '@/utils/vant-ui'

vw适配

安装

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

使用npm 方式安装，会出现版本冲突问题，可以进行更改版本，或者按照下面命令安装忽略版本冲突

npm install postcss-px-to-viewport@1.1.1 -D --force

项目根目录，新建postcss的配置文件postcss.config.js

// postcss.config.js module.exports = { plugins: { 'postcss-px-to-viewport': { viewportWidth: 375, }, }, };

路由配置

路由会有一级路由、二级路由

但凡是单个页面，独立展示的，都是一级路由

路由设计：

登录页
首页架子
- 首页 - 二级
- 分类页 - 二级
- 购物车 - 二级
- 我的 - 二级
搜索页
搜索列表页
商品详情页
结算支付页
我的订单页

可以根据各个模块，新建对应页面的文件，在router/index.js进行路由配置，示例如下

import Vue from 'vue'
import VueRouter from 'vue-router'
import MyOrder from '@/views/myorder'

Vue.use(VueRouter)

const router = new VueRouter({
routes: [
{
path: '/myorder',
component: MyOrder
}
]
})

export default router

进行二级路由配置，在此处配置二级路由，需要children，哪一个一级路由里面拥有二级路由，就在该路由中添加children

import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/views/layout'

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: '/',
component: Layout,
redirect: '/home',
children: [
{
path: 'home',
component: Home
},
{
path: 'category',
component: Category
},
{
path: 'cart',
component: Cart
},
{
path: 'user',
component: User
}
]
},
]
})

export default router

在进行自主选择的时候，选择less，使用时需要安装

npm add less less-loader

在style中进行样式设计的同时，需要添加

<style lang="less" scoped>

main.js 中导入应用

import '@/styles/common.less'

request模块 - axios封装

我们会使用 axios 来请求后端接口, 一般都会对 axios 进行一些配置 (比如: 配置基础地址,请求响应拦截器等等)

一般项目开发中, 都会对 axios 进行基本的二次封装, 单独封装到一个模块中, 便于使用

目标：将 axios 请求方法，封装到 request 模块

安装 axios

 npm install axios --legacy-peer-deps

2、新建 utils/request.js 封装 axios 模块

利用 axios.create 创建一个自定义的 axios 来使用

/* 封装axios用于发送请求 */
import axios from 'axios'

// 创建一个新的axios实例
const request = axios.create({
baseURL: 'http://cba.itlike.com/public/index.php?s=/api/',
timeout: 5000
})

// 添加请求拦截器
request.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
})

// 添加响应拦截器
request.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response.data
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error)
})

export default request