Vue CLI 笔记

所有组件都继承自 vue 的原型

什么是 CLI

• CLI：Command-Line Interface 通称命令行界面
• 是在图形用户界面得到普及之前使用最为广泛的用户界面
• 用户通过键盘输入指令，计算机接收到指令后，予以执行

什么是 Vue CLI

• 官方定义：
  Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：
  • 通过 @vue/cli 实现的交互式的项目脚手架。
  • 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
  • 一个运行时依赖 (@vue/cli-service)，该依赖：
    • 可升级；
    • 基于 webpack 构建，并带有合理的默认配置；
    • 可以通过项目内的配置文件进行配置；
    • 可以通过插件进行扩展。
  • 一个丰富的官方插件集合，集成了前端生态中最好的工具。
  • 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
• 是一套使用 Vue.js 构建、开发、管理项目的标准工具
• Vue CLI 4.5以下，对应的是Vue2
• Vue CLI 4.5及以上，对应的是Vue3，当然，创建项目的时候可以选择Vue2

为什么大项目要用 Vue CLI 构建

• 如果是小型项目或者简单的Demo，不需要用 Vue CLI;
• 如果大型的项目，那么必然要用到 Vue CLI;
• 开发大型应用时，需要考虑到应用配置、代码结构、项目结构和部署、热加载、代码单元测试等事情
• 如果每个项目都要手动完成这些工作，无疑效率会非常低，所以需要借助脚手架 (Vue CLI)来完成这些工作
• 官方原话： Vue CLI 致力于将 Vue 生态中的工具基础标准化。
  它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题

Vue CLI （3以上）的使用

• 安装

  npm install -g @vue/cli
  # OR
  yarn global add @vue/cli

• 创建项目

  vue create my-project

• 以图形化方式创建或配置Vue Cli 3/4 项目

  vue ui（使用图形化界面创建和管理项目）

使用2.0模板

• Vue CLI3 的命令和 vue cli2 相同，因此 vue cli2 的命令被覆盖。 如果要使用旧版本的 vue init 功能，需要全局安装一个桥接工具

  npm install -g @vue/cli-init
  vue init webpack my-project -- `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同

• e2e测试--e2e:end to end

  • 安装 NightWatch,是一个利用 selenium 或 webdriver 或 phantomjs 等进行自动化测试的框架

runtime only vs runtime compiler 的区别

• runtime compiler ：template->ast->render()->v-dom->真实 dom
• runtime only ：render()->v-dom->真实 dom
• runtime compiler demo 如该目录下的 cli2test,main.js 中有 template的即为 runtime compiler
• runtime only demo 如该目录下的 cli4test,main.js 中没有 template，但有render 函数
• runtime only 性能更高，因为省却了 编译template的过程

render 函数

• 传dom：render:function(createEl){return createEl('h2',{class:'box'},['hello',createEl('button','按钮')])}
• 传组件：render:createEl=>createEl(Component)}

配置相关（cli3&cli4）

• 1，vue ui:使用图形化界面配置项目
• 2，通过node_modules\@vue\cli-service\ 这个目录来修改配置，比如 webpack
• 3，在项目根目录下手动添加 vue.config.js 该配置文件会自动与其他 webpack 配置文件合并

vue.config.js 配置别名(alias)

• chainWebpack:()=>{
• config.resolve.alias
• .set("@", resolve("src"))
• .set("components", resolve("src/components"))
• .set("assets", resolve("src/assets"))
• }

别名的使用

• import xxx from "@/components/xxx";
• import xxx from "components/xxx";
• src="@/assets/img/xxx.jpg"
• src="~assets/img/xxx.jpg"