Vue 全解：起手式

快速创建一个 Vue 项目

• 安装 @vue/cli

    npm install -g @vue/cli   
    // or
    yarn global add @vue/cli

• Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统

  • 更多信息请移步 Vue 官网文档 链接

• 使用 @vue/cli 创建一个新的项目目录

    vue creat 路径 / 目录名

• 提示请选择配置 (具体选择请自定斟酌)

可以选择 vue2 默认或者 vue3 默认快速配置，也可以自定义，这里选择自定义

• 项目功能

• CSS 扩展(dart-sass)

• 代码检查 (提交时检查)

• 单元测试方案 (Jest)

• 配置文件存放 (分开放还是放在 package.json 里)

• 最后两项，是否将以上配置作为以后项目配置的默认值，然后选择包管理器：yarn 或者 npm。
• 配置完成后，进入目录，运行 yarn serve 启动本地预览

Codesandbox.io

• 使用 codesandbox.io 可以更快速的创建一个 Vue 沙盒项目
  • 官网首页
  • 进入官网，点击 右上角 Create Sandbox (不需要登录)
  • 选择 Vue

然后就可以愉快的写代码了。

• 也可以将项目下载到本地

Vue 的两个版本

• 第一个： 完整版的 Vue

  • 文档的解释 文档链接

  如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项，或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板)，就将需要加上编译器，即完整版：

  • 引用 vue.js 或者引用 vue.min.js，即引用了完整版的 Vue，它可以直接从 HTML(或者 template 选项里) 得到视图。

• 第二个： 非完整版 (运行时版)

  • 使用 vue.runtime.js。非完整版不包含将占位符或其他的语句转换为 DOM 节点的编译器(compiler)。所以，文档里面写明了：运行时版本相比完整版体积要小大约 30%，所以应该尽可能使用这个版本。在配置脚手架引入时，默认使用此版本。
  • 相对的，非完整版的语法要相较完整版复杂。但我们可以借助 webpack(vue-loader),仍然使用完整版的语法开发，并在打包构建(build)时，自动转换为非完整版的语法。用户对 Vue 的依赖就可以使用体积较小的非完整版。

      // 需要编译器，从 template 选项(或 HTML)获得视图
      new Vue({
        template: '<div>{{ hi }}</div>'
      })
  
      // 不需要编译器，写在 render 函数里，用 h 来创建标签(h 是createElement 的缩写， 是 vue 传给 render 的)
      new Vue({
        render (createElement) {
          return createElement('div', this.hi)
        }
      })
  

template 和 render

• render----js 的方式做渲染

  • render（提供）是一种编译方式
  • render 里有一个函数 h，这个 h 的作用是将单文件组件进行虚拟DOM 的创建，然后再通过 render 进行解析。
  • h 就是 createElement()方法：createElement(标签名称,属性配置,children)

• template----html 的方式做渲染

  • template 也是一种编译方式，但是 template 最终还是要通过render 的方式再次进行编译。