介绍

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

一、启动Nuxt项目

首先用VSCode工具打开之前建好的nuxt项目，按住Alt+F12快捷键，打开Terminal终端，输入npm run dev启动项目，记住必须在当前项目的路径下。

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

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

三、在package.json文件中查看

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

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

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

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

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

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

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

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

1. 在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>

2. 此时访问http://localhost:3000/demo，发现页面上已经显示了ElementUI的组件样式.
   
   ========================================================

后记

好啦，以上就是本期全部内容，能看到这里的人呀，都是能人。

十年修得同船渡，大家一起点关注。

我是♚焕蓝·未来，感谢各位【能人】的：点赞、收藏和评论，我们下期见！

各位能人们的支持就是♚焕蓝·未来前进的巨大动力~

注：如果本篇Blog有任何错误和建议，欢迎能人们留言！