2020 vue2.0学习笔记

1. You are using the runtime-only build of Vue where the template compiler is not available
  答：在项目目录下 新建 vue.config.js 加入： module.exports = { runtimeCompiler: true }
      不要采用 runtime 形式的文件，即可实现支持template编译
2. 指定安装插件版本
    npm install echarts@4.9.0 --save
3. Error in mounted hook: "TypeError: Cannot read property '$http' of undefined"
    axios是无法被其他组件使用的，会出现上面的错误 axios不能像其他组件一样通过Vue.use()直接被引用
    要将axios改写为 Vue 的原型属性，才能被其他组件使用
    Vue.prototype.$http = axios
      方案二：
      npm install axios
      npm install axios vue-axios
    import axios from 'axios'
    import vueAxios from 'vue-axios';
    Vue.use(vueAxios, axios); //Vue.axios/this.axios/this.$http使用axios，一次封装方便协作

4. vue-router.esm.js?8c4f:2008 Uncaught (in promise) NavigationDuplicated: Avoided redundant
    navigation to current location: "/studyArea/home/bookDetial/12099569?name=%E9%AB%98%E7%AD%89%E6%95%B0%E5%AD%A6".

    解决方法一：经过多次尝试发现原因可能是 在重新下载依赖包时，安装的vue-router还是之前出错的那个版本，
              解决方法也很简单，在项目目录下运行 npm i vue-router@3.0 -S 即可。

    解决方法二：如果你不想用方法一那就在 main.js里添加一段代码。
      代码如下：
      import Router from 'vue-router'
      const routerPush = Router.prototype.push
      Router.prototype.push = function push(location) {
        return routerPush.call(this, location).catch(error=> error)
      }

    我的解决方法：catch() 捕获异常
    this.$router.push({
                name: 'bookDetail',
                params: {bookId: b.bookId},
                query: {name: b.name}
              }).catch(err => err);

5. ElementUi 弹窗引入不起作用报错
   Uncaught (in promise) TypeError: this.$message.error is not a functio
  // 挂载到 Vue 的原型
  Vue.prototype.$message = Message; 放在 Vue.use(ElemtnUI) 之前

6. vue add vuex
    vue : 无法加载文件 D:\winapp\nodevm\npm\vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.c
    om/fwlink/?LinkID=135170 中的 about_Execution_Policies。
    所在位置 行:1 字符: 1
    + vue add vuex
    + ~~~
        + CategoryInfo          : SecurityError: (:) []，PSSecurityException
        + FullyQualifiedErrorId : UnauthorizedAccess
    以管理员身份运行VS code 
    执行 Set-ExecutionPolicy RemoteSigned 
    查看 Get-ExecutionPolicy       

7. vuex 严格模式
  Error: [vuex] do not mutate vuex store state outside mutation handlers. 

8. 计算属性
   // 这样就不需要 手动的设置 get, set 方法
   computed: { name: function(){  ..... } }
   computed: { name(){ get() { return ...;}, set(){} } }

