zoukankan      html  css  js  c++  java
  • nuxt服务端渲染怎么引入element ui

    第一步,安装element ui

    npm install --save element-ui
    

    第二步骤
    在plugins文件底下新建一个js---element.js
    代码

    import Vue from 'vue'
    import Element from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'  //不引入他的话就没有样式了
    Vue.use(Element)
    

    第三步 在nuxt.config.js地下写上plugins

     plugins: [
        { src: '~plugins/element', ssr: true } //这里是你引入文件,一定要核对一下文件名字哦
      ]
    

    第四步 在vender里面去渲染element ui

    vendor: ['element-ui']
    

    完整的代码:

     build: {
        /*
        ** 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)/
            })
          }
        },
        vendor: ['element-ui']  // changed
      },
      plugins: [
        { src: '~plugins/element', ssr: true } // changed
      ]
    

    第五步 也就是去测试一下 去element ui api随便找个html看看有没有效果,有的话 就ok啦

    效果:

  • 相关阅读:
    接口的设置
    总结一下《vue的使用》
    标准时间对象的转换
    类数组转换为数组
    异步函数
    vue中moudles的作用及使用方法
    es5数组的新方法
    React JSX
    React更新元素 基础
    React将某段文字插入到某个元素里
  • 原文地址:https://www.cnblogs.com/antyhouse/p/12509812.html
Copyright © 2011-2022 走看看