Nuxt.js按需引入 emement-ui

microcosm1994 发布于2019-08-23 14:08 / 2292人阅读

摘要：全面配置文章系列安装依赖修改修改

☞☞☞nuxt.js全面配置☜☜☜

☞☞☞nuxt文章系列☜☜☜

babel-plugin-component 安装依赖

npm i -D babel-plugin-component
// or
yarn add -D babel-plugin-component

修改nuxt.config.js

module.exports = {
  build: {
    babel: {
      plugins: [
        [
          "component",
          { libraryName: "element-ui", styleLibraryName: "theme-chalk" }
        ]
      ]
    }
  },
}

修改plugins/element-ui.js

import Vue from "vue"
import {
  Pagination,
  Dialog,
  Autocomplete,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Menu,
  Submenu,
  MenuItem,
  MenuItemGroup,
  Input,
  InputNumber,
  Radio,
  RadioGroup,
  RadioButton,
  Checkbox,
  CheckboxButton,
  CheckboxGroup,
  Switch,
  Select,
  Option,
  OptionGroup,
  Button,
  ButtonGroup,
  Table,
  TableColumn,
  DatePicker,
  TimeSelect,
  TimePicker,
  Popover,
  Tooltip,
  Breadcrumb,
  BreadcrumbItem,
  Form,
  FormItem,
  Tabs,
  TabPane,
  Tag,
  Tree,
  Alert,
  Slider,
  Icon,
  Row,
  Col,
  Upload,
  Progress,
  Spinner,
  Badge,
  Card,
  Rate,
  Steps,
  Step,
  Carousel,
  Scrollbar,
  CarouselItem,
  Collapse,
  CollapseItem,
  Cascader,
  ColorPicker,
  Transfer,
  Container,
  Header,
  Aside,
  Main,
  Footer,
  Loading,
  Notification,
  Message,
  MessageBox
} from "element-ui"

import lang from "element-ui/lib/locale/lang/zh-CN"
import locale from "element-ui/lib/locale"

// configure language
locale.use(lang)

// set
Vue.use(Loading.directive)
Vue.prototype.$loading = Loading.service
Vue.prototype.$msgbox = MessageBox
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$prompt = MessageBox.prompt
Vue.prototype.$notify = Notification
Vue.prototype.$message = Message

// import components
Vue.component(Pagination.name, Pagination)
Vue.component(Dialog.name, Dialog)
Vue.component(Autocomplete.name, Autocomplete)
Vue.component(Dropdown.name, Dropdown)
Vue.component(DropdownMenu.name, DropdownMenu)
Vue.component(DropdownItem.name, DropdownItem)
Vue.component(Menu.name, Menu)
Vue.component(Submenu.name, Submenu)
Vue.component(MenuItem.name, MenuItem)
Vue.component(MenuItemGroup.name, MenuItemGroup)
Vue.component(Input.name, Input)
Vue.component(InputNumber.name, InputNumber)
Vue.component(Radio.name, Radio)
Vue.component(RadioGroup.name, RadioGroup)
Vue.component(RadioButton.name, RadioButton)
Vue.component(Checkbox.name, Checkbox)
Vue.component(CheckboxButton.name, CheckboxButton)
Vue.component(CheckboxGroup.name, CheckboxGroup)
Vue.component(Switch.name, Switch)
Vue.component(Select.name, Select)
Vue.component(Option.name, Option)
Vue.component(OptionGroup.name, OptionGroup)
Vue.component(Button.name, Button)
Vue.component(ButtonGroup.name, ButtonGroup)
Vue.component(Table.name, Table)
Vue.component(TableColumn.name, TableColumn)
Vue.component(DatePicker.name, DatePicker)
Vue.component(TimeSelect.name, TimeSelect)
Vue.component(TimePicker.name, TimePicker)
Vue.component(Popover.name, Popover)
Vue.component(Tooltip.name, Tooltip)
Vue.component(Breadcrumb.name, Breadcrumb)
Vue.component(BreadcrumbItem.name, BreadcrumbItem)
Vue.component(Form.name, Form)
Vue.component(FormItem.name, FormItem)
Vue.component(Tabs.name, Tabs)
Vue.component(TabPane.name, TabPane)
Vue.component(Tag.name, Tag)
Vue.component(Tree.name, Tree)
Vue.component(Alert.name, Alert)
Vue.component(Slider.name, Slider)
Vue.component(Icon.name, Icon)
Vue.component(Row.name, Row)
Vue.component(Col.name, Col)
Vue.component(Upload.name, Upload)
Vue.component(Progress.name, Progress)
Vue.component(Spinner.name, Spinner)
Vue.component(Badge.name, Badge)
Vue.component(Card.name, Card)
Vue.component(Rate.name, Rate)
Vue.component(Steps.name, Steps)
Vue.component(Step.name, Step)
Vue.component(Carousel.name, Carousel)
Vue.component(Scrollbar.name, Scrollbar)
Vue.component(CarouselItem.name, CarouselItem)
Vue.component(Collapse.name, Collapse)
Vue.component(CollapseItem.name, CollapseItem)
Vue.component(Cascader.name, Cascader)
Vue.component(ColorPicker.name, ColorPicker)
Vue.component(Transfer.name, Transfer)
Vue.component(Container.name, Container)
Vue.component(Header.name, Header)
Vue.component(Aside.name, Aside)
Vue.component(Main.name, Main)
Vue.component(Footer.name, Footer)

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100141.html

