# vue-site

**Repository Path**: jxmlearner/vue-site

## Basic Information

- **Project Name**: vue-site
- **Description**: vue写企业站点
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2019-12-25
- **Last Updated**: 2022-06-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 用vue做一个简单的企业站点

## 设置 eslint的rules
```js
rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-tabs': 'off',
    'indent': ['off', 2],
    'space-before-function-paren': 'off'
  },
```

## 深度样式处理
`https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors`

## 使用 swiper 实现匀速滚动 (走马灯效果)
```css
.partner-scroll{ overflow:hidden; position:relative; flex: 1;  }
.partner-scroll .bd{ padding:10px;   }
.partner-scroll .bd .pic{
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; height: 35px;}
.partner-scroll .bd .pic img{ max-width:100%; max-height:100%; display:block; }

.partner-scroll ::v-deep.swiper-container-free-mode {
  >.swiper-wrapper {
    transition-timing-function: linear; /*之前是ease-out*/
  }
}
```
```js
<swiper :options="partnerSwiperOptions" ref="partnerSwiper">
  <swiper-slide>
    <div class="pic"><img :src="'/images/partner1.jpg'" /></div>
  </swiper-slide>
  ...
</swiper>
<script>
export default {
  data() {
    return {
      partnerSwiperOptions: {
        loop: true,
				speed: 2000,
        // grabCursor: true, // 不显示手型
        allowTouchMove: false,
        parallax: true,
        slidesPerView: 8,
        spaceBetween: 30,
        freeMode: true,
        // loopedSlides: 5,
				// autoHeight:true,
				autoplay: {
          delay: 0,
          stopOnLastSlide: false,
					disableOnInteraction: false
				}
      }
    }
  },
  mounted() {
    setTimeout(() => {
      let partnerSwiper = this.$refs.partnerSwiper.swiper
      // 鼠标覆盖停止自动切换
      partnerSwiper.el.onmouseover = function() {
        partnerSwiper.autoplay.stop()
      }

      // 鼠标离开开始自动切换
      partnerSwiper.el.onmouseout = function() {
        partnerSwiper.autoplay.start()
      }
    }, 20)
  }
}
</script>
```
+ 给 `swiper`的循环轮播项增加点击事件的注意事项，要使用`vue-awesome-swiper`自带的 `on`来处理
参考： https://blog.csdn.net/weixin_41296616/article/details/103677626    
```js
let vm = null
export default {
  data() {
    return {
      proSwiperOptions: {
        loop: true,
				speed: 1000,
				grabCursor: true,
        parallax: true,
        slidesPerView: 5,
        spaceBetween: 30,
        // loopedSlides: 5,
				// autoHeight:true,
				autoplay: {
					delay: 4000,
					disableOnInteraction: false
        },
        on: {
          click: function() {
            const realIndex = this.realIndex
            vm.detail(realIndex)
          }
        }
      },
      ...
    }
  }
}
```

## 获取api数据
1. `yarn add axios`
2. 写一个通用的获取api的方法 `src/assets/js/common-http.js`
```js
import axios from 'axios'
import { apiaddr } from '../../config'

function getInstrace (baseURL = apiaddr, headers = { 'Content-Type': 'application/json;charset=UTF-8' }) {
  // 自定义axios实例
  const instance = axios.create()
  // 相对URL
  instance.defaults.baseURL = baseURL
  // 请求超时时间
  instance.defaults.timeout = 20000
  // 请求头部
  instance.defaults.headers = headers
  return instance
}
export default getInstrace
```
3. 配置文件 `src/config.js`
```js
let apiaddr = '/api'

export {
  apiaddr
}
```
4. 开发时直接访问接口有跨域问题, 在`vue.config.js`中配置反向代理
```js
module.exports = {
  devServer: {
    port: 5050,
    host: '0.0.0.0',
    proxy: {
      '^/api': {
        target: 'http://localhost:8888',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}
```

## 加入`vuex`
1. 安装： `yarn add vuex`
2. 定义`store`, `src/store/index.js`
```js
import Vue from 'vue'
import Vuex from 'vuex'
import { loadCompanyInfo } from './mutation-types'
import api from '../api'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    companyInfo: {
      id: 0,
      companyName: '企业站DEMO',
      tel: '138********',
      address: '广东省深圳市南山区',
      contact: '江**',
      mobile: '12345644564',
      zipCode: '518000',
      email: '410958040@qq.com',
      QQ: '',
      QRCode: '',
      desc: '',
      content: '',
      copyRight: 'MIT Licensed | Copyright © 2019-present 江学美'
    }
  },
  mutations: {
    [loadCompanyInfo](state, payload) {
      state.companyInfo = Object.assign({}, payload.siteInfo)
    }
  },
  actions: {
    [loadCompanyInfo]({ commit }) { // 加载企业站的信息存储在state中
      api.siteinfo().then(res => {
        if (res.data.errorCode === 0) {
          commit({
            type: loadCompanyInfo,
            siteInfo: res.data.data
          })
        }
      })
    }
  }
})

export default store

```
3. `App.vue`中去获取站点信息存储在`state`中
```js
import { loadCompanyInfo } from './store/mutation-types'
import { mapActions } from 'vuex'

export default {
  created() {
    this[loadCompanyInfo]()
  },
  methods: {
    ...mapActions([loadCompanyInfo])
  },
}
```
4. 页面中去获取和使用`state`
```js
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['companyInfo'])
  }
}
```

## 使用`element-ui`的分页组件
1. `yarn add element-ui`
2. 因为只是使用极少数的组件，采用按需加载 `yarn add -D babel-plugin-component`
3. 修改`babel.config.js`
```js
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
```
4. 在`main.js`中引入分页组件
```js
import { Pagination } from 'element-ui'

Vue.use(Pagination)
```