Vue.js的nuxt框架引用element-ui
前言
其实就是为nuxt添加一个插件,使用其他vue插件也是一样的用法
安装
npm install element-ui --save
调用element-ui
首先在nuxt项目下的plugins文件夹下新建一个element-ui.js文件,里面写:
import Vue from 'vue'
import Element from 'element-ui'
Vue.use(Element);
然后在nuxt根目录下找到nuxt.config.js文件,里面加上这些代码:
/*调用element-ui自带的css样式*/
css:[
{src:'element-ui/lib/theme-chalk/index.css'}
],
/*调用element-ui插件,ssr是服务器渲染*/
plugins: [
{
src:'~plugins/element-ui',
ssr: false}
],
/*
** Build configuration
*/
build: {
/*此处要加vendor*/
vendor: ['element-ui'],
/*
** Run ESLint on save
*/
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
},
},
至此,我们就可以 偷懒 愉快地使用element-ui了
END
当然,Vue本身支持less sass stuly这些css预处理语言,等我没那么忙我就去看一下,现在先偷一下懒吧
网友评论