# Cnode社区

**Repository Path**: lovexzq/CnodeSheQu

## Basic Information

- **Project Name**: Cnode社区
- **Description**: 仿照cnode 社区做一个网页版 基于vuex 的单页应用
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2017-11-15
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-axios-gitee

> 码云项目展示。 基于vue , axios. 实现登陆登出

## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run all tests
npm test
```

## 技术栈
1. vue
2. vuex
3. axios
4. vue-material  [http://vue-material.com]

具体可以参考官网。

## 关于vue-material
> 中文官网严重滞后，建议参考英文官网 [vuematerial.io](http://vuematerial.io)

> main.js 的使用部分
```bash
//VueMaterial部分 开始-------------------------------
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.css'
Vue.use(VueMaterial)
Vue.material.registerTheme('default', {
  primary: 'blue',
  accent: 'red',
  warn: 'red',
  background: 'grey'
})
Vue.material.registerTheme('night',{
    primary: {
        color: 'blue-grey',
        hue: 900
    },
    accent:{
        color: 'grey',
        hue: 700
    },
    background:{
     color: 'blue-grey',
     hue: 800
    }
})
Vue.material.setCurrentTheme('night')
//VueMaterial部分 结束
```

### 特别注意的是
> 中文文档里面是这么写的：
```bash
Vue.material.theme.register('default', {
  primary: 'cyan',
  accent: 'pink'
})
```
*  按照中文文档的写法，一启动就会报错

> 官网还有提到，在index.html里引入两个样式：
```bash
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
```
* 第一项是Robot字体，这个建议不要引了，因为它不是一个字体，是一堆，别想了，根本引不到~~~~，我们伟大的wall，现在越来越难翻了。
* 第二项是图标icon,这个可是要用的，那么打开浏览器中打开//fonts.googleapis.com/icon?family=Material+Icons , 发现里面有一行

```bash
url(http://fonts.gstatic.com/s/materialicons/v21/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}
```

下载后放到asset文件夹里面，再把//fonts.googleapis.com/icon?family=Material+Icons也右键保存到assets里面它的名字是icon.css。

具体可以看我的src下的assets目录

> npm run dev运行项目
  是不是报错了？
  提示什么什么模块没有安装，是因为样式加载的问题，安装一下就好了

  ```bash
     npm install sass-loader --save
     npm install node-sass --save
  ```

## 非父子组件通信
> vue父子组件直接的通信想信大家都已经了然于心了，那么非父子组件直接如何通信呢？
> 这时可以通过eventHub来实现通信.
  所谓eventHub就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件.
```bash
let Hub = new Vue(); //创建事件中心
```
组件A：
```bash
<div @click="eve"></div>
methods: {
    eve() {
        Hub.$emit('change','helloworld'); //Hub触发事件
    }
}
```

组件B:
```bash
<div></div>
created () {
  Hub.$on('change', ('helloworld') => {
    this.msg = 'helloworld'
  })
}
```

### 当然也有一种办法
> 由于vue2.0 移除了1.0中的$dispatch 和$broadcast 这两个组件之间通信传递数据的方法 ,官方的给出的最简单的升级建议是使用集中的事件处理器,而且也明确说明了 一个空的vue实例就可以做到,因为Vue 实例实现了一个事件分发接口.
> 在初始化web app的时候，给data添加一个 名字为eventhub 的空vue对象
```bash
new Vue({
  el: '#app',
  router,
  render: h => h(App),
  data: {
    eventHub: new Vue()
  }
})
```

> 好的 这个时候 你就可以一劳永逸了，在任何组件都可以调用事件发射 接受的方法了.
  如何获取到这个空的vue对象 eventhub呢.在组件里面直接调用这个,
* 某一个组件内调用事件触发
```bash
// 通过this.$root.eventHub获取此对象
// 调用$emit 方法
this.$root.eventHub.$emit('YOUR_EVENT_NAME', yourData)
```

* 另一个组件内调用事件接受,当然在组件销毁时接触绑定,使用$off方法
```bash
this.$root.eventHub.$on('YOUR_EVENT_NAME', (yourData)=>{
    handle(yourData)
} )
```