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>