美文网首页
Vue.js的nuxt框架引用element-ui

Vue.js的nuxt框架引用element-ui

作者: 背影_9115 | 来源:发表于2018-05-31 20:42 被阅读0次

    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预处理语言,等我没那么忙我就去看一下,现在先偷一下懒吧

    相关文章

      网友评论

          本文标题:Vue.js的nuxt框架引用element-ui

          本文链接:https://www.haomeiwen.com/subject/swjcsftx.html