nuxtjs中单独引入Message组件的问题

2020-03-16 15:57:53

参考地址 element-ui中单独引入Message组件的问题

需要注意的事项，貌似nuxtjs中引入只需要下面的第四步就可以了。然后记得引入相应的css代码，否则很难看，代码，去element源码中去找。


1.安装elementui

npm i element-ui -S

2.安装 babel-plugin-component

npm install babel-plugin-component -D

3.找到.babelrc 把原文件内容全部删除，粘贴下面代码

{ "presets": [["env", {"modules": false,"targets": {"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]}}],"stage-2"],"plugins": ["transform-runtime",["component",[{"libraryName":"element-ui","styleLibraryName":"theme-default" //1.4的老项目用这个，2.0的用theme-chalk，假设没效果看看官网又把默认的主题改 成那个了 跟着改一下应该就可以了}]]],"comments":false,"env": {"test": {"presets": ["env", "stage-2"],"plugins": ["istanbul"]}}}

4.在mian.js中引入

// 引入elementUIimport { Message  } from 'element-ui';//由于Message组件并没有install 方法供Vue来操作的，是直接返回的，因此按照官方文档单独引入的方法是//会报错的，需要给 Message 添加 install 方法Message.install = function (Vue, options) {Vue.prototype.$message = Message}Vue.use(Message )//消息提示

组件中不需要引入，可以直接用了


  • 精彩推荐

  • 2017-09-11 16:34:14

    Nginx如何保留真实IP和获取前端IP

    squid，varnish以及nginx等，在做反向代理的时候，因为要代替客户端去访问服务器，所以，当请求包经过反向代理后，在代理服务器这里这个IP数据包的IP包头做了修改，最终后端web服务器得到的数据包的头部的源IP地址是代理服务器的IP地址，这样一来，后端服务器的程序给予IP的统计功能就没有任何意义，所以在做代理或集群的时候必须解决这个问题，这里，我以nginx做集群或代理的时候如何给后端web服务器保留(确切的说是传递)客户端的真实IP地址。

  • 2017-09-11 16:35:22

    ngx_http_realip_module使用详解

    网络上关于ngx_http_realip_module的文章千篇一律，全是在说怎么安装，最多贴一个示例配置，却没有说怎么用，为什么这么用，官网文档写得也十分简略，于是就自己探索了一下。

  • 2017-09-11 16:39:43

    基于Nginx dyups模块的站点动态上下线

    在分布式服务下，我们会用nginx做负载均衡， 业务站点访问某服务站点的时候， 统一走nginx， 然后nginx根据一定的轮询策略，将请求路由到后端一台指定的服务器上。

  • 2017-09-13 13:49:21

    Web性能测试：工具之Siege详解

    Siege是一款开源的压力测试工具，设计用于评估WEB应用在压力下的承受能力。可以根据配置对一个WEB站点进行多用户的并发访问，记录每个用户所有请求过程的相应时间，并在一定数量的并发访问下重复进行。siege可以从您选择的预置列表中请求随机的URL。所以siege可用于仿真用户请求负载，而ab则不能。但不要使用siege来执行最高性能基准调校测试，这方面ab就准确很多

  • 2017-09-14 10:18:25

    15分钟成为Git专家

    不管是以前使用过 Git 还是刚开始使用这个神奇的版本控制工具的开发者，阅读了本文以后都会收获颇丰。如果你是应一名有经验的 GIT 使用者，你会更好的理解 checkout -> modify -> commit 这个过程。如果你刚开始使用 Git，本文将给你一个很好的开端。

  • 2017-09-28 16:42:57

    Linux vmstat命令实战详解

    vmstat命令是最常见的Linux/Unix监控工具，可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率，内存使用，虚拟内存交换情况,IO读写情况。这个命令是我查看Linux/Unix最喜爱的命令，一个是Linux/Unix都支持，二是相比top，我可以看到整个机器的CPU,内存,IO的使用情况，而不是单单看到各个进程的CPU使用率和内存使用率(使用场景不一样)。

  • 2017-10-13 16:21:29

    Activity的四种launchMode

    launchMode在多个Activity跳转的过程中扮演着重要的角色，它可以决定是否生成新的Activity实例，是否重用已存在的Activity实例，是否和其他Activity实例公用一个task里。这里简单介绍一下task的概念，task是一个具有栈结构的对象，一个task可以管理多个Activity，启动一个应用，也就创建一个与之对应的task。