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 )//消息提示

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


  • 2019-11-29 13:47:22

    百度地图做电子围栏总结

    在地图上画出围栏,设置围栏信息后保存,生成围栏列表。全选时,地图视野可看到全部的围栏区域,单独勾选会调整地图视野到当前勾选的围栏。围栏区域的中心点要显示围栏名称。

  • 2019-11-29 13:50:29

    图片连接处出现白线

    block导致,只要父元素设置font-size:0或者设置img display: block; 便可。但是我设置了没有用,这条线不是所有的机型都有,而且页面滚动之后又消失,我琢磨半天,各种尝试,发现把图片高度减少(增加)1px就解决了。因为我们的项目是用postcss-px-to-viewport,我每张图片都是设置高度的,应该是数值转换出现偏差。

  • 2019-11-29 13:54:07

    粗略计算多边形中心点(并不是很准确,但简单好用)

    也是再做栅栏系统,搜索如何获取多边形中心点的问题上,发现了这个,简单易于理解,但是并不是特变准确,但也不影响使用。 后来发现了新的算法,并且百度地图也提供相应的api。 具体内容我写在了前面的文章,大家可以找一下。

  • 2019-11-29 14:20:38

    vue,vuthis.$parent算法

    由于组件嵌套,其实vue parent的位置也改变了,我们可以通过下面的图片,来看一下,parent到底什么哪一层

  • 2019-11-29 14:23:24

    百度地图 多个标记点设置最佳视角

    通过下面的语法,我们可以为不规则图形,以及过大的图形进行地图适配,更好的展示我们画的图形,当然,如果展示所有的图形,我们可以暴力的把所有的点组合起来进行展示,点过多不知道会不会影响性能,不过我们也可以从后台精简点数,不过地球是圆的,不知道好不好做。

  • 2019-12-01 08:00:16

    PHP中的HTTP_HOST和SERVER_NAME有什么区别

    多域名指向同一个php服务器,用nginx做代理,获取SERVER_NAME都是第一个域名,这就尴尬了,至今不明白咋回事,最后用HTTP_HOST解决都,这个暂时倒是准确。

  • 2019-12-01 08:04:30

    laravel多路由配置,也可以做根据域名都动态路由

    在用laravel 框架开发大型应用的时候,由于 laravel 默认是只有一个路由文件,如果把项目所有模块的路由放在一个路由文件下,那么该路由文件就显得很臃肿,以至于后期难以维护,解决方案是根据不同模块配置不同路由文件。