vue项目中的小知识--快捷键-vue插件版本号--vscode插件等

0 版本号

npm uninstall -g vue-cli

npm install -g @vue/cli
npm install -g @vue/cli@4.5.13

cnpm install --save less less-loader@5

cnpm install --save vue-router@3.5.3
cnpm install --save vue-router@3

1 代码片段的获取：

vscode扩展中搜： vue vscode snippets

2 vscode中一些常用扩展

3 进入另一个文件夹，返回上一级

cd app
cd ..

4查看Vue的版本和Vue/CLI的版本

查看Vue版本：

1.npm list vue

2.进入项目中package.json文件直接查看

查看Vue/cli版本：

vue -V 或者 vue --version

5 --save-dev --save区别

简单来说： 
 
使用命令 --save 或者说不写命令 --save  ,都会把信息记录到 dependencies   中；
dependencies 中记录的都是项目在运行时需要的文件；

使用命令 --save-dev 则会把信息记录到 devDependencies  中；devDependencies 中记录的是项目在开发过程中需要使用的一些文件，在项目最终运行时是不需要的；也就是说我们开发完成后，最终的项目中是不需要这些文件的；


所以，如果只是在开发过程中需要的工具或者文件我们 使用 --save-dev 即可；
如果是项目运行必须的文件，那么就使用 --save就好了；

6 csdn图片大小尺寸

<div align=center> <img src="https://img-blog.csdnimg.cn/5c56b33df8b2471d8d85c6c342de94e9.png" width="50%" height="50%" >

6 postman,airpost 接口测试

7各个插件的版本号

8 vue中全局组件一般写在components中，一般组件写在pages中

9 created可能会导致页面白屏，mounted会导致闪屏，体验各不相同

10 watch和computed应用

watch和nextTick合用==》swiper轮播图
computed常用来处理空对象和空数组的问题

computed:常和vuex配合使用

 mounted() {
    //派发action:通过Vuex发起ajax请求，将数据存储在仓库中
    this.$store.dispatch("getBannerList");
    }
computed: {
    ...mapState({
      bannerList: (state) => state.home.bannerList,
    }),
  },

watch有两种方式：函数和对象形式【下面是对象形式】

  watch: {
    //监听bannerList数据的变化：由空数组到里面含有四个元素的数组
    //对象形式
    bannerList: {
      //如果执行handler方法，代表组件身上这个属性已经有了【含有数据的数组】
      //当前这个函数执行，只能保证bannerList数据已有，无法保证v-for已经执行结束
      //v-for执行完毕，才有结构【现在watch中没办法保证】

      //nextTick:在下次DOM更新  循环结束之后执行延迟回调，在修改数据后立即执行这个方法，获取更新后的DOM
      handler(newValue, oldValue) {
        // 方法二：watch和nextTick()
        //
        this.$nextTick(() => {
          var mySwiper = new Swiper(
            // document.querySelector(".swiper-container"),
            this.$refs.mySwiper, //用ref
            {
              loop: true, // 循环模式选项
              // 如果需要分页器
              pagination: {
                el: ".swiper-pagination",
                clickable: true,
              },
              // 如果需要前进后退按钮
              navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
              },
              // 如果需要滚动条
              //scrollbar: {
              //el: '.swiper-scrollbar',
              // },
            }
          );
        });
      },
    },
  },

computed常用来处理空对象和空数组的问题

:src="skuImageList[0].imgUrl"

因为skuImageList为空数组，他的【0】项undefined，他的imgUrl报错
所以子组件需要处理：

  <img :src="imgObj.imgUrl" />

  computed:{
      imgObj(){
        return this.skuImageList[0]||{}
      },

11 api 接口及测试接口是否有数据

```javascript
//获取search数据  /api/list  POST
//当前接口，给服务器传递一个默认参数，至少是一个空对象
export const reqGetSearch=(params)=>requests({url:'/list',method:'post',data:params})

/**请求方式两种：
 *     axios('get')
 *     axios({})
 * post用data，get用params
 */

测试接口是否有数据，在main.js中

import {reqGetSearch} from '@/api/index'
//至少是一个空对象
console.log(reqGetSearch({}),'12212');

12配置全局事件总线

配置全局事件总线：
在main.js中

new Vue({
  render: h => h(App),

  //全局事件总线$bus配置
  beforeCreate(){
    Vue.prototype.$bus=this;
  },

  //注册路由：底下的写法是kv一致省略v，切router小写
  //注册路由信息，当这里书写router时，组件身上都拥有$route,$router属性
  router,
  //注册仓库，组件实例身上会多出一个$store属性
  store,
}).$mount('#app')

 removeKeyword() {
      //通知兄弟组件Header清除关键字
      this.$bus.$emit('clear')
    },

 mounted(){
  //通过全局事件总线清除关键字
    this.$bus.$on('clear',()=>{
      this.keyword='';
    })
  },

13开发环境和生产环境

14 接口文档管理工具：Swagger, Apizza, Yapi

除了上面这三个，市面上还有很多其他的Api文档工具。如：eoLinker、ShowDoc、easydoc、MinDoc，word等