# MIMALL

**Repository Path**: zswlp/MIMall

## Basic Information

- **Project Name**: MIMALL
- **Description**: 高仿小米使用VUE全家桶
- **Primary Language**: Unknown
- **License**: MulanPSL-1.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-06-17
- **Last Updated**: 2022-06-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MIMALL

#### 介绍

VUE 全家桶

#### 安装依赖

1.  npm install
2.  yarn install

#### 注意事项

vue-cli 项目克隆到本地，需要 cnpm install（即安装依赖包），再 cnpm run serve（即启动项目）

cnpm install [插件名] --save(-S) 【保存到 dependencies:{xxx}】 cnpm install [插件名] --save-dev(-D) 【保存到 devDependencies:{xxx}】 区别： devDependencies 下的插件，是项目上线之后不会用到的插件，即不打包到项目中； dependencies 下的插件，是项目发布上线之后还会依赖用到的插件，没有这些插件，项目不能运行，即打包到项目中 总之： 后面安装的插件都保存到 dependencies:{xxx}中就完事了

import axios from 'axios' 与 import axios from './axios'， 前一种写法则会在 node_modules 中找当做插件，后一种在 src 下的目录中找自己定义的文件

配置文件修改了，需要重启服务器才能生效（如：修改了 vue.config.js 的配置）
vue-cli4.0 项目中，组件的插槽< slot name='body' >< /slot >, 在 xxx.vue 页面使用，需要包一层 template, 如

#### 使用说明

1.  yarn serve
2.  npm run serve
3.  resource 文件夹含有后端接口

<Modal>
  <template v-slot:body>
    <p>添加成功！</p>
  </template>
</Modal>
```

- this.\$store.dispatch('saveUserName',res.username) 这句等同下面 3 条语句
  1.import { mapActions } from 'vuex' 【导入 vuex 的 actions，用于 actions 方法很多的情况，这里就尝试下新形式】 2. ...mapActions(['saveUserName']) 【参数是个数组用于字符串存放方法名，即结构 actions 中的 saveUserName()方法，这里就直接可以使用该方法】 3. this.saveUserName(res.username) 【正常使用该方法，传递参数】

- 获取动态路由后面的参数： （如获取参数 32， http://localhost:8080/#/product/32）

```
  const id = this.$route.params.myid
  【注：动态路由params参数是自己定义的名字，为myid】
  【注： this.$router.push('/login') 是路由跳转，注意区分】
```

- cookie 中的 userid 应该做成 token（进行加密后的凭证来传输）

- 路由带参数跳转，有如下两种方式：

```
【注：用params传参不显示在url地址上；而用query传参回显示在url地址上】
// 方法一：（效果等同法二，不过该方式参数'?键名=值名'不显示在url上）
  this.$router.push({
     name: 'index',
     params: {
       键名: 值名
     }
   })

   // 方法二：（参数‘值名’显示在url上，且跳转到页面/index也不消失）
   this.$router.push({
     path: '/index',
     query: {
       键名: 值名
     }
   })
```

- [变量] ：加载变量

```
 components: {
   // [变量]表示加载变量， Pagination.name就是el-pagination
   [Pagination.name]: Pagination,
 }
```

- axios 使用请求的注意点：

```
// 【注】get请求的传参需要写在params中
axios.get('url',{
	params: {
		参数名：值
	}
}).then(function (response) {}).catch(function (error) {}）

// post请求的传参直接写在第二个参数对象中（无需再写在params里）
axios.get( 'url',{ 参数名：值 } ).then(function (response) {}).catch(function (error) {}）
```

- 打开新窗口的方式：
  JS 代码控制： window.open('url','\_blank')，
  html 标签控制： < a href='url' target="\_blank" >< /a >

- CSS 属性：

```
	 // 该属性挺好用，设置border-box后，不用管padding对原来设置的width影响，padding值都算在width内了
	 box-sizing: border-box;
```

- <img>标签的 src 可以存放.svg 的矢量图

```
<img src='/imgs/loading-bars.svg' alt='一个svg图片'/>
```

# 项目目录

- public： 一般放大图片，
- src/assets： 放小图片，可以转成 base64，不用请求图片资源

  - src/assets/scss/reset.scss ：重置浏览器的样式，防止默认浏览器样式干扰
  - src/assets/scss/mixin.scss ：一般放置 css 函数，即抽取出来复用高的 css 属性，如 span 设置图标、flex 布局都可以抽离出来，使用函数替代
  - src/assets/scss/base.scss ：抽取的一些公共样式，即多处相同类名设置相同的 css 属性，需要抽离出来，提高代码复用

- src/components： 一般放页面组件，命名方式用大头驼峰命名：如 NavHeader.vue
- src/views： 放页面（需要单独配置路由的页面），命名方式用小写：如 index.vue、 home.vue

- src/router/index.js： 路由的配置
- src/store/index.js： vuex 状态管理
- src/storage： 这里放置缓存 sessionStorage、cookie、localStorage 等存取以及删除等公共方法，便于操作缓存（虽然已经缓存提供了一些 API，但自己封装的能根据项目而定）

- env.js： 该配置文件是自己抽取出来的,根据 CORS 和 JSONP 跨域才做此设置，接口代理跨越则不需要这个
  - .env.prev: 是自定义 vue.config.js --mode=prev(名称为 prev 自定义的)，且 env.js 中也要对应 prev

# 项目简介

- public 文件夹： 是项目的根目录，即 '/imgs/logo.png'来引用 public 下的资源

- main.js：
  _ 全局配置，这里配置 router、store、Vue, 一些各个.vue 页面通用的插件放入 Vue.use(VueCookie)中
  _ 使用图片懒加载插件，加载内容时，显示 loading 指向的.svg 矢量图(可根据自己需要改变)
  `import VueLazyLoad from 'vue-lazyload' Vue.use(VueLazyLoad, { loading: '/imgs/loading-svg/loading-bars.svg' })`

- APP.vue：（别忘记了，单页面 App.vue 要设置个< router-view >标签）

```
 <div id="app">
    <router-view></router-view>
 </div>
 // 用<router-view>显示路由配置的.vue页面
```

- views 中： - detail.vue、 index.vue、 product.vue 将放入 home.vue 的< router-view >中（为什么这么写，因为 detail、index、product 三个页面都包含相同的头部导航和底部导航，所以另起一个 home.vue 来存放相同部分，不同部分单独替换< router-view >，这样复用性更高）
  【注意】这里其实可以就写成 detail.vue、 index.vue、 product.vue 三个页面，配置对应单独的路由，不过相比上面的写法，需要每个页面中单独各引一次头部导航和底部导航，代码复用性差点，效果却一样。

      	- orderConfirm.vue、 orderList.vue、 orderPay.vue、 alipay.vue 将放入order.vue的< router-view >中，复用了相同的头部导航和底部栏。

- router/index.js：

```
  // 动态路由(即url中可加参数并获取)：
  // http://192.168.0.107:8080/product/id(一个参数)
  path: '/product/:id',
  name: 'product',
  component: Product
```

## 主要使用的插件/库

- axios / vue-axios
- element-ui
- vue-lazyload
- vue-awesome-swiper
- vue-cookie
- qrcode