Vue ui 大法哪家强？

Element iView Vuex Mint UI Vant cube-ui，对比六大 vue ui 组件库，选中最适合的那个。 Element(pc) 介绍 & 版本饿了么前端团队开发的桌面端组件库，当前最新版本：2.4.8 Star：32.067k 项目特色团队维护支持三个版本：vue、react、angular 支持 Nuxt.js 常规支持：多语言、自定义主题、按需引入、内置...

Edison 2019-08-23 12:45 评论0 收藏0
细说 Vue 组件的服务器端渲染

摘要：所以，这次就来聊聊组件的服务器端渲染。这种模式下，后端只提供接口，传统的服务器端路由模板渲染则都有层接管。这样，前端开发人员可以自由的决定哪些组件需要在服务器端渲染，哪些组件可以放在客户端渲染，前后端完全解耦，但又保留了服务器端渲染的功能。细说 Vue 组件的服务器端渲染声明：需要读者对 NodeJs、Vue 服务器端渲染有一定的了解现在，前后端分离与客户端渲染已经成为前端开发的...

reclay 2019-08-23 17:51 评论0 收藏0
Nuxt.js踩坑分享

摘要：但是解决过程并不是很顺利的，在阅读中文文档时，忽略版本号，按照上面的提示进行操作，发现不能成功，后来各种，最后发现了该解决方案。发生在这个问题的原因时，服务端并没有或对象。构建问题 1. 如何在 head 里面引入js文件? 背景: 在标签中，以inline的形式引入flexible.js文件。本项目主要为移动端项目，引入flexible.js 实现移动端适配问题。 Nuxt.js ...

nidaye 2019-08-26 17:04 评论0 收藏0
2019，开发者应该学习的16个JavaScript框架

摘要：它不仅从前端移动到后端，我们也开始看到它用于机器学习和增强现实，简称。由于其高使用率，年的现状调查将其称为采用的安全技术。机器学习框架在年的开发者峰会上，宣布了他们的机器学习框架的实现，称为。更高级别的用于在之上构建机器学习模型。 2019，开发者应该学习的16个JavaScript框架 showImg(https://segmentfault.com/img/remote/14600...

Harpsichord1207 2019-08-23 16:45 评论0 收藏0
Nuxt.js 基础入门教程

摘要：原文链接开发一个单页面应用，相信很多前端工程师都已经学会了，但是单页面应用有一个致命的缺点，就是极不友好。基于它，我们可以快速开发一个基于的单页面应用。只有数据流存在相关配置时可用。引入后，所有页面均有效。原文链接 Vue 开发一个单页面应用，相信很多前端工程师都已经学会了，但是单页面应用有一个致命的缺点，就是 SEO 极不友好。除非，vue 能在服务端渲染（ssr）并直接返回已经渲...

yedf 2019-08-26 11:37 评论0 收藏0