日常记录Vue中遇见的Bug和一些用法

汇总：

BUG：
1、[Vue warn]: You are using the runtime-only...

Learning:
1、vue组件挂载到全局方法（简单版）

BUG：

1、[Vue warn]: You are using the runtime-only...

重要环境OR工具：
vue脚手架：Vue-cli3.0

问题现象：
在写一个Vue组件的时候出现该问题，报了错误

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build

解决方式：
从他人那学到：

思路：这里引用的是vue.runtime.esm.js，造成的不能正常运行，查看cli2X的版本，在webpack.base.conf.js配置文件中多加了一段代码，将 vue/dist/ package.json配置文件的"main": "dist/vue.runtime.common.js",改为引用代码中的引用vue/dist.vue.esm.js文件，意思就是说webpack.base.conf.js这个文件已经将vue/dist.package.json的错误引用纠正成vue/dist.vue.esm.js

所以cli2x运行不会报错，cli3版本对比cli2也要增加这样的修改，才能正常使用。

因此我们需要创建一个vue.config.js文件，写入：

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  configureWebpack: config => {
    config.resolve = {
      extensions: ['.js', '.vue', '.json', ".css"],
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src'),
      }
    }
  },
}

然后重新运行，是重跑项目。

Learning：

1、 vue组件挂载到全局方法（简单版）

重要环境OR工具：
脚手架：Vue-cli3.0

学习内容：
将Vue组件挂载到全局的方法，只记录如何操作

学习路径：
学习路径1

详细步骤：
1、挂载到全局
简单改变下helloworld.vue的文件：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<style scoped>
</style>

同级目录下创建一个index.js(里面的方法可以通用，但是还是根据具体需求采用)

import Alert from './HelloWorld.vue';
import Vue from 'vue';
let AlertConstructor = Vue.extend(Alert)
let instance
let seed = 1
let index = 2000
const install = () =>{
  Object.defineProperty(Vue.prototype,'$alert',{
    get(){
      let id = 'message_' + seed ++
      const alertMsg = options =>{
        instance = new AlertConstructor({
          propsData:options
        })
        index++
        instance.id = id
        instance.vm = instance.$mount()
        document.body.appendChild(instance.vm.$el)
        instance.vm.$el.style.zIndex = index
        return instance.vm
      }
      return alertMsg
    }
  })
}
export default install

2、使用
在main.js中引入

import Alert from '@/components/index'
Vue.use(Alert);

在需求VUE文件中引入

this.$alert({msg:'成功啦！'});