Nuxt项目整合Element UI（一文秒懂，快速上手）-Toy模板网

这篇具有很好参考价值的文章主要介绍了Nuxt项目整合Element UI（一文秒懂，快速上手）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

介绍

对于一个前端小白来说，使用一套已有的框架作为基础，可以达到事半功倍的效果，在这里我们选择Element UI。Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库（官方文档中的叙述），下面我们将开始在之前搭建好的nuxt项目中引入Element UI。

一、启动Nuxt项目

首先用VSCode工具打开之前建好的nuxt项目，按住Alt+F12快捷键，打开Terminal终端，输入npm run dev启动项目，记住必须在当前项目的路径下。
Nuxt项目整合Element UI（一文秒懂，快速上手）

二、项目启动成功后，在nuxt项目中运行下面代码，引入ElementUI框架

npm install element-ui --save          //引入ElementUI框架

Nuxt项目整合Element UI（一文秒懂，快速上手）

三、在package.json文件中查看

Nuxt项目整合Element UI（一文秒懂，快速上手）

四、在plugins文件夹下，添加 ElementUI.js文件，内容如下所示

Nuxt项目整合Element UI（一文秒懂，快速上手）

import Vue from "vue";
import ElementUI from "element-ui";
Vue.use(ElementUI);

五、在nuxt.config.js中添加配置

Nuxt项目整合Element UI（一文秒懂，快速上手）

css: [
    "element-ui/lib/theme-chalk/index.css"
  ],

 plugins: [
    { src: "~plugins/ElementUI" },            //ElementUI插件

build: {
    transpile: [/^element-ui/],              //防止elementui打包多次
  }

六、为确保所有配置文件都能加载上，重启项目`npm run dev`

七、以上步骤完成后，就可以进行项目测试啦~

在pages下的demo.vue中添加

<el-row>
  <el-button plain>朴素按钮</el-button>
  <el-button type="primary" plain>主要按钮</el-button>
  <el-button type="success" plain>成功按钮</el-button>
  <el-button type="info" plain>信息按钮</el-button>
  <el-button type="warning" plain>警告按钮</el-button>
  <el-button type="danger" plain>危险按钮</el-button>
</el-row>