vue2 ​

// vite.config.js
import { defineConfig } from "vite";
import { createVuePlugin } from "vite-plugin-vue2";
export default defineConfig({
  plugins: [createVuePlugin()],
});

// main.js
import Vue from "vue";
import App from "./App.vue";
new Vue({ render: h => h(App) }).$mount("#app");

// 基本配置
const vm = new Vue({
  el: "#demo", // 挂载元素, 也可通过 `vm.$mount(el)`
  template: "", // 模板
  props: {
    demoString: String,
    demoNumber: [Number, String],
    demoDefault: {
      type: String,
      default: "demo",
    },
  },
  data() {
    // 数据, 一般是返回对象数据的方法, 若为对象则存在共用问题
    return {
      num: 0,
      obj: { o: { b: "j" } },
    };
  },
  computed: {
    // 计算属性
    db_num() {
      return this.num * 2;
    },
    triple: {
      get() {
        return this.num * 3;
      },
      set() {},
    },
  },
  watch: {
    num(newVal, oldVal) {
      // do something
    },
    obj: {
      handler(newVal, oldVal) {},
      deep: true,
    },
  },
  filters: {}, // 过滤器
  methods: {}, // 方法
});

// 生命周期
const vm = new Vue({
  // 初始化 events & lifecycle 后触发
  beforeCreate() {},
  // 初始化 injections & reactivity 后触发
  created() {},
  // 编译 template 或将 el 的 outerHTML 作为 template 编译后触发
  beforeMount() {},
  // 创建 vm.$el 并替换 el 后触发
  mounted() {},
  // data 修改后触发 (此时 DOM 还没同步)
  beforeUpdate() {},
  // data 修改后且虚拟DOM完成了更新后触发(此时 DOM 已更新)
  updated() {},
  // 调用 vm.$destory() 后触发
  beforeDestory() {},
  // 卸载 数据监听、事件监听、子组件 后触发
  destoryed() {},
});

// 挂载、销毁
vm.$mount("#demo"); // 挂载到指定元素
vm.$destory(); // 销毁实例，该操作会保留已经渲染的 HTML

// nextTick: 数据更新后 DOM 是非同步更新的, nextTick 为DOM更新后的回调
vm.$nextTick(cb);

// 全局组件注册, 两种命名方式都可以
Vue.component("CompName", {
  /** 组件配置, 略 */
});
Vue.component("comp-name", {
  /** 组件配置, 略 */
});

// 在组件中引入组件
import CompName from "./demo/CompName.vue";
export default {
  components: { CompName },
};

// 通过 resolve 加载
Vue.component("async-comp", function (resolve) {
  setTimeout(resolve({}), 1000);
});
// 通过 import 加载
Vue.component("async-comp", () => import("./async-comp.vue"));
// 局部注册
export default {
  components: { "async-comp": () => import("./async-comp.vue") },
};

export default {
  render(createElement) {
    return; // @returns {VNode}
    createElement(
      // {String | Object | Function}
      // 一个 HTML 标签字符串，组件选项对象，或者
      // 解析上述任何一种的一个 async 异步函数。必需参数。
      "div",
      // {Object}
      // 一个包含模板相关属性的数据对象
      // 你可以在 template 中使用这些特性。可选参数。
      {
        // (见下面 数据对象示例)
      },
      // {String | Array}
      // 子虚拟节点 (VNodes)，由 `createElement()` 构建而成，
      // 也可以使用字符串来生成“文本虚拟节点”。可选参数。
      [
        "先写一些文字",
        createElement("h1", "一则头条"),
        createElement(MyComponent, {
          props: {
            someProp: "foobar",
          },
        }),
      ]
    );
  },
};

// 数据对象示例
{
  // 与 `v-bind:class` 的 API 相同，
  // 接受一个字符串、对象或字符串和对象组成的数组
  'class': {
    foo: true,
    bar: false
  },
  // 与 `v-bind:style` 的 API 相同，
  // 接受一个字符串、对象，或对象组成的数组
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 普通的 HTML attribute
  attrs: {
    id: 'foo'
  },
  // 组件 prop
  props: {
    myProp: 'bar'
  },
  // DOM property
  domProps: {
    innerHTML: 'baz'
  },
  // 事件监听器在 `on` 内，
  // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
  // 需要在处理函数中手动检查 keyCode。
  on: {
    click: this.clickHandler
  },
  // 仅用于组件，用于监听原生事件，而不是组件内部使用
  // `vm.$emit` 触发的事件。
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
  // 赋值，因为 Vue 已经自动为你进行了同步。
  directives: [
    {
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  // 作用域插槽的格式为
  // { name: props => VNode | Array<VNode> }
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
  // 如果组件是其它组件的子组件，需为插槽指定名称
  slot: 'name-of-slot',
  // 其它特殊顶层 property
  key: 'myKey',
  ref: 'myRef',
  // 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
  // 那么 `$refs.myRef` 会变成一个数组。
  refInFor: true
}

// 定义一个混入对象, 其内容为 组件的一部分
const commonPart = {
  created() {}, // 可以是一些通用的逻辑等
};
// 在组件中引入混入对象
export default {
  mixins: [commonPart],
};

/**
 * 全局注册指令, 使用时需要加上 'v-' 前缀, 如这里为 'v-demo'
 * 参数说明:
  - `el` : 指令绑定的元素
  - `binding` <Object>
    - `name` : 指令名，即指令注册时的名称(不含`v-`)
    - `value` : 指令的绑定值，即给指令所赋的值(`=`后面的值)
    - `oldValue` : 指令绑定的前一个值，仅在`update`和`componentUpdated`钩子中可用
    - `expression` : 字符串形式的指令表达式，即给指令所赋的表达式(`=`后面的表达式，未计算成值)
    - `arg` : 传给指令的参数，可选(使用形式为`v-directive:attr`时，`attr`为其参数)
    - `modifiers` : 包含修饰符的对象(使用形式为`v-directive.modi1.modi2`时，修饰符对象为`{ modi1: true, modi2: true }`)
  - `vnode` : Vue 编译生成的虚拟节点
  - `oldVnode` : 上一个虚拟节点，仅在`update`和`componentUpdated`钩子中可用
  - 说明
    - 处理`el`参数，其他参数都应是只读的
 */
Vue.directive("demo", {
  bind() {}, // 只调用一次，指令第一次绑定到元素时调用
  inserted() {}, // 被绑定元素插入父节点时调用
  update() {}, // 所在组件的VNode更新时调用
  componentUpdated() {}, // 指令所在组件的VNode及其子VNode全部更新后调用
  unbind() {}, // 只调用一次，指令与元素解绑时调用
});
// 简写方式, 默认配置于 `bind` 和 `update` 钩子上
Vue.directive("demo", function () {});

// 局部注册指令
export default {
  directives: {
    demo: {},
  },
};

// 定义插件, 需要提供一个 install 方法
// 插件通常用来给示例挂载通用方法，批量加载全局组件、全局指令，或者实现自定义功能等
const somePlugin = {
  install(Vue, options) {
    Vue.component("demo", {});
    Vue.directive("some", function () {});
    Vue.prototype.$http = axios;
  },
};
// 引入插件, 通过 Vue.use 加载插件, options 为可选
Vue.use(somePlugin, options);

// webpack.config.js 其他配置 略
const VueLoaderPlugin = require("vue-loader/lib/plugin");
module.exports = {
  rules: [{ test: /.vue$/, loader: "vue-loader" }],
  plugins: [new VueLoaderPlugin()],
};