# vue-panda

**Repository Path**: slowCoder/vue-panda

## Basic Information

- **Project Name**: vue-panda
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-06-01
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-panda

## Project setup
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn serve
```

### Compiles and minifies for production
```
yarn build
```

### Lints and fixes files
```
yarn lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

### vue 项目 电商web app 
配置 eslint 解除禁用tab function和() 有空格

#### 封装公共组件 底部foot
配置 路由组件 views里
使用阿里矢量图标库
css 样式配置高亮路由
#### router-view
<router-view></router-view> name 属性 不加 默认就是default
<router-view name="Foot"></router-view>  ===> 路由组件 components: {default: , Foot: ,} 这样路由配置即可渲染两个组件
路由配置 {
          path: '/mine',
          name: 'mine',
          components: {
            default: , 
            Foot: 
          },
          mate: { // 可以携带 路由的其他需要信息 
            title: '我的',
            icon: '#kskd'
          }
        }
#### 引入swiper import css
在 mounted() {} 才可以  

### 动态路由传参 命名路由(路由别名 name属性)
{name prams}  结合使用
{path query}  结合使用

### 脚手架热部署导致的问题，
解决方案：

进入 \node_modules\sockjs-client\dist\sockjs.js
注释 1606行
### 路由守卫 导航守卫
组件中 对于可以复用的路由组件 可以通过 updata 来获取动态改变地址数据
beforeRouteEnter()
beforeRouteUpdate(to,from,next){

}
beforeRouteLeave()

### 解决 重复点击路由 或者刷新报错
改写 push 
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}
### vuex 全局状态管理 存储购物车
state  状态 (数据管理) 
mutations 改变state 的唯一方式 就是提交一个mutation 
action  异步 改变 state 也需要提交一个mutation

辅助函数 mapMutations mapState mapGetters

### 本地存储 vuex cart 
通过本地存储取到 vuex => state.cart