vue备忘

1.nvm 管理nodeJs；

    nvm -version

2.nodeJs 提供脚本运行的环境；（仓库、镜像）
    
    node -v
    nvm install stable      安装最新的node.js
    nvm install v10.10.0    下载安装制定版本
    nvm uninstall 4.6.2     卸载
    nvm ls                  查看node版本

    nvm list
    nvm use 14.6.2          切换

3.nrm 提供操作仓库的语法；

    sudo npm i -g nrm  // 安装 
    nrm ls // 查看所有的npm源和当前正在使用的npm源
    nrm add name url // 添加自定义的npm源，name 为自定义源名称 ，url为npm源链接
    nrm use name // 切换npm源


4.vue-cli 原生脚手架 （用于自动生成vue.js+webpack的项目模板） 
    
    cnpm install cnpm -g --registry=https://registry.npm.taobao.org

*** 全局安装 vue-cli    ：   cnpm install -g vue-cli (查看安装版本 vue -V)

    原生创建项目：
        vue init 项目
        vue init mpvue/mpvue-quickstart demo（mpvue小程序）

******  全局引入 element-ui 
cnpm install element-ui --save 
cnpm install element-ui -S
cnpm install element-ui --save


5.vue启动部署命令：
    cnpm install（npm install antd --save）淘宝
    cnpm cache clean --force    清除cache
    cnpm run build (npm run build:prod)
    cnpm run dev

vsCode命令：
    Command + Shift + P / F1 显示命令面板
    Command + P 快速打开
    


备注：
    npm rebuild node-sass  命令，（如若不行，则先运行npm install node-sass命令执行）





1、create html加载完成前被调用；
   mounted html加载完成后，el的值被挂载后被调用；
   watch：watch是去监听一个值的变化，然后执行相对应的函数。
   computed：computed是计算属性，也就是依赖其它的属性计算所得出最后的值

 ==activated：在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等

2、$refs 和 $el
   减少dom的消耗使用 ref绑定 this.$refs.调用 （普通）
   this.$refs.（ref值）.方法（） （ref加在子组件上）
   $el来获取组件中的DOM元素

3、$event获取dom对象
    e.keyCode
    e.target 是你当前点击的元素
=== e.currentTarget 是你绑定事件的元素


4、var let和const


5、state不必在考虑组件之间的传值
   mapState：
        mapState(['nickname','age','gender'])  

        nickname(){return this.$store.state.nickname}
        age(){return this.$store.state.age}
        gender(){return this.$store.state.gender}


6、class绑定样式 :class="{showStatue: this.showStatue}"

7、class样式判断 
 <button :class="[item.state=='工作' ? 'online' : '',item.state=='离线' ? 'offline' : '']"></button>
:class="['uni-btn-sty', isSel ? 'isSel_sty' : '']"


<div :style="computeStyle">555</div>
computed: {
  computeStyle() {    return { opacity: !this.editableCheckNum ? 0.5 : 1 }
  }
}

:style="{ 'background-color': currentStep3 ? '#2E9BF6' : '#A6A6A6' }



8、设置在容器上的属性有6种：

    1.flex-direction
    2.flex-wrap
    3.flex-flow
    4.justify-content
    5.align-item
    6.align-content


9、vue中assets和static目录的区别
static中的文件是不会经过webpack编译的，一般建议存放一些外部第三方（公用）的静态资源文件。
assets因为会经过webpack编译，建议是存放一些只有组件自己使用到的静态资源。


10、:style="{backgroundImage:`url(${require(''+item.dt_model_cat_icon)})`}"