vue process.env获取不到_从文档开始,重学vue(下)源码级别

此篇文章主要是从应用及源码层面讲解vue部分常用api,阅读起来可能略有难度,新手可以看《从文档开始,重学vue(上)》

示例代码均在vue-cli3中完成

Vue.extend()

可以使用 extend 创建一个子类,该方法通常用于构建全局组件,如弹框组件等,下面我们就用它来制作个全局alert组件吧

1. 首先我们需要一个alert.vue组件,组件很简单就接受一个参数,然后有两个控制显示隐藏的方法
2. 需要把alert挂载到body 注意extend的使用方式
3. 使用

使用之前别忘了在main.js中use一下

import Alert from "./components/Alert/create";Vue.use(Alert)

用起来也非常方便,如下:

mounted(){
    	this.$alert('公众号,码不停息')}

上面我们使用extend直接给他传了个组件进去,其实我们也可以给extend的配置对象,如下:

Vue.extend({
     template: "{
    {msg}}", data() {
       return {
         msg: "码不停息"   }; }});

下面我们通过源码来看看在vue内部extend都做了哪些事情,关键性代码已经加上注释主要做的事情就是把通过extend挂载的组件初始化,并完善里面的options最后返回组件