# guoshu-mini

**Repository Path**: OnionTin/guoshu-mini

## Basic Information

- **Project Name**: guoshu-mini
- **Description**: 果树系统小程序
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-11-11
- **Last Updated**: 2024-11-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 购物商城-demo

> 邮箱：2366210545@qq.com

演示地址：http://xunjunxian.net3v.club

登录手机：11位就行（随意）

图形验证码：看图填

手机验证码：246810

## 0.简介

本项目是基于vue2框架下的购物商城项目。

技术栈：HTML、CSS、Javascript、vue2.

项目中的数据都为虚构

目前主要实现的功能有：

首页、搜索、商品列表、商品详情、登录、购物车、订单支付。

还未实现的功能：

商品评价、个人中心、支付（并未调用微信支付宝接口）

目前正在优化项目中。。。

数据接口文档：https://apifox.com/apidoc/shared-12ab6b18-adc2-444c-ad11-0e60f5693f66/doc-2221080

## 1. 项目功能

### 1.功能模块关系

![输入图片说明](src/assets/image-20230616163305356.png)

### 2.项目技术

![](src/assets/1682941289919.png)



## 2. 项目创建目录初始化

### vue-cli 建项目 

1.安装脚手架 (已安装)

```
cnpm i @vue/cli -g
```

2.创建项目

```
vue create shopping-demo
```

+ 选项

```js
Vue CLI v5.0.8
? Please pick a preset:
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
> Manually select features     选自定义
```

+ 手动选择功能

  Babel（包含语法降级功能：ES6 -> ES3）

  Router（路由）

  Vuex（状态管理）

  CSS Pre-processors（CSS样式：less/scss）

  Linter / Formatter（校验代码格式）

  

+ 选择vue的版本

```jsx
  3.x
> 2.x
```

+ 是否使用history模式

  N（这里使用的是hash模式）

+ 选择css预处理

  Less

+ 选择eslint的风格

  ESLint + Standard config

+ 选择校验的时机

  Lint on save（正常开启，保存校验）

+ 选择配置文件的生成方式

  In dedicated config files（把配置文件生成到单独的文件中）

- 是否保存预设，下次直接使用？

    =>   输入 N（不使用，看个人）

+ 等待安装，项目初始化完成，启动项目

```
cnpm run serve
```



## 3. 调整初始化项目结构

- 目录

  ![](src/assets/Quicker_20230922_102631.png)

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

  ![](src/assets/Quicker_20230922_103548.png)

- src/assets 目录：存储一些项目中的图片

- src/components：存放一些共用的功能组件

  ![](src/assets/Quicker_20230922_103730.png)

- src/mixins：存放一些需要混入的功能（是否登录确认框）

  ![](src/assets/Quicker_20230922_103908.png)

- src/router：配置路由

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

  路由设计：

  登录页

  首页架子

  ​	首页 - 二级

  ​	分类页 - 二级

  ​	购物车 - 二级

  ​	我的 - 二级

  搜索页

  搜索列表页

  商品详情页

  结算支付页

  我的订单页

- src/store：状态管理

  ![](src/assets/Quicker_20230922_104538.png)

- src/styles：项目中的默认样式

- src/utils：项目中封装的一些工具（封装axios用于发送请求，封装本地存储功能）和vant2的一些组件

  ![](src/assets/Quicker_20230922_105316.png)

- src/views：存放各个路由页面

  ![](src/assets/Quicker_20230922_105556.png)

  

## 4. vant组件库

这里主要采用的组件库是：[vant2](https://vant-contrib.gitee.io/vant/v2/#/zh-CN/)（这里是按需导入，如果采用全部导入会引起项目打包后的体积变大，进而影响用户访问网站的性能）

组件库并不是唯一的，常用的组件库还有以下几种：

pc:  [element-ui](https://element.eleme.cn/#/zh-CN)    [element-plus](https://element-plus.gitee.io/zh-CN/)  [iview](https://iview.github.io/)      **[ant-design](https://antdv.com/components/overview-cn)**

移动：[vant-ui](https://vant-contrib.gitee.io/vant/v2/#/zh-CN/)     [Mint UI](http://mint-ui.github.io/docs/#/zh-cn2) (饿了么)    [Cube UI](https://didi.github.io/cube-ui/#/zh-CN/) (滴滴)

### 1. 按需导入

+ 安装vant-ui

```
cnmp i vant@latest-v2
```

+ 安装一个插件

```jsd
cnpm i babel-plugin-import -D
```

+ 在`babel.config.js`中配置

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

+ 把引入组件的步骤抽离到单独的js文件中比如 `utils/vant-ui.js`

```js
import { Button, Icon } from 'vant'

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

main.js中进行导入

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



### 2. 项目中的vw适配

官方说明：https://vant-contrib.gitee.io/vant/v2/#/zh-CN/advanced-usage

```js
cnpm i postcss-px-to-viewport@1.1.1 -D
```

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

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

具体参考：https://zhuanlan.zhihu.com/p/3666647