vue服务器渲染按需引入mint-ui

1.修改.babelrc文件,在.babelrc文件中plugins数组中添加

{
"presets": [["es2015", { "modules": false }], "stage-2"],
"ignore": ["node_modules/*"],
"plugins": [["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
}

2.在.vue文件中引入使用就可以了

<script>
import Vue from 'vue'
import { Button, Toast } from 'mint-ui'
Vue.component(Button.name, Button)
export default {
name: 'MintUi',
created() {},
computed: {},
asyncData({ store }) {},
methods: {
handleClick() {
Toast('Hello word')
}
}
}
</script>

 这样就可以了。

如果现在运行报Unknown plugin "component" specified in 。。。的错

可以执行npm install babel-plugin-component -D就可以了

vue服务端渲染按需引入mint的更多相关文章

  1. 解析Nuxt.js Vue服务端渲染摸索

    本篇文章主要介绍了详解Nuxt.js Vue服务端渲染摸索,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. Nuxt.js 十分简单易用.一个简单 ...

  2. [vue] vue服务端渲染nuxt.js

    初始化 使用脚手架工具 create-nuxt-app 快速创建 npx create-nuxt-app <项目名> npx create-nuxt-app 执行一些选择 在集成的服务器端 ...

  3. vue服务端渲染axios预取数据

    首先是要参考vue服务端渲染教程:https://ssr.vuejs.org/zh/data.html. 本文主要代码均参考教程得来.基本原理如下,拷贝的原文教程. 为了解决这个问题,获取的数据需要位 ...

  4. vue服务端渲染简单入门实例

    想到要学习vue-ssr的同学,自不必多说,一定是熟悉了vue,并且多多少少做过几个项目.然后学习vue服务端渲染无非解决首屏渲染的白屏问题以及SEO友好. 话不多说,笔者也是研究多日才搞明白这个服务 ...

  5. vue服务端渲染之nuxtjs

    前言 本篇主要针对nuxtjs中的一些重要概念整理和代码实现! 在学习vue服务端渲染之前,先搞清楚几个概念: 什么是客户端渲染(CSR) 什么是服务端渲染(SSR) CSR和SSR有什么异同 客户端 ...

  6. Egg + Vue 服务端渲染工程化实现

    在实现 egg + vue 服务端渲染工程化实现之前,我们先来看看前面两篇关于Webpack构建和Egg的文章: 在 Webpack工程化解决方案easywebpack 文章中我们提到了基于 Vue ...

  7. vue服务端渲染提取css

    vue服务端渲染,提取css单独打包的好处就不说了,在这里主要说的是抽取css的方法 要从 *.vue 文件中提取 CSS,可以使用 vue-loader 的 extractCSS 选项(需要 vue ...

  8. Nuxt.js vue服务端渲染

    一.为什么要用Nuxt.js 原因其实不用多说,就是利用Nuxt.js的服务端渲染能力来解决Vue项目的SEO问题. 二.Nuxt.js和纯Vue项目的简单对比 1. build后目标产物不同 vue ...

  9. 实例PK(Vue服务端渲染 VS Vue浏览器端渲染)

    Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...

随机推荐

  1. SQL注入和XSS攻击的原理

    8.4 Web跨站脚本攻击 8.4.1  跨站脚本攻击的原理(1) 跨站脚本在英文中称为Cross-Site Scripting,缩写为CSS.但是,由于层叠样式表 (Cascading Style ...

  2. python获取硬件信息模块

    https://github.com/redhat-cip/hardware https://github.com/rdobson/python-hwinfo https://github.com/r ...

  3. 配置一个高效快速的Git环境

    username and email editor difftool and mergetool alias 可以直接修改~/.gitconfig文件,也可以用命令配置一个可以实际使用的高效的Git环 ...

  4. Windows快捷操作技巧

    隐藏技能 在当前路径打开命令行 shift + 右键点击文件夹内的空白处,你会看到右键弹出菜单多了个选项 "在此处打开命令窗口",省去了打开命令行再cd到当前路径的麻烦. 快捷键 ...

  5. 服务器常用命令之 启用/禁用PING状态

    启用 echo 0 > /proc/sys/net/ipv4/icmp_echo_ignore_all  (PING的通) 禁用 echo 1 > /proc/sys/net/ipv4/i ...

  6. 如何读写json文件

    代码如下: import java.io.BufferedReader; import java.io.File; import java.io.FileReader; import java.io. ...

  7. Git的认识与学习

    第一部分:我的git地址是https://github.com/monkeyDyang 第二部分:我对git的认识 Git是一种良好的.支持分支管理的代码管理方式,能很好地解决团队之间协作的问题.每个 ...

  8. python入门15 函数

    函数的主要作用是实现代码复用 1 python内置函数 2 匿名函数lambda 3 自定义函数 def functionname(arg):... #coding:utf-8 #/usr/bin/p ...

  9. 为什么ssh一关闭,程序就不再运行了?

    问题描述 当SSH远程连接到服务器上,然后运行一个程序,eg: ./test.sh, 然后把终端开闭(切断SSH连接)之后,发现该程序中断. 原因 主要元凶: 挂断信号(SIGHUP) 信号 概念介绍 ...

  10. HDU 1045 Fire Net 【连通块的压缩 二分图匹配】

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1045 Fire Net Time Limit: 2000/1000 MS (Java/Others)    ...