Vue学习笔记 7 - Vue CLI 的认识与使用 / 箭头函数

什么是 Vue CLI

如果你只是简单写几个 Vue 的 Demo 程序，那么你不需要 Vue CLI。但如果你在开发大型项目，那么你必然需要使用 Vue CLI。

• 使用 Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。

• 如果每个项目都要手动完成这些工作，那无疑比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。

• CLI 是什么意思？

  • CLI 是 Command-Line Interface，翻译为命令行界面，俗称脚手架。
  • Vue CLI是一个官方发布 vue.js 项目脚手架。
  • 使用 vue-cli 可以快速搭建 Vue 开发环境以及对应的 webpack 配置。

 

Vue CLI 使用前提 —— Node、Webpack

macOS 环境下Webpack与Node安装

 

Vue CLI的使用

• 安装 Vue 脚手架

sudo npm install -g @vue/cli

可以通过运行以下命令来初始化项目：

vue create my-project

• 上面安装的是Vue CLI 3 的版本，如果我们还需要同时使用旧版本的vue-init功能初始化项目是不行的，我们还需要全局安装一个桥接工具来拉取 2.x 版本：

sudo npm install @vue/cli-init -g

Vue CLI 2 初始化项目：

vue init webpack my-project

Vue CLI2 初始化项目过程(视频教程 p91)

vue init webpack my-project

初始化完成：

• ESlint

ESLint是一个语法规则和代码风格的检查工具。

如果想要关闭Eslint，可在config/index.js中修改：

• runtime-compiler和 runtime-only 的区别(p95)

左：runtime-compiler

内部编译过程：template -> ast -> render -> vdom -> UI

右：runtime-only（性能更高，内部代码量更少）

内部编译过程：render -> vdom -> UI

总结：如果在之后的开发中，你依然使用 template，就需要选择runt