Nuxt整合 Element-ui(超详细教学,看一遍你就会)

目录

1.下载安装element-ui

在指定项目的控制台上输入npm i element-ui -S开始下载安装

 在package.json中出现以下图片中的信息即为安装成功

 2.在plugins问价夹中创建element-ui.js文件

 3.在nuxt.config.js中添加配置信息

4.重新运行项目 npm run dev


1.下载安装element-ui

在指定项目的控制台上输入npm i element-ui -S开始下载安装

npm i element-ui -S

 在package.json中出现以下图片中的信息即为安装成功

 Nuxt整合 Element-ui(超详细教学,看一遍你就会)_第1张图片

 2.在plugins文件夹中创建element-ui.js文件

Nuxt整合 Element-ui(超详细教学,看一遍你就会)_第2张图片

添加以下信息

import Vue from 'vue'
import Element from 'element-ui'
// import locale from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale/lang/zh-CN'

// Vue.use(Element, { locale })
Vue.use(Element)

 Nuxt整合 Element-ui(超详细教学,看一遍你就会)_第3张图片

 3.在nuxt.config.js中添加配置信息

Nuxt整合 Element-ui(超详细教学,看一遍你就会)_第4张图片

css: [
    'element-ui/lib/theme-chalk/index.css'    // 引入全局样式
  ],
plugins: [
    '@/plugins/element-ui',  // ssr:true代表在服务端渲染,客户端不渲染
  ],
build: {
    transpile: [/^element-ui/], // 防止重复重复打包
  }

4.重新运行项目 npm run dev

你可能感兴趣的:(ui,vue.js,javascript)