首页 新闻 搜索 专区 学院

vue 的后端渲染 nuxt 怎么引入 mint ui

0
[待解决问题]

nuxt搭建架子以后在哪里写代码?  那个是入口文件啊?

小奶鑫的主页 小奶鑫 | 初学一级 | 园豆:190
提问于:2018-01-04 17:18
< >
分享
所有回答(1)
1

也不知道前端和后端一样不一样,反正前端是直接下载,然后在main.js中引入然后vue.use("mint-ui")就可以使用了!

成思小夜 | 园豆:242 (菜鸟二级) | 2018-01-05 10:20

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'
]
}
 
 
这样就可以正常使用了。
支持(0) 反对(0) 小奶鑫 | 园豆:190 (初学一级) | 2018-01-05 10:52
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册