16 vue-cli

7/4/2021 vue

Vue CLI (opens new window)

vue create my-project
# OR
vue ui

vue-cli2初始化项目的过程_哔哩哔哩_bilibili (opens new window)

# Runtime-Compiler Runtime-Only

需要处理 Runtime-Compiler 和 Runtime-Only 的编译配置

Runtime-Compiler和Runtime-Only的区别 (opens new window)

使用Vue脚手架构建项目时Runtime + Compiler和Runtime-only的区别 - SegmentFault 思否 (opens new window)

Explanation-of-Different-Builds — Vue.js (opens new window)

生产环境部署 — Vue.js (opens new window)

  • render 函数

渲染函数 & JSX — Vue.js (opens new window)

new Vue({
  render: h => h(App),
}).$mount('#app')

这里的 h 就是 createElement

# 修改配置

使用 vue-cli 创建之后项目之后,很多配置项都隐藏了。 如果需要修改配置,可以使用如下方式:

  • vue ui

  • 在源码中查看真实的配置

  • 覆盖默认的配置

vue.config.js

配置项:配置参考 | Vue CLI (opens new window)


# 加餐 箭头函数中的 this

<body>

<script>

  // 问题: 箭头函数中的this是如何查找的?
  // 答案: 向外层作用域中, 一层层查找this, 直到有this的定义.
  const obj = {
    aaa() {
      setTimeout(function () {
        setTimeout(function () {
          console.log(this); // window   function 自己的回调作用域
        })

        setTimeout(() => {
          console.log(this); // window   上层 function 的作用域
        })
      })

      setTimeout(() => {
        setTimeout(function () {
          console.log(this); // window   function 自己的回调作用域
        })

        setTimeout(() => {
          console.log(this); // obj      上层 obj 的作用域
        })
      })
    }
  }

  obj.aaa()
</script>
</body>
更新时间: Sunday, July 4, 2021 15:59