vue随笔

vue 搭建项目：vue init webpack ‘项目名称’

vue中stylue、stylue-loader安装使用：
npm install stylue --save
npm install stylue-loader@3.0.2 --save
移动端计算单位
css <style lang="stylus" rel="stylesheet/stylus"> c(p) { (p / 108) rem; } </style>
:style="" 动态设置css样式

vue中监听浏览器大小改变：

   mounted() {
    const that = this;
    window.onresize = () => {
      return (() => {
        that.height = document.documentElement.clientHeight + 'px';
      })()
    };
  },

v-if与v-show：
if是从dom中删除
show是display:none
v-for循环后如何在数组中添加内容
通过splice(start,num,…arr)

slot
name属性，通过标签调用name属性进行替换
例：

	<slot name="item-txt"></slot>
    <div slot="item-txt">分类</div>

vue-router 报错
问题：NavigationDuplicated: Avoided redundant navigation to current location
解答：

const originalPush = VueRouter.prototype.push

VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}`

v-bind 绑定class、style：
如果过于复杂可以f放在methods、computed中
例：

   <div :style="activeStyle"><slot name="item-txt"></slot></div>

  computed:{
    isActive(){
      return this.$route.path.indexOf(this.path) !== -1
    },
    activeStyle(){
      return this.isActive ? { color : this.activeColor } : {}
    }
  },

vue下webpack配置别名
cli4.x（文件）：node_modules/@vue/cli-serve/lib/config/base.js
配置：

	.alias
      .set('@', api.resolve('src'))
      .set('assets', api.resolve('src/assets'))
      .set('components', api.resolve('src/components'))
     

使用：

	import comp from 'components/comp'

	<img slot="item-icon" src="~assets/image/img.png" alt="">

vuex状态管理
通过this.$store.state属性来访问状态通过this.$store.commit( ’ mutation中方法 ’ )来修改状态
核心
getters
mutations
actions
modules

state	单一状态树
getters	类似计算属性
mutation	状态更新（ 必须同步操作 ）
modules	将store分割成模块，每个模块都有自己的state、getters、mutation…

vue响应式数据
vue.set( ’ ’ )
vue.delete( ’ ’ )

项目基本依赖
css ： normalize.css ( github中 )
js ：vue.config.js （ 配置别名 ）
.editorconfig（ 规范 ）