# VUE个人积累

使用VUE-cli创建的项目发布之前必须将 config/index.js 中 build 下的 productionSourceMap: true, 改为 productionSourceMap: false, 否则生产环境中可以看见所有的源码

## vue-cookies

安装

`npm install vue-cookies --save`

使用

```js
import VueCookies from 'vue-cookies'
Vue.use(VueCookies)
```

Api

  设置 cookie `this.$cookies.set(keyName, time)   //return this`

  获取 cookie `this.$cookies.get(keyName)       // return value`

  删除 cookie `this.$cookies.remove(keyName)   // return  false or true , warning： next version return this； use isKey(keyname) return true/false,please`

  查看一个cookie是否存在（通过keyName）`this.$cookies.isKey(keyName)  // return false or true`

  获取所有cookie名称 `this.$cookies.keys()  // return a array`

## nginx 配置

在vue路由模式为history的时候，刷新页面会出现404问题。我们只需要在服务器配置如果URL匹配不到任何静态资源，就跳转到默认的index.html。

```
server {
        listen 8105; // 表示你nginx监听的端口号
        root /home/admin/sites/vue-nginx/dist; // vue打包后的文件夹dist目录
        index index.html; 
        location / {
                 try_files $uri $uri/ /index.html; 
        }
}
```

## 常见问题

* store的对象可以直接更改，换另一个变量存着也是同一个内存地址，，尽量避免直接操作
  * var newObj = JSON.parse(JSON.stringify(obj)); 可以这样深拷贝

# vue typescript
* Component 装饰器 可以像类一样写
  * 变量定义为undefined将不会具备更新视图的功能，如需要请用null，或者使用data钩子，写在return里边
  * 组件的方法可以直接写在类里边
  * 计算方法为get和set
* Component组件引用
  ```js
    import OtherComponent from './OtherComponent.vue'
    @Component({
      // Specify `components` option.
      // See Vue.js docs for all available options:
      // https://vuejs.org/v2/api/#Options-Data
    components: {
      OtherComponent
    }
})
* msg!: string 感叹号值得是告诉编译器这里一定有值