Vue笔记十一——Vue CLI相关

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的使用

• 安装Vue脚手架

  • npm install -g @vue/cli
    

• 检查vue版本：

  • vue --version
    

• 拉取 2.x 模板 (旧版本）
• Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `[email protected]` 相同

• Vue CLI2初始化项目

  • vue init webpack my-project
    

• Vue CLI3初始化项目

  • vue creat my-project
    

Vue CLI2初始化项目过程

1. 首先使用vue init webpack vuecli2test，这里会根据后面的vuecli2test名称创建一个文件夹，存放之后的项目内容，该名称也会作为默认的项目名称，但是不能包含大写字母等
2. Project name，项目名称不能包含大写。
3. Author，作者信息，或默认从git中读取信息。
4. Vue build runtime：后面详细介绍。
5. Install vue-router？这里选择no，后面自己安装。
6. Use ESLint to lint your code？ESLint检测代码规范，看自己的情况。
7. Set up unit tests？单元测试，某些公司起强制要求写单元测试。
8. Set up e2e tests with Nightwatch？e2e测试，end to end安装Nightwatch，是一个利用selenium或webdriver或phantomjs等进行自动化测试的框架。
9. 选择用npm或yarn安装都可以。

• 项目创建完毕后的目录结构：

runtime-compiler和runtime-only的区别

• 首先创建两个项目：

• 其中：
  • 第一个在创建的第4步时：Vue build runtime选择的是runtime+compiler。
  • 第二个在创建的第4步时：Vue build runtime选择的是runtime-only。

Vue程序执行过程

• parse:解析
• ast （abstract syntax tree）抽象语法树
• virtual dom 虚拟dom
• UI(真实dom)

运行过程：

template解析成ast，ast编译成render函数，render函数走向虚拟dom（vdom），最后虚拟dom渲染成真实的UI

如果在vue中使用runtime-compiler的话（需要更多vue源码[比runtime-only多出的代码就是template和ast的]），步骤如下：

template -> ast -> render -> vdom -> UI

如果在vue中使用runtime-only的话(跳过了template和ast)（1，性能更高。2，需要的vue源代码更少），步骤如下：

render -> vdom -> UI

那么.vue文件中的template是谁处理的呢？是由vue-template-compiler！

我们一般在用Vue手脚架CLI搭建项目的时候，选择的是runtime-only就可以了，但是第1个会保险一点。

关于render的createElement用法

• 上面的h就是createElement函数的简写。

 render: function (createElement) {
    // 1.普通用法：creatElement('标签', {标签的属性}, [''])
    return createElement('h2',
      { class: 'box' },
      ['Hello World',
        createElement('button', ['按钮'])]);
  }

使用普通用法如上，会创建h2标签替代index.html中的

，效果如下：

传入组件对象：

 render: function (createElement) {
    // 2.传入组件对象
    return  createElement(cpn);
  }

当然，当我们也可以将App组件传入：

认识Vue CLI目前版本

• vue-cli目前版本与2版本有很大区别：
  • vue-cli的设计原则是”0配置“，移除了配置文件根目录下的build和config等目录
  • vue-cli提供了vue ui命令，提供了可视化配置，更加人性化
  • 移除了static文件夹，新增了public文件夹，并且index.html移动到了public中
• 选择特性：

如果你决定手动选择特性，在操作提示的最后你可以选择将已选项保存为一个将来可复用的 preset。

~/.vuerc

被保存的 preset 将会存在用户的 home 目录下一个名为 .vuerc 的 JSON 文件里。如果你想要修改被保存的 preset / 选项，可以编辑这个文件。

在项目创建的过程中，你也会被提示选择喜欢的包管理器或使用淘宝 npm 镜像源以更快地安装依赖。这些选择也将会存入 ~/.vuerc。

vue create 命令有一些可选项，你可以通过运行以下命令进行探索：

vue create --help
用法：create [options] <app-name>

创建一个由 `vue-cli-service` 提供支持的新项目


选项：

  -p, --preset <presetName>       忽略提示符并使用已保存的或远程的预设选项
  -d, --default                   忽略提示符并使用默认预设选项
  -i, --inlinePreset <json>       忽略提示符并使用内联的 JSON 字符串预设选项
  -m, --packageManager <command>  在安装依赖时使用指定的 npm 客户端
  -r, --registry <url>            在安装依赖时使用指定的 npm registry
  -g, --git [message]             强制 / 跳过 git 初始化，并可选的指定初始化提交信息
  -n, --no-git                    跳过 git 初始化
  -f, --force                     覆写目标目录可能存在的配置
  -c, --clone                     使用 git clone 获取远程预设选项
  -x, --proxy                     使用指定的代理创建项目
  -b, --bare                      创建项目时省略默认组件中的新手指导信息
  -h, --help                      输出使用帮助信息

• 关于main.js中的mount：

配置去哪了？

• 我们打开终端输入：

vue ui

• 但我们想更改配置，需要添加一个vue.config.js文件，在里面添加配置，当然需要使用git提交到本地仓库。

回顾

Vue笔记一——Vue安装与体验
Vue笔记二——Vue声明周期与模板语法
Vue笔记三——计算属性(computed)
Vue笔记四——事件监听的使用
Vue笔记五——条件判断与循环遍历
Vue笔记六——书籍购物车案例
Vue笔记七——v-model表单输入绑定详细介绍
Vue笔记八——关于组件不可不知的知识！
Vue笔记九——slot插槽的使用
Vue笔记十——webpack敲重点！！！（详解）