8. 时间格式化
    (1) 方法一： moment 插件
    npm i moment --save
    //转换时间格式
    import moment from 'moment/moment'
    Vue.filter('moment', function (value, formatString) {
        formatString = formatString || 'YYYY-MM-DD';
    return moment(value).format(formatString);

    在需要的组件里
    <el-table-column label="故障记录日期" align="center">
           <template slot-scope="scope">{{scope.row.guzhangjiluTime | moment}}</template>
    </el-table-column>

    (2) 方法二： 自定义格式化方法

    在main.js引入 过滤器
    Vue.filter('dateFormat', function(originVal) {
      const dt = new Date(originVal)

      const y = dt.getFullYear()
      const m = (dt.getMonth() + 1 + '').padStart(2, '0')
      const d = (dt.getDate() + '').padStart(2, '0')

      const hh = (dt.getHours() + '').padStart(2, '0')
      const mm = (dt.getMinutes() + '').padStart(2, '0')
      const ss = (dt.getSeconds() + '').padStart(2, '0')

      return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
    })

11. setting 搜索 minimap 取消前面的打钩 关闭 右侧的 缩略 预览

git pull --rebase
git rm --cached file_path

12. this.axios.delete('demo/url', {
      data: { id: 123, name: 'Henry', phone: 13333333}
    })

    this.axios.post('demo/url', { id: 123, name: 'Henry', phone: 13333333 })

    PUT方法
    this.axios.put('demo/url', { id: 123, name: 'Henry', phone: 13333333 })

13 Visual Studio Code可以通过以下快捷键 格式化代码：
    On Windows 　　Shift + Alt + F
    On Mac 　　Shift + Option + F
    On Ubuntu　　 Ctrl + Shift + I

14. div 铺满父div 定位相对定位 position: relative 然后设置 子div height: 100% 即可

15 Vue中提示报错handlers[i].call is not a function  
   删除没有使用的 钩子方法
   mounted:{}
   created:{}

/******************************************************************************************/

1. 路由组件缓存
  利用keepalive 做组件缓存保留组件状态提高执行效率

  <keep-alive include="about">
      <router-view></router-view>
  </keep-alive>
  利用include 或 exclude 要给组件设置 name  两个特别的生命周期 activated、deactivated

  export default {
    activated(){
       .....
    },
    deactivated:{
       .....
    }
  }
 
 2. vuex 同一状态管理
   （1）采用《集中式存储管理》应用的所有组件的状态，
   （2）并以相应的规则保证状态《可预测的方式》发生变化，
   （3）组件通过提交事件变更数据的状态。资源在组件间共享便于维护测试
 
    三个状态： state 将应用全局状态定义在 state 中
    起始状态：
    state: {
      isLogin: false
    }

    Mutation 
    修改state只能通过 mutation 
    mutation: {
      login(state) { state.isLogin = true },
      loginOut(state) {state.isLogin = false}
    }

    Action
    异步操作

    module 模块化

3. mapState/mapMutation/mapAction
  
  通过这些映射方法避免 $store 的直接访问
  
  /---------------------------------------------------------/
  import {mapState} from 'vuex' // 用在 计算属性

  computed: {
    ...mapState('user', ['isLogin'])
  }
  // 注意：使用ES6的展开运算符

  /---------------------------------------------------------/
  import {mapActions} from 'vuex'

  methods:{
    login() {
      this['user/login'](this.loginVue.loginName).then(()=>{...}).cache(()=>{...})
    },
    mapActions(['user/login','user/loginOut'])
  }

  /---------------------------------------------------------/

  派生状态
  可以使用 getters 从store中 的state中派生一些状态
  
  user.js
  
  mutations:{
    sertUsername(state, username) {
      state.username = username;
    }
  },
  getters:{ // 派生出欢迎信息
    welcome: state => {
        return state.username + ",欢迎您回来。";
    }
  }

4. 插件
    Vuex 的store接受 plugins 选项，这个选项报咯出每次 mutation 的钩子， vuex 插件就是一个函数他接受store 作为唯一参数

    const myPlugin = store => {
        // store  初始化调用
    }

    注册插件
    const store = new Vuex.store({
      plugins: [myPlugin]
    })

5 . 组件通信的方式：
  props / $bus / vuex

   . $parent  $children
   . $root   $refs
   . provide inject
   . $attrs 
   . $listeners 

    // 事件派发、监听、回调
// class Bus {
//   constructor(){
//     this.callbacks = {}
//   }
//   $on(name, fn){
//     this.callbacks[name] = this.callbacks[name] || [];
//     this.callbacks[name].push(fn);
//   }
//   $emit(name, args) {
//     if (this.callbacks[name]) {
//       this.callbacks[name].array.forEach(cb => cb(args));
//     }
//   }
// }

// 事件总线 实现组件间的通信  它的工作原理是发布/订阅方法，通常称为 Pub/Sub
// Vue.prototype.$bus = new Bus();

6. 组件之间的通信
   
（1）父子组件通信：props 父组件定义 传给子组件使用
   props: ['money']
   props:{
     money:{type : Number, default: 0}
     money: {validater(value) { return value > 100; } // 定义一个验证规则 }
   }

   传递的属性时可以直接在子组件中使用
（2）子父组件通信
    父组件自定义事件，子组件派发事件 传值 $emit(事件名, 传递的值) 注意的 事件的名称必须是小写 不能用驼峰
 
 (3) 非父子组件通信
     ref 指定 子组件 $refs 绑定完成

    《1》子组件1 通过父组件的属性传递调用 《2》父组件定义的方法使用$refs获取到子组件2 《3》并调用子组件2的方法

    3.1 父组件 定义方法 views() 用来传递
      >(1) <Child1 ref = 'child1' :views="views" />  
           <Child2 ref = 'child2' />  
      >(2) views(){ this.$refs.child2.viewGirl(); } 
    
    3.2 child1.vue
      > (1) 定义触发事件         <span @click="vwGirl"> 看看 </span>
      > (2) 接受来自父组件的属性  props: ['views']
      > (3) 方法调用改变 组件2   methonds:{ vwGirl(){ this.views() } }
    
    3.3 child2.vue
      > (1) 定义展示的控制属性 flag
      > (2) 定义暴露方法   viewGirl() { this.flag = !this.flag; }   

   事件总线$bus
    (1) 父组件定义好 总线 $bus
      import Vue from 'vue'
      Vue.prototype.$bus = new Vue();

      import Child3 from './Child3'
      import Child5 from './Child5'
    
    (2) 子组件相互传值
      计算属性:
        Child5 监听事件 通过计算属性 控制参数: this.$bus.$on(事件名称, [事件的参数值]) // []  表示非必填
      @click 方法触发
        Child3 派发事件 this.$bus.$emit(事件名称);

（4） 多组间通信
   vuex 

/**********************************************************************************/

3 VS code 常用快捷键

  1> 显示 Errors或 Warnings，也可以 Ctrl+Shift+M
  2> 跳转到行数，也可以 Ctrl+G 直接进入
  3> 按一下 Backspace 会进入到 Ctrl+P 模式
    在 Ctrl+P 下输入 > 可以进入 Ctrl+Shift+P 模式
    在 Ctrl+P 窗口下还可以直接输入文件名，跳转到该文件

  4>  ?   列出当前可执行的动作
      !   显示 Errors或 Warnings，也可以 Ctrl+Shift+M
      :   跳转到行数，也可以 Ctrl+G 直接进入
      @    跳转到 symbol（搜索变量或者函数），也可以 Ctrl+Shift+O 直接进入
      @    根据分类跳转 symbol，查找属性或函数，也可以 Ctrl+Shift+O 后输入" : "进入
      #   根据名字查找 symbol，也可以 Ctrl+T
  5> 
      新建文件:   Ctrl+N
      文件之间切换:   Ctrl+Tab
      打开一个新的VS Code编辑器:    Ctrl+Shift+N
      关闭当前窗口:   Ctrl+W
      关闭当前的VS Code编辑器:   Ctrl+Shift+W
      切出一个新的编辑器窗口（最多3个):   Ctrl+\
      切换左中右3个编辑器窗口的快捷键:   Ctrl+1  Ctrl+2  Ctrl+3

  6> 自动保存：File -> AutoSave(中文界面下“文件”->“自动保存”) 或者 Ctrl+Shift+P，输入 auto

  7> 单行注释：' ctrl + / ’
     多行注释（块注释）：' Alt+Shift+A ’