nuxt服务端渲染怎么引入element ui

摘要:
步骤1:安装elementuinpinstall--saveelement ui步骤2:创建一个新的js元素。js代码,位于插件文件importVuefrom'vu'importElementfrom'element-uiimport'elementui/lib/themeshark/index下。css'//如果不导入它,将没有样式Vue。use(元素)

第一步,安装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啦

效果:
nuxt服务端渲染怎么引入element ui第1张

免责声明:文章转载自《nuxt服务端渲染怎么引入element ui》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇STM32硬件调试详解CSS3-border-radius的兼容写法大全下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

python+selenium十四:xpath和contains模糊匹配

xpath可以以标签定位,也可以@任意属性: 如:以input标签定位:driver.find_element_by_xpath("//input[@id='kw']") 如:@type属性:driver.find_elements_by_xpath("//input[@type='text']") 一、xpath定位 1、常规属性 1.通过id定位dri...

Element drawer添加 滚动条 无法上下滚动

/*1.显示滚动条:当内容超出容器的时候,可以拖动:*/ .el-drawer__body { overflow: auto; } /*2.隐藏滚动条,太丑了*/ .el-drawer__container ::-webkit-scrollbar{ display: none; }   ...

element UI 动态设置菜单栏的折叠与展开

1、操作按钮 <el-container> <el-aside :width="isCollapse ? '64px' : '170px'"> <div :class="toggleButton" @click="togleCollapse"> <img src="h...

Javascript原生之用cssText批量修改样式

一般情况下我们用js设置元素对象的样式会使用这样的形式: var element= document.getElementById(“id”);element.style.width=”20px”;element.style.height=”20px”;element.style.border=”solid 1px red”; 样式一多,代码就很多;而且通...

Android自动化学习5--对uiautomator2常用操作进行封装

前言 本次我们将会对 uiautomator2 的一些基本操作进行简单的封装,以便更好的应用到UI自动化中。 重复多次滑动 在 uiautomator2 中,给我们提供了一些滑动的操作 swipe(),以及滑动扩展的操作 swipe_ext(),基于此我们可以对重复多次的滑动操作进行简单封装。 def up(self, scale=0.9, tim...

element Image组件

<template> <div class="el-image"> <slot v-if="loading"name="placeholder"> <div class="el-image__placeholder"></div> </slot>...