VUE

参考资料：
https://cn.vuejs.org/
https://router.vuejs.org/zh-cn/
https://vuex.vuejs.org/
https://github.com/vuejs/awesome-vue

一、vue+jquery
vue(IE9+)

   企业后台或企业站

二、vue全家桶：vue+ES6+vuerouter+less(sass或stylus)+vuex+webpack+......

通过用vue脚本架来开发项目 

  npm install -g @vue/cli

 如果npm install安装一些依赖包慢，可以换成淘宝镜像：
   npm config set registry https://registry.npm.taobao.org

禁用eslint代码检查：config->index.js 找一下 useEslint: true,改成false

真机测试： 打开vue脚本架 config->index.js 中的host:"localhost"改为 host: '0.0.0.0'

打包路径：打开vue脚本架 config->index.js 中的
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),

// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
 将  assetsPublicPath: '/',改成assetsPublicPath: './'

移动端H5页面高清多屏适配方案:
https://note.youdao.com/share/?id=8e3044287f1ab4822b3647cfa21c67e5&type=note#/

通常浏览器默认使用的字号：16px;

浏览器最小能设置12px号字

       可以通过 transform:scale(0.8) 缩入

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架

//less: npm install less less-loader --save-dev
//sass: npm install sass-loader node-sass --save-dev

<style lang="less" scoped>

    @import "../static/css/reset.css";
    header {    
      height:@h;
      background: #000;
      color: #fff;
      text-align:center;
      line-height: .4rem;
    }

</style>

scoped:使每个组件都有一个局部样式，和其他组件样式不冲突

自定义高亮类：

const router=new VueRouter({
    linkExactActiveClass:"active",
    routes
});

vue的事件修饰符：
.stop：阻止冒泡
.prevent：阻止默认行为
.capture
.self

.once：只触发一次
.passive:.passive 修饰符尤其能够提升移动端的性能。

CommonJS:属于服务端规范，产生物是node.js
AMD,CMD:浏览器规范，属于异步规范

AMD:Async Module Document,产出物：require.js
CMD:comon mudle Document,产生物：sea.js
自定义指令：

1.解决问题：主要解决操作dom问题
2.使用方法

全局：

        // 注册一个全局自定义指令 `v-focus`
        Vue.directive('focus', {
          // 当被绑定的元素插入到 DOM 中时……
          inserted: function (el) {
            // 聚焦元素
            el.focus()
          }
        })

局部：

    directives: {
      focus: {
        // 指令的定义
        inserted: function (el) {
          el.focus()
        }
      }
    }

vue钩子：

1.生命周期钩子:

创建：beforeCreate,created(创建后，通常用于获取后台数据)
挂载：beforeMount,mounted(dom加载后，通常用于对页面dom操作时)
更新：beforeUpate,updated
销毁：beforeDestroy,destroyed
2.路由钩子（三类）
3.自定义指令钩子（5种）

keep-alive

VUEX

Vuex：是一个集中式状态管理工具，相当于react中的 redux

1） 主要解决的问题：大中型项目中复杂组件通讯问题

2） vuex操作流程：

         dispatch                   commit

vue组件---------------->actions------------>mutations------->state-------->vue组件更新

 3）vuex的重要概念：

      state:要保存的状态
      mutations:是最终改变状态的方法集，mutations中的代码是同步执行的
      actions:


4）使用步骤：

    第一步：先安装vuex

          npm install vuex --save

   第二步：在src创建一个store目录，用来存放vuex相关文件

    第三步：在store目录先创建一个index.js文件，做为vuex入口文件

  第四步：在store目录的index.js中，写入下面的内容

            //引入vuex，vue
            import Vuex from 'vuex';
            import Vue from 'vue';
            
            //让vue识别vuex
            Vue.use(Vuex);
            
            
            //存储状态
            const state={
                 userinfo:{
                     username:'张三',
                     age:20,
                     token:'1001'
                 }
            }
            
        //将vuex暴露出去
        export default new Vuex.Store({
        
            state
        
        });

第五步：在main.js中引入store，并在new Vue中注册

          //引入vuex
        import store from './store';
        new Vue({
        .......
          store,
          ........
        });

第六步：如何获取和设置数据

获取：在对应组件的computed中处理

  即： this.$store.state来获取

设置/修改数据:通过commit到mutations来修改state

如何提高vuex的使用体验：

1.优化state写法
import {matpState} from 'vuex'
在计算属性中添加下面的内容：

   computed:{
      //组件的计算属性
        str() {
            return "hello"+this.msg

        },
   //vuex的数据
        ...mapState({
        address:'address',
        userinfo:'userinfo'

        })

    }
}

2.优化actions,mutations

    import { mapState,mapActions,mapMutations  } from 'vuex';
   ...mapActions(['gomodify','aa','bb']),
   ...mapMutations(['setValue']),

3.隔离vuex各部分，提高可维护性