vue 的后端渲染 nuxt 怎么引入 mint ui
所有回答(1)
1
也不知道前端和后端一样不一样，反正前端是直接下载，然后在main.js中引入然后vue.use("mint-ui")就可以使用了！
wentire解决了，我使用的是nuxt来引入mint-ui，和客户端渲染引入有一定的区别，大概配置是这样的
1.在plugins里面新建mint-ui.js文件：代码：
import Vue from 'vue'
import mint from 'mint-ui'
// 全部引用，此时需要在nuxt.config.js中设置css
//if (process.BROWSER_BUILD) {
Vue.use(mint)
//}
// 按需引用
// import { Button } from 'element-ui'
// Vue.component(Button.name, Button)
2.在nuxt.config.js里面配置代码
module.exports = {
head: {
title: 'xx',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Nuxt.js project' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
loading: { color: '#3B8070' },
build: {
//---------------注释掉解析eslint的代码，影响编码效率
extend (config, ctx) {
if (ctx.dev && ctx.isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
// loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
},
//---------------引用element-ui使用的代码---------------
// vender:[
// 'element-ui'
// ],
// babel:{
// "plugins": [["component", [
// {
// "libraryName": "element-ui",
// "styleLibraryName": "theme-chalk"
// },
// 'transform-async-to-generator',
// 'transform-runtime'
// ]]],
// comments: true
// },
// plugins: [
// { src: '~plugins/element-ui', ssr: true }
// ],
// css: [
// // 全部引用的时候需要用到
// 'element-ui/lib/theme-chalk/index.css'
// ],
//---------引入mint ui使用的配置代码---------------
vender:[
'mint-ui'
],
babel:{
"plugins": [["component", [
{
"libraryName": "mint-ui",
},
'transform-async-to-generator',
'transform-runtime'
]]],
comments: true
},
plugins: [
{ src: '~plugins/mint-ui', ssr: true }
],
css: [
// 全部引用的时候需要用到
'mint-ui/lib/style.css'
]
}
这样就可以正常使用了。