Vue学习笔记（四）

Vue CLI

1.终端执行命令npm clean cache -force可以清空npm-cache。

2.对于vue cli2创建的项目，如果使用了eslint，但又不想再用了的话，可以在config目录下的index.js中，找到useEslint:true，将true改为false，在执行命令npm run dev编译一下。

3.runtime-compiler和runtime-only的区别

• 如果在之后的开发中依然使用template，就需要用runtime-compiler
• 如果使用的是.vue文件夹开发，就选择runtimr-only。

4.vue2.5.21->vue2.x->flow-type(facebook)；vue3.x->TypeScript(microsoft)。

5.vue-cli3和vue-cli2版本的区别

• 前者基于webpack4创建，后者基于webpack3
• 前者设计原则是“0配置”，移除了配置文件根目录下的build和config等目录
• vue-cli3提供了vue ui命令，提供了可视化配置
• 移除了static文件夹，新增了public文件夹，并且index.html移动到public文件夹中，最后

6.在创建vue-cli3项目时如果自己保存了设定的preset（配置），之后想要删除的话只需要找到文件（deepin下的）/home/erin/.vuerc，删除其中的presets对应的要删除的配置内容。

7.终端执行命令npm install可以自动安装项目的package.json中的一些依赖。

8.对于vue cli3创建的项目，执行命令npm run serve启动本地服务器，执行命令npm run build编译发布。

9.如果想改动vue cli3的配置，有3种方法：

• 启动本地的配置服务器：vue ui
• ./node_modules/@vue/cli-service/webpack.config.js文件
• 在当前项目根目录下创建文件vue.config.js，最后编译的时候会将其中的配置和隐藏起来的原来的配置文件合并

10.如果想知道项目当前vue的真实版本号，可以找到./node_modules/vue/dist/vue.js文件，最上面会标明版本号；或者./node_modules/vue/package.json文件，version对应的就是vue的真实版本号。

11.有关箭头函数和其中this的使用：

• 什么时候使用箭头函数：把一个函数作为另外一个函数的参数的时候。注意：在对象中定义函数时不需要用箭头函数的写法，直接用ES6的对象字面量增强写法即可

• 箭头函数中的this向外层作用域中一层层查找this，一直有this的定义。下面代码中，因为函数aaa是在对象obj中定义的，所以函数aaa中的this变量就是obj对象，箭头函数中的this变量就是obj对象。

  const obj = {
    aaa() {
      // 因为是call调用的该函数，并且会把window作为第一个参数传进去，所以以下面这种形式定义的函数，其中的this是Window
      setTimeout(function () {
        console.log(this); // Window
      });
  
      setTimeout(() => {
        console.log(this); // obj对象，"aaa: f"
      });
    }
  };
  

  const obj = {
          aaa() {
            setTimeout(function () {
              setTimeout(function () {
                console.log(this); // Window
              });
              // 因为外面最近的作用域是函数setTimeout，而它具有的this变量是Window，所以下面的箭头函数其中的this变量也就是Window
              setTimeout(() => {
                console.log(this); // Window
              });
            });
  
            setTimeout(() => {
              setTimeout(function () {
                console.log(this); // Window
              });
              setTimeout(() => {
                console.log(this); // aaa中的this，也就是obj对象
              });
            });
          },
        };