Use Element-UI to fill in pits in detail

It is a preferred open source project for Vue to perform SSR. It can eliminate tedious Webpack, nodejs background service configuration and other operations, and conveniently build a VUE project that supports SSR. Element-UI is an opportunity Vue2.0+ development set of UI frameworks, implementing commonly used components, which can help developers quickly build a Vue-based system such as CMS system and backend management system.

Since Element-UI is not perfect in SSR support and lacks in documentation, using Element-UI in it is also a pitfall. You need to combine viewing Nuxt source code with Element-UI documents to fill in the pit.

1. Projects created

Provides a vue-cli template that can quickly start coding work.

vue init nuxt/starter \

2. Add Element-UI

Like other components, you can add them directly through npm or yarn.

yarn add element-ui

Using Element-UI in it needs to be introduced through plugins, so we need configuration files.

css: [
  '~assets/css/',
  'element-ui/lib/theme-default/'
 ],
 build: {
  vendor: [
   'axios',
   'element-ui'
  ],
  babel: {
   plugins: [['component', [{
    libraryName: 'element-ui',
    styleLibraryName: 'theme-default'
   }]]]
  },
  loaders:[
   {
    test: /\.css$/,
    loader: 'vue-style-loader!css-loader'
   },
   {
    test: /\.(png|jpe?g|gif|svg)$/,
    loader: 'url-loader',
    query: {
     limit: 1000, // 1KO
     name: 'img/[name].[hash:7].[ext]'
    }
   },
   {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    query: {
     limit: 1000, // 1 KO
     name: 'fonts/[name].[hash:7].[ext]'
    }
   }
  ],
  postcss: [
   require('autoprefixer')({
    browsers: ['last 3 versions']
   })
  ]
 },
 plugins: ['~plugins/element-ui'],

At the same time, we need to create a new plugins directory in the root directory and add a file, with the file content as follows:

import Vue from 'vue'

if (process.BROWSER_BUILD) {
 (require('element-ui'))
}

In this way, use of Element-UI can be achieved.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.